首先明确一下需求，界面上截取部分元素，生成图片，用户可以长按保存。主要是在微信里，所以设计到生成二维码的问题。
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生成图片的前一步可以正确识别二维码并跳转。
解决方案是生成图片并设置透明度，即扫描时的二维码是当之前的图片，长按保存的图片是生成后的整体图片。
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/13857.html