Maison > interface Web > Tutoriel H5 > le corps du texte

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

青灯夜游
Libérer: 2018-10-09 16:26:57
avant
2808 Les gens l'ont consulté

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

}
Copier après la connexion

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!

Étiquettes associées:
source:jb51.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!