html2canvas动态图片ios空白,html2canvas.js--终极解决方案来了,图片模糊问题,跨域问题,空白问题,锯齿问题,ios兼容问题,截屏不规则空白问题,文字展示图片不展示问题...

本文详细探讨了在使用html2canvas截取网页时遇到的图片模糊、空白和锯齿问题,通过升级html2canvas版本并调整设置,如启用跨域、优化图片质量,提供了iOS动态赋值解决方案。同时介绍了配合页面HTML和CSS的技巧,确保彩票票面区域图片转为Base64的完整步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

二级域名之间的图片跨域,图片模糊问题,空白问题,锯齿问题,解决方案来了

在使用html2canvas.js处理页面截图分享时:

canvas同源策略:采用页面style中引入base64格式的图片文件

ios系统无法动态给img src赋值:

升级新版本html2canvas.js,使用id,opt .then(function(){})方式解决

小秘书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)

}

},

一句话解决:更新到最新源码文件,然后对应处理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值