div界面元素生成图片

首先明确一下需求，界面上截取部分元素，生成图片，用户可以长按保存。主要是在微信里，所以设计到生成二维码的问题。

1、链接生成二维码，这里用qrcode生成，搜索可以搜到相关的js文件

var myUrl = 'http://test.....';
$(".share_qrcode div.code").qrcode({
    render: "canvas", 
    width: 120, //设置宽高
    height: 120,
    text: myUrl //url地址
});

2、选取部分代码生成canvas，将canvas转换为图片

var ele = document.getElementById("tacitGrade"); //选取的元素
   html2canvas($("#tacitGrade")[0]).then(function(canvas) {
　　document.getElementById("canvas").appendChild(canvas);  //生成canvas
　　var imgSrc = $("#canvas canvas")[0].toDataURL("image/png");  //canvas生成图片
　　$("#img").attr('src', imgSrc);
 });

3、测试了一下，可以保存图片，二维码页可以加载出来，

这里存在一个问题是在微信里 在生成的图片并没有保存时直接长按识别二维码，不能识别，但是只是界面元素，即在canvas生成图片的前一步可以正确识别二维码并跳转。

解决方案是生成图片并设置透明度，即扫描时的二维码是当之前的图片，长按保存的图片是生成后的整体图片。

转载于:https://www.cnblogs.com/simba-lkj/p/8978999.html