介绍 <李> import 反应,,{,Component },得到& # 39;反应# 39;
const qrcode =,要求(& # 39;jr-qrcode& # 39;)
const loadImg =, (src),=祝辞,{
,,,const paths =, Array.isArray (src), ?, src :, (src);
,,,const promise =, [];
,,,paths.forEach((路径),=祝辞,{
,,,,,,,promise.push (new 承诺((解决,,拒绝),=祝辞,{
,,,,,,,,,,,let img =, new 图像();
,,,,,,,,,,,img.crossOrigin =,“Anonymous";
,,,,,,,,,,,=,img.src 路径;
,,,,,,,,,,,img.onload =,(),=祝辞,{
,,,,,,,,,,,,,,,解决(img);
,,,,,,,,,,,};
,,,,,,,,,,,img.onerror =, (err),=祝辞,{
,,,,,,,,,,,,,,,console.log(& # 39;图片加载失败& # 39;)
,,,,,,,,,,,}
,,,,,,,}))
,,,});
,,,return Promise.all(承诺);
}
const getImageData =, (url, src),=祝辞,{
,,,const imgsrc =, qrcode.getQrBase64 (url)
,,,let canvas =, document.createElement(& # 39;帆布# 39;)
,,,const width =document.documentElement.clientWidth
,,,const height =document.documentElement.clientHeight
,,,canvas.width =宽* 2
,,,canvas.height * 2=,高度
,,,let ctx =, canvas.getContext (“2 d")
,,,,loadImg ([imgsrc, src)) (((img1, img2]),=祝辞,{
,,,,,,,ctx.drawImage (img2, 0, 0,,宽度* 2,,身高* 2)
,,,,,,,ctx.drawImage (img1,, - 80,宽度,高度* 2 - 220,,200,,160)
,,,,,,,ctx.fillStyle =, & # 39; rgba (0, 0, 0, 0.3) & # 39;;
,,,,,,,ctx.fillRect(- 80,宽度,高度* 2-60,,200年,40);
,,,,,,,ctx.save ()
,,,,,,,ctx.font=?8 px Arial"
,,,,,,,ctx.fillStyle =, & # 39; # fff& # 39;;
,,,,,,,ctx.fillText(& # 39;长按识别二维码& # 39;,,- 80,宽度,高度* 2 - 30,,200,,160)
,,,,,,,let imageURL =, canvas.toDataURL(“图像/png")
,,,,,,,. getelementbyid (& # 39; mix_img& # 39;) .setAttribute (& # 39; src # 39;, imageURL)
,,,})
}
export default class QRcode extends Component {
,,,渲染(),{
,,,,,,,const {url ,, picSrc},=this.props
,,,,,,,getImageData (url, picSrc)
,,,,,,,return (
,,,,,,,,,,,& lt; div>
,,,,,,,,,,,,,,,& lt; img , alt=& # 39; mix_img& # 39;, id=& # 39; mix_img& # 39;/比;
,,,,,,,,,,,& lt;/div>
,,,,,,,)
,,,}
}
这期内容当中小编将会给大家带来有关使用帆布怎么将二维码和图片进行合成,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
<强>实现思路是这样的
使用jr-qrcode将url生成数据:base64供img使用
<李>然后使用帆布将两张图合成一张图片
<强>遇到的问题
生成图片之后发现图片很模糊,解决办法是将帆布画布扩大两倍,其他参数也夸大两倍就可以了
jr-qrcode可以使用npm安装,节省jr-qrcode安装这个包
作用就是可以转化文本到数据:base64供img的src使用
代码如下
上述就是小编为大家分享的使用帆布怎么将二维码和图片进行合成了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。
