Exemple de code pour canevas pour implémenter le code QR et la synthèse d'images

Cet article présente principalement des informations pertinentes sur l'exemple de code pour réaliser un code QR et une synthèse d'image sur toile. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

L'idée de mise en œuvre est la suivante

1. Utilisez jr-qrcode pour générer des données URL : base64 pour une utilisation img

2. Ensuite, utilisez Canvas pour combiner les deux images en une seule image

Problèmes rencontrés

Après avoir généré l'image, j'ai trouvé que l'image est très floue, la solution est de doubler la taille du canevas et de doubler les autres paramètres

jr-qrcode Vous pouvez utiliser npm install --save jr-qrcode pour installer ce package

Le la fonction est Le texte peut être converti en data:base64 pour être utilisé par le src d'img

Le code est le suivant :

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

}

Résumé : ce qui précède est tout le contenu de cet article, j'espère cela sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo HTML5 !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique HTML5

Manuel HTML5 en ligne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!