二维码和图片合成我们在工作中会经常的用到，那么如何用canvas实现二维码和图片合成呢本片文章扣丁学堂html5培训小编给读者们分享一下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 = (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 (
)
}
}
想要了解更多关于html5方面内容的小伙伴，请关注扣丁学堂html5培训官网、微信等平台，扣丁学堂it职业在线学习教育平台为您提供权威的html5开发视频，html5培训后的前景无限，行业薪资和未来的发展会越来越好的，扣丁学堂老师精心推出的html5视频教程定能让你快速掌握html5从入门到精通开发实战技能。
h5基础课程：/course/320523flowtoken=1008606【扫码进入html5前端开发vip免费公开课】
注：点击(了解更多)进入课程直播间

---