Пример кода холста для реализации QR-кода и синтеза изображений

В предыдущей версии на улице был спрос. Используйте URL-адрес, чтобы сгенерировать QR-код, а затем объедините его с другим изображением, чтобы создать изображение для себя.

1. Используйте jr-qrcode для генерации данных URL: base64 для использования img.
2. Затем используйте холст, чтобы объединить две картинки в одну.

После создания изображения я обнаружил, что изображение очень размытое. Решение состоит в том, чтобы дважды расширить холст и увеличить другие параметры в два раза.

jr-qrcode Вы можете использовать npm install --save jr-qrcode для установки этого пакета.

Функция предназначена для преобразования текста в data:base64 для использования в src img.

Код выглядит следующим образом

 import React, {Component} from 'react'const qrcode = require('jr-qrcode')const loadImg = (src) => { const paths = Array.isArray(src) ? ]; paths.forEach((путь) => { обещание.push(новое обещание((разрешить, отклонить) => { let img = новый Image(); img.crossOrigin = Anonymous; img.src = path; img.onload = () => {solve (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 = ширина*2 Canvas.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(ширина-80, высота*2-60, 200, 40); ctx.save() ctx.font=28px Arial ctx.fillStyle = '#fff'; ctx.fillText('Длительное нажатие для идентификации QR-кода', ширина-80, высота*2-30, 200, 160) пусть imageURL = Canvas.toDataURL(изображение/png) document.getElementById('mix_img').setAttribute('src',imageURL) })}export class по умолчанию QRcode расширяет компонент { render() { const { url, picSrc} = this.props getImageData(url,picSrc) return ( < div> <img </div> ) }}

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.