Let’s first talk about the basic methods of canvas drawing, as follows:
const myCanvas = document.createElement('canvas'); myCanvas.width = 400; myCanvas.height = 400; const ctx = myCanvas.getContext('2d'); const img = new Image();img.src = 1.jpg;//In drawImage when the image is loaded, otherwise the image may not be loaded yet img.onload=()=>{ ctx.drawImage(img, 0, 0, 100, 50);} grammar:drawImage(image, x, y)
Starting from the specified coordinate point on the canvas, draw the entire image according to the original size of the image.
drawImage(image, x, y, width, height)
Starting from the specified coordinate point on the canvas, draw the entire image with the specified size (width and height), and the image will automatically scale.
drawImage(image, imageX, imageY, imageWidth, imageHeight, x, y, width, height)
Draw the partial image of the specified image (the rectangular part with (imageX, imageY) as the upper left corner, width as imageWidth, and height as imageHeight) into the canvas, with (x, y) as the upper left corner coordinate, width as width, and height as height. in the rectangular area of
The business scenario of this multi-image stitching is to create customized shared images with different contents. The image elements used include background images, external link images, website logos, and customized QR code images. The problems that need to be solved are all in Produced when converting canvas to image output. There are three main points:
1. Cross-domain issues of images;
2. Drawing multiple pictures will cause canvas pollution;
3. The size of the picture;
First of all, there is the cross-domain problem of images. There is a lot of relevant information on this problem on the Internet. The solution is as follows:
img.setAttribute('crossOrigin', 'anonymous');After solving the cross-domain problem, a new error message appeared after the multi-image stitching and export:
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted Canvases may not be exported.
When I discovered this problem, I checked the information on the Internet, and most of them were solved using the above cross-domain method, but it obviously didn't work in my business scenario.
Through troubleshooting the code, I found that this error will not be reported when using background image + QR code image. If the external link image is processed cross-domain, it will not report an error when used alone. The logo images are all local files and obviously should not be a cross-domain issue.
So the reason why the QR code image and background image are error-free should be that the QR code image source is in base64 format.
So, I tried to use canvas to export the logo image to base64 format, and then combined it with the background image + QR code image. Sure enough, no errors were reported when exporting.
All the problems with Tainted Canvases when exporting multiple images together can be avoided by making the image elements into base64 format.
Because there are external link images in my business scenario, and not all external links have processed the domain name of my website to allow cross-domain processing, so when generating the base64 data of the external link image, I use the img.onerror event processing. , replaced by the default diagram.
Because multiple pictures are processed separately before the overall picture is drawn, it may be better to use Promise processing.
Regarding the size of the image export, try to use
myCanvas.toDataURL('image/jpeg', encoderOptions)encoderOptions: You can select the quality of the picture from 0 to 1. If the value range is exceeded, the default value of 0.92 will be used. Other parameters are ignored.
The above is a personal summary of my experience in stitching together multiple images in canvas and exporting them. I hope it will be helpful to everyone’s learning, and I also hope everyone will support VeVb Wulin Network.