二级域名之间的图片跨域,图片模糊问题,空白问题,锯齿问题,解决方案来了
在使用html2canvas.js处理页面截图分享时:
- canvas同源策略:
采用页面style中引入base64格式的图片文件
- ios系统无法动态给img src赋值:
升级新版本html2canvas.js,使用id,opt .then(function(){})方式解决
官网地址http://html2canvas.hertzen.com/?utm_source=caibaojian.com
新版本地址http://html2canvas.hertzen.com/dist/html2canvas.js
小秘书public.tool.js
//将彩票票面指定区域内的dom转为base64格式图片---cpCanvas--需要页面html,css配合
goDrawCp:function(){
window.scrollTo(0,0);
var _this = this;
var cpCanvasContent = document.getElementById("cpCanvas");
var opts = {
useCORS:true,//允许跨域
backgroundColor:"rgba(0,0,0,.0)",//或者null,都代表透明
scale: window.devicePixelRatio,//提高清晰度
};
html2canvas(cpCanvasContent,opts).then(function(canvas) {
document.body.appendChild(canvas);
$("canvas").remove();
convertCanvasToImage(canvas);
})
function convertCanvasToImage(canvas) {
var base64Data = canvas.toDataURL("image/png");
//直接在此拿到票面,base64图片数据后,在此进行展示
$(".share_mask").show();
$(".cp_img").attr("src",base64Data);
setTimeout(function(){
_this.goDrawShare();
},300)
}
},
一句话解决:更新到最新源码文件,然后对应处理