Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use canvas in html5 to piece together multiple pictures" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, I hope that this "how to use canvas in html5 to piece together multiple pictures" article can help you solve the problem.

First, let's talk about the basic methods of canvas drawing, as follows:

Const myCanvas = document.createElement ('canvas'); myCanvas.width = 400; myCanvas.height = 400 img.src Const ctx = myCanvas.getContext (' 2d'); const img = new Image (); img.src = "1.jpg"; / / drawImage when the picture is loaded, otherwise the picture may not have been loaded yet img.onload= () = > {ctx.drawImage (img, 0,0,100,50);}

Syntax:

DrawImage (image, x, y)

Draws the entire image according to its original size, starting with the coordinate points specified on the canvas.

DrawImage (image, x, y, width, height)

Starts with the coordinate points specified on the canvas, draws the entire image at the specified size (width and height), and the image is automatically scaled.

DrawImage (image, imageX, imageY, imageWidth, imageHeight, x, y, width, height)

Draw the local 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 rectangular area in canvas with (x, y) as the upper-left corner coordinate, width as width and height as height

This multi-image stitching business scenario is to customize and share pictures with different contents. The picture elements used are background images, external chain images, website logo, customized QR code images. The problems that need to be solved are all produced when the canvas is converted to image output. There are three main points:

1. Cross-domain problem of pictures

2. Drawing multiple pictures, resulting in canvas pollution

3. The size of the picture

First of all, the cross-domain problem of pictures, this problem has a lot of relevant information on the Internet, the solution is as follows:

Img.setAttribute ('crossOrigin',' anonymous')

When the cross-domain problem is solved, a new error message appears after the multi-graph assembly is exported:

Uncaught DOMException: Failed to execute 'toDataURL' on' HTMLCanvasElement': Tainted Canvases may not be exported.

When I found this problem, I looked at the information on the Internet, and most of it was solved by the above cross-domain method, but I obviously didn't work in my business scenario.

Through the inspection of the code, I found that when the background map + QR code map, this error will not be reported, such as the outer chain picture has done cross-domain processing, and it will not report an error when used alone. While logo images are local files, obviously it should not be a cross-domain issue.

Then the reason why the QR code map and background image can not go wrong should be that the QR code picture source is in base64 format.

So I tried to export the logo image to the base64 format using canvas, and then flattened it with the background image + QR code image, and sure enough, there was no error in the export.

To solve the problem of multi-image assembly and export, the problem of Tainted Canvases should be to make the picture elements into base64 format, which can be avoided.

Because there are external link images in my business scenario, and not all external links allow the domain name of my website to be processed across domains, when generating the base64 data of external link images, we can use the handling of img.onerror events and replace them with the default diagram.

Because there is separate processing of multiple graphs before the general picture is drawn, it may be better to use Promise processing.

When it comes to the size of the picture export, try to use it.

MyCanvas.toDataURL ('image/jpeg', encoderOptions)

EncoderOptions: you can choose the quality of the picture from 0 to 1. If the value range is out of range, the default value of 0.92 is used. Other parameters are ignored.

This is the end of the introduction to "how to use canvas in html5 to piece together multiple pictures". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.