Wie Canvas den Code für QR-Code und Bildsynthese implementiert

In diesem Artikel wird hauptsächlich der Code zur Implementierung von QR-Code und Bildsynthese auf Leinwand vorgestellt. Ich hoffe, dass er Freunden in Not helfen kann.

In der vorherigen Version wurde eine Anfrage erhalten, eine URL zum Generieren eines QR-Codes zu verwenden und diese dann mit einem anderen Bild zu kombinieren, um ein Bild zu erstellen.
Die Implementierungsidee ist wie folgt

1. Verwenden Sie jr-qrcode, um URL-Daten zu generieren:base64 für img zu verwenden

2. Verwenden Sie dann Canvas um die beiden zu kombinieren Zwei Bilder zu einem Bild kombinieren

Aufgetretene Probleme
Nachdem ich das Bild erstellt habe, stellte ich fest, dass das Bild sehr verschwommen ist. Die Lösung ist um die Canvas-Leinwand zu verdoppeln. Andere Übertreiben Sie einfach die Parameter um das Doppelte

jr-qrcode Sie können npm install --save jr-qrcode verwenden, um dieses Paket zu installieren
Die Funktion besteht darin Text in Daten konvertieren:base64 für img Der Quellcode mit

lautet wie folgt:

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=&#39;mix_img&#39; id=&#39;mix_img&#39;/>
            </p>
        )
    }

}

Verwandte Empfehlungen:

HTML5 Canvas zur Implementierung einer interaktiven U-Bahn-Linienkarte

H5-Entwicklung: Details zum Spiel zur Zerstörung von Sternen

Das obige ist der detaillierte Inhalt vonWie Canvas den Code für QR-Code und Bildsynthese implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!