上個版本街道一個需求,使用url生成一個二維碼,然後和另外一張圖片合成一張圖拍你,
實現思路是這樣的
- 使用jr-qrcode將url生成data:base64供img使用
- 然後使用canvas 將兩張圖合成一張圖片
遇到的問題
生成圖片之後發現圖片很模糊,解決辦法是將canvas畫布擴大兩倍,其他引數也誇大兩倍就可以了
jr-qrcode 可以使用npm install –save jr-qrcode 安裝這個包
作用就是可以轉化text到data:base64 供img的src 使用
程式碼如下
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 (
<div>
<img alt=`mix_img` id=`mix_img`/>
</div>
)
}
}