网上找了很多canvas生成二维码合并图文的代码,全都是半吊子!!也用不了!!操蛋! 没办法只能亲自看文档来整理!废话不多说,上代码了
1.qrcode.js生成二维码
H5页面请加上这段html创建二维码
<!--二维码画布-->
<div id="qrcodeCanvas" style="position: absolute;left:-2000px">123</div>
<!--海报图画布-->
<canvas id="myCanvas" style="position: absolute;right:-2000px"></canvas>
<!--展示海报-->
<div class="showPoster">
<img id="showImg" />
<!-- <div style="width:100%;height:100px">长按图片保存到手机相册</div> -->
</div>
//引入qrcode.js必须,jquery.js必须引入我这里就不弄了
<script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<script type="text/javascript">
var qrcodeImg; //二维码img
function shareImg(){
$.showLoading('图片生成中...');
//移除已生成的避免重复(必须!)
$('#qrcodeCanvas').html("");
var qrcode = new QRCode('qrcodeCanvas', {
text: 'http://purifier.wiyoo.cn/wechat/index/index.html',
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
qrcodeImg = $("#qrcodeCanvas img")[0]
qrcodeImg.crossOrigin = "anonymous"
//这里必须用onload 二维码是异步生成,异步的意思不用多说吧?
qrcodeImg.onload = function() {
//画海报
beginDraw()
}
}
2.与图片一起画入新的画布,生成海报,调整位置
注意:H5中任何图片写入画布都是以img 例如(<img src="123.png">) 下方图片链接请自行用网络链接测试
//画海报
function beginDraw(){
//画海报
var width = 750
var height = 1200
var c = document.getElementById("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';
img.crossOrigin = "anonymous"
// 加载完成执行
//写入文本必须重新定义颜色,否则会被覆盖
//填充颜色
ctx.fillStyle ="#fff";
ctx.fillRect(0,0,width,height);
//写入文字
ctx.fillStyle ="#000";
ctx.font ="30px 微软雅黑";
ctx.fillText("长按识别二维码",300,height-60);
img.onload = function() {
//画入背景图
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)
}
}