二級域名之間的圖片跨域,圖片模糊問題昧甘,空白問題良拼,鋸齒問題,解決方案來了
在使用html2canvas.js處理頁面截圖分享時:
- canvas同源策略:
采用頁面style中引入base64格式的圖片文件
- ios系統(tǒng)無法動態(tài)給img src賦值:
升級新版本html2canvas.js充边,使用id,opt .then(function(){})方式解決
官網(wǎng)地址http://html2canvas.hertzen.com/?utm_source=caibaojian.com
新版本地址http://html2canvas.hertzen.com/dist/html2canvas.js
小秘書public.tool.js
//將彩票票面指定區(qū)域內(nèi)的dom轉(zhuǎn)為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圖片數(shù)據(jù)后痛黎,在此進行展示
$(".share_mask").show();
$(".cp_img").attr("src",base64Data);
setTimeout(function(){
_this.goDrawShare();
},300)
}
},
一句話解決:更新到最新源碼文件予弧,然后對應(yīng)處理