Crop an image to get only QR Code part

Question

Working on a web application which needs to scan the QR code from the device camera. In iOS its not possible to open the camera to scan the image. The alternative was was to upload a picture taken from the camera of the QR Code.

But the issue is the libraries which we are using to decrypt the QR code, does not recoganise the image uploaded since it has other information surrounding the QR code too. Just taking the image of QR code is not possible.

Is there a way where we can crop just the QR code part of the image ? or any library that can decrypt the QR code despite all other information in the image

Answer 1

You can draw the image onto a canvas and then select the part of the image that contains the QR code, and copy that to a new Image, finally converting the image to a blob or dataURL.

Note: the hard part will be finding the location of the QR code in the image.