In the project, I met the effect of combining a poster and a TWO-DIMENSIONAL code

ToDataURL () method: toDataURL() is a method of canvas that converts canvas to Base64-bit encoding; ToDataURL () : toDataURL(type, encoderOptions)

Type Specifies the base64 encoded image format, such as image/ PNG, image/ JPEG, image/webp, etc. The default image/ PNG format is image/ PNG.

EncoderOptions is used to set the image quality after converting to Base64 encoding. The value ranges from 0 to 1. If the value exceeds the range, the default value is 0.92.

What are the benefits of converting images to Base64-bit encoding? After the image is converted to base64-bit encoding, the image will be requested to be loaded together with the code (HTML, CSS, JS), and will not be requested to be loaded separately.

It can prevent the failure of picture loading due to the wrong picture path.

Position the image on the canvas: context.drawImage(img,x,y);

Position the image on the canvas and specify the image width and height: context.drawImage(img,x,y,width,height);

Shear image, and positioning on the canvas by shear parts: context. The drawImage (img, sx, sy, swidth, sheight, x, y, width, height)

Img: Specifies the image, canvas, or video to use.

Sx: Optional. The x position at which the shear began

Sy: Optional. The y position where the shear started

Swidth: Optional. The width of the clipped image

Sheight: Optional. The height of the clipped image

X: The x coordinate position of the image on the canvas.

Y: The y coordinate position of the image on the canvas

Width: Optional. The width of the image to use. (Stretch or zoom out image)

Height: Optional. The height of the image to use. (Stretch or zoom out image)

This one is written by me to test. When I click, I combine two pictures into one

<div> <img id="img1" :src="bgPic" alt srcset /> <img id="img2" :src="materialUrl" alt srcset /> <div> <img </button> </div> <button id=" BTN "@click=" drawpicture" type="primary"> </div> </template> <script> import bgPic from '.. /assets/logo(1).png' import matePic from '.. /assets/monster-sm(1).png' // import html2canvas from 'html2canvas' export default { name: 'AddActivity', components: { }, data () { return { bgPic: bgPic, materialUrl: matePic, makePic: '' } }, created () { }, mounted () { document.getElementById('img1').style.display = 'none' document.getElementById('img2').style.display = 'none' document.getElementById('btn').style.display = 'none' this.drawProdPicture() }, methods: { drawProdPicture () { let img1 = new Image() img1.src = this.bgPic img1.width = 350 img1.height = 350 // img1.setAttribute('crossOrigin', 'anonymous') let canvas = document.createElement("canvas") let context = canvas.getContext("2d") canvas.width = 350 Canvas. Height = 350 let img2 = new Image() let flag = true // Add img1 to canvas img1.onload = () => {context.drawImage(img1, 0, 0, 350, 350) img2.src = this.materialUrl // img2.setAttribute('crossOrigin', 'anonymous') img2.width = 350 img2.height = 350 if (flag) { flag = false } else { let src = canvas.toDataURL() Img2. onload = () => {context.drawImage(img2, 10, 10, 150); 150) if (flag) { flag = false } else { let src = canvas.toDataURL('image/png') this.makePic = src } } } } } </script>Copy the code