---恢复内容开始---
需求:
有一个固定的背景图,还有一个是随机生成的二维码,合并成一张图,让用户下载。
实现一:纯手写,这里为了省事生成图片我直接给的base64,其实使用qrcode.js生成的也是base64图片;
body:
<div align="center" id="imgArr" style="display: none;">
<!--<img src="./img/msg.jpg" width="300">-->
<img src="https://img-blog.csdnimg.cn/2022010710354646756.jpeg" width="300">
<img src="./img/qrcode.jpg" width="300">
</div>
<div id="imgBox" align="center">
<input type="button" value="一键合成" οnclick="hecheng()">
</div>
js:
function hecheng(){
draw(function(){
document.getElementById('imgBox').innerHTML='<img src="'+base64[0]+'">';
})
}
var data=[],base64=[],imgArr=$('#imgArr').find('img');
for(var i=0;i<imgArr.length;i++){
data.push(imgArr[i].src);
}
function draw(fn){
var c=document.createElement('canvas'),
ctx=c.getContext('2d'),
len=data.length;
c.width=300;
c.height=750;
ctx.rect(0,0,c.width,c.height);
ctx.fillStyle='#fff';
ctx.fill();
function drawing(n){
if(n<len){
var img=new Image;
//img.crossOrigin = 'Anonymous'; //解决跨域
img.src=data[n];
img.οnlοad=function(){
if(n==1){
ctx.drawImage(img,50,500,160,160);
}
else{
//ctx.drawImage(img,0,0,250,250);
ctx.drawImage(img,0,0,c.width,c.height);
}
drawing(n+1);//递归
}
}else{
//保存生成作品图片
base64.push(c.toDataURL("image/jpeg",2.8));
//alert(JSON.stringify(base64));
fn();
}
}
drawing(0);
}
测试结果:在手机里谷歌浏览器和苹果浏览器都可以,uc不行。
实现二:基于jquery.qrcode.js和html2canva.js,一个是用来生成二维码,一个是将网页元素变成图片。
源码:链接: https://pan.baidu.com/s/1c1SUiuW 密码: 5iei
---恢复内容结束---