关于html2canvas移动端图片保存模糊的优化方案

本文针对html2canvas在移动端截图模糊的问题提供了解决方案。通过更新html2canvas到最新版本并配置window.devicePixelRatio,可以显著提高移动端截图的清晰度。详细步骤包括在GitHub上获取最新版html2canvas并调整JS代码。
摘要由CSDN通过智能技术生成

还是老办法,为了找到解决方案我也是先四处google和百度,结果可想而知,网上90%的方案都是只适用于他自己的那个项目,调用过来没有用,模糊问题依然解决不了。下面我就自己的项目做出如下解决方案

首先分析下自己项目采用了网上的方法后依然模糊的原因是引用的html2canvas版本太旧了(0.4.1的版本),这个版本不支持配置window.devicePixelRatio这个配置,所以我们需要在github上去下载最新版本的html2canvas引用。把引用升级到最新之后,就能支持window.devicePixelRatio这个配置了。然后在调用的js中做如下配置后在移动端保存的图片马上就清晰了。

var scaleBy = window.devicePixelRatio;

html2canvas(dom[0], {
   

scale: scaleBy,

onrendered: function (canvas) {
   

// $("#view777").css("display", "none");
var dataUrl = canvas.toDataURL(
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值