Add image overlay to image capture

[adnanhz]

Hello,

I'd like to add image an overlay image as a guide for image capture. Here's an example I've made on the code by using the browser inspector:

I think adding a this.props.children to allow the user to add any child elements they'd like is the best approach to do it.

Thanks.

[MABelanger]

@Keftaa
Thank for the suggestion, I'm trying different approach.

[ybv]

@MABelanger @Keftaa Just curious if this is possible?

[adnanhz]

@ybv I just reviewed what I did back then and I simply used CSS to put a div on top of another. If you're interested, here's a snippet of the code I had written:

<Modal isOpen={this.state.cameraModalOpen}>
          <ModalBody>
            <div style={{width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
              <img src="images/photo-outline.png"
                style={{position: 'absolute', width: '65%',
                  height: '74%', opacity: 0.4, zIndex: '1'}} />
                <Camera style={{width: '100%', height: '100%', position: 'absolute', top: 0, left: 0}}
                onTakePhoto = { (dataUri) => { this.onTakePhoto(dataUri); } }
                >

              </Camera>
            </div>

          <Row>
            <Col>
              <h1>Picture Guidelines</h1>

            </Col>
          </Row>
          <Button color="red" onClick={() => {this.setState({cameraModalOpen: false})}}>Cancel</Button>
          </ModalBody>
        </Modal>

[robhung]

@Keftaa Does the Camera component then take a photo of only what's contained within the overlay, or do you still capture the entire photo with the background?

Also, the Camera component doesn't seem to accept style, did it still work without it?

[ybv]

thanks for sharing this @Keftaa!

[adnanhz]

@robhung no unfortunately the overlay is for display only.
I don't remember whether style on camera worked or not. But the whole overlay thing worked.