How canvas implements the code for QR code and image synthesis

This article mainly introduces the code on how to implement QR code and image synthesis in canvas. The content has certain reference value. I hope it can help friends in need.

The previous version received a request, used the URL to generate a QR code, and then combined it with another picture to create a picture.
The implementation idea is like this

1. Use jr-qrcode to generate url data:base64 for img to use

2. Then use canvas to combine the two Combining pictures into one picture

Problems encountered
After generating the picture, I found that the picture is very blurry. The solution is to double the canvas canvas. Just increase the parameters by two times.

jr-qrcode You can use npm install --save jr-qrcode to install this package.
The function is to convert text to data:base64 for img The src code using

is as follows

import React, { Component } from 'react'
const qrcode = require('jr-qrcode')
const loadImg = (src) => {
    const paths = Array.isArray(src) ? src : [src];
    const promise = [];
    paths.forEach((path) => {
        promise.push(new Promise((resolve, reject) => {
            let img = new Image();
            img.crossOrigin = "Anonymous";
            img.src = path;
            img.onload = () => {
                resolve(img);
            };
            img.onerror = (err) => {
                console.log('图片加载失败')
            }
        }))
    });
    return Promise.all(promise);

}
const getImageData = (url, src) => {
    const imgsrc = qrcode.getQrBase64(url)
    let canvas = document.createElement('canvas')
    const width = document.documentElement.clientWidth
    const height = document.documentElement.clientHeight
    canvas.width = width*2
    canvas.height = height*2
    let ctx = canvas.getContext("2d")
     loadImg([imgsrc, src]).then(([img1, img2]) => {
        ctx.drawImage(img2, 0, 0, width*2, height*2)
        ctx.drawImage(img1, width-80, height*2-220, 200, 160)
        ctx.fillStyle = 'rgba(0,0,0,0.3)';
        ctx.fillRect(width-80, height*2-60, 200, 40);
        ctx.save()
        ctx.font="28px Arial"
        ctx.fillStyle = '#fff';
        ctx.fillText('长按识别二维码', width-80, height*2-30, 200, 160)
        let imageURL = canvas.toDataURL("image/png")
        document.getElementById('mix_img').setAttribute('src',imageURL)
    })
}
export default class QRcode extends Component {
    render() {
        const { url , picSrc} = this.props
        getImageData(url,picSrc)
        return (
            <p>
                <img  alt="How canvas implements the code for QR code and image synthesis" >
            </p>
        )
    }

}

Related recommendations:

HTML5 Canvas to implement interactive subway line map

H5 development: details of the game of destroying stars

The above is the detailed content of How canvas implements the code for QR code and image synthesis. For more information, please follow other related articles on the PHP Chinese website!