利用canvas把二维码和图片合成海报且长按保存

思路：在微信中登录，后台传来的是一个链接、一个名字、一张图片。把图片当做背景，画满整个画布。之后需要把链接转为二维码，使用jq.qrcode转化，转化完成后是一个canvas，把这个canvas再转成一张图片，画到大的画布上。把名字画到画布上。把整张画布转为图片。

一、定义画布和合成海报的img

   <style type="text/css">
      #canbox {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
      }
     .canimg {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
       left: 0;
    }
   </style>

    <div id="qrcode">
    </div>
    <div id="canbox">
      <canvas id="myCanvas" width="" height=""></canvas>
    </div>
    <img class="canimg" src=""/>

二、用js.qrcode把网址变成二维码

后台传过来的是网址，需要转为二维码，二维码也是canvas，需要把二维码转为图片

    document.getElementById("qrcode").qrcode({
    width: 72, //宽度  
    height: 72, //高度  
    text: res.data.poster_qrcode, //任意内容  
    });

三、把图片画到画布上，需要占满全屏

//画海报
var width = document.getElementById("canbox").offsetWidth
var height = document.getElementById("canbox").offsetHeight; // 高度
var c = document.getElementById("myCanvas");
c.width = width
c.height = height
var ctx = c.getContext("2d");

//首先画上背景图
var img = new Image();
img.src = this.list.poster;
img.setAttribute("crossOrigin", 'Anonymous')
var x_bot = height - 44  //画上名字
ctx.font = "19px Georgia";

//画上二维码
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}
var mycans = document.getElementsByTagName('canvas')[0];//二维码所在的canva
var codeimg = convertCanvasToImage(mycans)
var xw = width - 72 - 29
var xh = height - 6 - 72

img.onload = function() { //必须等待图片加载完成
    ctx.drawImage(img, 0, 0, width, height); //绘制图像进行拉伸
    ctx.fillText(that.name, 28, x_bot);
    ctx.drawImage(codeimg, xw, xh, 72, 72);
    //绘制完成,转为图片
    setTimeout(function() {  //在ios上无法在画完之后取到整个画布内容，加了个settimeout
        var bigcan = document.getElementsByTagName('canvas')[0];
        let images = new Image();
        images.src = bigcan.toDataURL("image/png");
        alert(bigcan.toDataURL("image/png"))
        images.setAttribute("crossOrigin", 'Anonymous')
        document.getElementById('canimg').src = images.src  //最终转换为图片,并赋值到id为canimg的img上
        console.log(document.getElementById('canimg'))
    }, 0)
}

转载于https://blog.csdn.net/yuyuking/article/details/79872070?biz_id=102&utm_term=document.getElementById%20%20#cani&utm_medium=distribute.pc_search_result.none-task-blog-2