H5使用canvas生成二维码,合成图文海报!终极原创!
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小时内删除。