H5使用canvas生成二维码，合成图文海报！终极原创！

网上找了很多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)
    }
} 

 

就是这么简单！有什么问题+微信wzy10086 ， 还是得自己动手 MMP。。