html2canvas 生成海报，屏幕截图(图片跨域)

html2canvas.js官网地址：http://html2canvas.hertzen.com/
主要js:

ios 13 对v1.0.0-rc.7 版本不支持，会空白，建议用户v1.0.0-rc.4
https://github.com/niklasvh/html2canvas/releases/tag/v1.0.0-rc.4

$(".click-begin").click(function() {
				$("#loading").show();//过渡弹层显示
				html2canvas(document.querySelector(".card"), {
					height: $(".card").height(),//需要生成海报div的高
					width: $(".card").width(),//需要生成海报div的宽
					//设置宽高可避免生成图片底部有白线
					scale: 6,//清晰度设置
				}).then(canvas => {
					document.body.appendChild(canvas)
					let oImg = new Image();
					oImg.src = canvas.toDataURL("image/png"); // 导出图片
					document.getElementById("myImage").appendChild(oImg); //div中插入图片
				});
				setTimeout(() => {
					$("#loading").hide();//过渡弹层隐藏
					$("#poster").show();//弹层显示
				}, 800)

})
//关闭后统一清除
			$(".off").click(function() {
				$("canvas").remove();
				$("#myImage  img").remove();
				$("#poster").hide();
			})

图片跨域问题将图片转为base64

 imageUrlToBase64(img,elId) { //头像转Base64解决跨域问题
       var image = new Image();
       image.setAttribute('crossOrigin', 'anonymous');
       var imageUrl = img;
       image.src = imageUrl;
       image.onload = function(){
           this.getImage(image,elId);
       }
                },
getImage(image,elId) {
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, image.width, image.height);
    var quality = 0.8;
    var dataURL = canvas.toDataURL('image/jpeg', quality);
    /* 添加图片 */
    $(elId).attr("src",dataURL)
},

引用方法 ：this.imageUrlToBase64(‘图片地址’,‘图片类名’)；