HTML5
发布时间:2022-04-26 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了canvas实现二维码和图片合成的示例代码,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
上个版本街道
一个需求,使用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 = (sr
C) =>
{
const paths = Array.isArray(sr
C) ? src : [src];
const promise = [];
path
s.forEach((path) =>
{
promise.push(new Promise((resolve,re
ject) =>
{
let img = new Image(
);
img.crossOrigin = "Anon
ymous";
img.src = path;
img
.onload = () =>
{
resolve(img
);
};
img
.onerror = (err) =>
{
console.log('
图片加载失败')
}
}))
}
);
return Promise.all(promis
E);
}
const getImageData = (url,sr
C) =>
{
const imgsrc = qrcode.getQrBase64(url)
let canvas = document.createElement('canvas')
const width = document.documentElement.clientWidth
const height = document.documentElement.clientHeight
canva
s.width = width*2
canva
s.height = height*2
let ctx = canva
s.getCo
ntext("2d")
loadImg([imgsrc,src]).then(([img1,img2]) =>
{
ctx.drawImage(img2,width*2,height*2)
ctx.drawImage(img1,width-80,height*2-220,200,160)
ctx.fillStyle = 'rgba(0,0.3)';
ctx.fillRect(width-80,height*2-60,40
);
ctx.save()
ctx.font="28px Arial"
ctx.fillStyle = '#fff';
ctx.fillText('长按识别
二维码',height*2-30,160)
let imageURL = canva
s.toDataURL("image/png")
document.getElementById('mix_img').setAttribute('src',imageURL)
})
}
export default class QRcode extends Component
{
render()
{
const
{ url,picSrc} = thi
s.props
getImageData(url,picSr
C)
return (
)
}
}
大佬总结
以上是大佬教程为你收集整理的canvas实现二维码和图片合成的示例代码全部内容,希望文章能够帮你解决canvas实现二维码和图片合成的示例代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。