캔버스가 QR 코드 및 이미지 합성을 위한 코드를 구현하는 방법

이 글은 주로 캔버스에서 QR코드와 이미지 합성을 구현하는 방법에 대한 코드를 소개합니다. 해당 내용은 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

이전 버전에서는 URL을 사용하여 QR 코드를 생성한 다음 다른 사진과 결합하여 사진을 만들어 달라는 요청을 받았습니다.
구현 아이디어는 다음과 같습니다

1. jr-qrcode를 사용하여 URL 데이터를 생성합니다:img에서 사용할 base64

2. 그런 다음 캔버스를 사용하여 두 그림을 하나의 그림으로 결합합니다

발생하는 문제
세대 사진을 찍은 후 사진이 매우 흐릿하다는 것을 알았습니다. 해결책은 캔버스를 두 번 확장하고 다른 매개변수를 두 번 과장하는 것입니다.

jr-qrcode 이것을 설치하려면 npm install --save jr-qrcode를 사용할 수 있습니다. 패키지
작동합니다 img의 src에서 사용하기 위해 텍스트를 데이터로 변환:base64

코드는 다음과 같습니다

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

}

관련 권장사항:

HTML5 대화형 지하철 노선도를 구현하는 캔버스

H5 개발: 구현 별파괴게임 자세히

위 내용은 캔버스가 QR 코드 및 이미지 합성을 위한 코드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!