H5使⽤canvas⽣成⼆维码，合成图⽂海报！终极原创！⽹上了很多canvas⽣成⼆维码合并图⽂的代码，全都是半吊⼦！！也⽤不了！！！ 没办法只能亲⾃看⽂档来整理！废话不多说，上代码了
1.qrcode.js⽣成⼆维码
H5页⾯请加上这段html创建⼆维码
<!--⼆维码画布-->
<div id="qrcodeCanvas" >123</div>
<!--海报图画布-->
<canvas id="myCanvas" ></canvas>
<!--展⽰海报-->
<div class="showPoster">
<img id="showImg" />
<!-- <div >长按图⽚保存到⼿机相册</div> -->
</div>
//引⼊qrcode.js必须，jquery.js必须引⼊我这⾥就不弄了
<script type="text/javascript" src="//static.runoob/assets/qrcode/qrcode.min.js"></script>
<script type="text/javascript">
var qrcodeImg； //⼆维码img
function shareImg(){
$.showLoading('图⽚⽣成中...');
dnf怎么镶嵌徽章//移除已⽣成的避免重复(必须！)
$('#qrcodeCanvas').html("");
雷霆嘎巴什么意思var qrcode = new QRCode('qrcodeCanvas', {
text: 'purifier.wiyoo/wechat/index/index.html',
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
qrcodeImg = $("#qrcodeCanvas img")[0]
紫砂壶鉴别真假方法
//这⾥必须⽤onload ⼆维码是异步⽣成，异步的意思不⽤多说吧？
//画海报
beginDraw()
}
}
2.与图⽚⼀起画⼊新的画布，⽣成海报，调整位置
注意：H5中任何图⽚写⼊画布都是以img 例如（<img src="123.png">） 下⽅图⽚链接请⾃⾏⽤⽹络链接测试
//画海报
function beginDraw(){
//画海报
var width = 750
var height = 1200
var c = ElementById("myCanvas");
中国农业银行卡余额查询c.width = width
c.height = height
var ctx = c.getContext("2d");
//⾸先画上背景图
//注意：H5中任何图⽚写⼊画布都是以img 例如（<img src="123.png">），以下代码console.log() 出来就是它 var img = new Image();
img.src = '/uploads/goods_thumb/20191226/3518baa8f944d1508fa1ce867c0b89a9.jpg';
今年中考时间2022具体时间// 加载完成执⾏
//写⼊⽂本必须重新定义颜⾊，否则会被覆盖
//填充颜⾊农产品质量安全
ctx.fillStyle ="#fff";
ctx.fillRect(0,0,width,height);
//写⼊⽂字
ctx.fillStyle ="#000";
ctx.font ="30px 微软雅⿊";
ctx.fillText("长按识别⼆维码",300,height-60);
//画⼊背景图
ctx.drawImage(img,0,0,width,width);
//画⼊⼆维码
ctx.drawImage(qrcodeImg,100,height-120,100,100);
//绘制完成，转为图⽚
setTimeout(function() {
base64_path = c.toDataURL("image/jpeg",1);
$('#showImg').attr('src',base64_path)
$.hideLoading();
$('.mask').show()
$('.showPoster').show()
},100)
}
}
就是这么简单！有什么问题+wzy10086 ，还是得⾃⼰动⼿ MMP。。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论