Beispielcode für Canvas zur Implementierung von QR-Code und Bildsynthese

Dieser Artikel enthält hauptsächlich relevante Informationen zum Realisieren von QR-Code und Bildsynthese auf Leinwand. Ich hoffe, dass er für Sie hilfreich ist.

Die Implementierungsidee ist wie folgt

1. Verwenden Sie jr-qrcode, um URL-Daten zu generieren: base64 für die IMG-Nutzung

2. Dann verwenden Sie Canvas, um die beiden Bilder zu einem Bild zu kombinieren

Es sind Probleme aufgetreten

Nachdem ich das Bild erstellt habe, habe ich das festgestellt Das Bild ist sehr verschwommen. Die Lösung besteht darin, die Leinwandgröße und die anderen Parameter zu verdoppeln

jr-qrcode Sie können npm install --save jr-qrcode verwenden, um dieses Paket zu installieren

The Funktion ist Text kann in data:base64 konvertiert werden, um von imgs src verwendet zu werden

Der Code 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>
        )
    }

}

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass dies der Fall ist zum Lernen aller beitragen. Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial!

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

HTML5-Grafik-Tutorial

HTML5 Online-Handbuch

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