Comment Canvas implémente le code pour le code QR et la synthèse d'images

Cet article présente principalement le code sur la façon d'implémenter le code QR et la synthèse d'images sur toile. Le contenu a une certaine valeur de référence. J'espère qu'il pourra aider les amis dans le besoin.

La version précédente recevait une demande d'utilisation d'une URL pour générer un code QR, puis de la combiner avec une autre image pour créer une image.
L'idée de mise en œuvre est la suivante

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

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

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. pour doubler la toile. Autres Exagérez simplement les paramètres deux fois

jr-qrcode Vous pouvez utiliser npm install --save jr-qrcode pour installer ce package
La fonction est de convertir du texte en données : base64 pour img Le code src utilisant

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

}

Recommandations associées :

HTML5 Canvas pour implémenter un plan interactif des lignes de métro

Développement H5 : détails du jeu de destruction d'étoiles

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!