uni-app使用canvasToTempFilePath生成的图片很模糊

最新推荐文章于 2023-09-21 21:41:10 发布
原创 最新推荐文章于 2023-09-21 21:41:10 发布 · 4.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css #html

博客探讨了如何通过调整Canvas元素的样式属性，实现背景图片的真实宽高比例，从而避免图片在Canvas上缩放时出现模糊。博主分享了一个技巧，即先获取图片的真实宽高，然后将Canvas的width和height设置为这些值的一半，最后在绘制图片时乘以2，有效解决了图像失真的问题。

 

我是这样在canvas上面的style里面设置宽高是真实地你背景图片的宽高。图片的宽高可以右键属性查看

他画布宽度width高度height是他的真实宽高除以2.然后输出图片宽度destWidth高destHeight后面*2.。试的可以解决虚的问题

uni-app 小程序实现多图选择压缩保存相册功能
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
09-11 146
选择多张图片：支持从相册或相机选择，最多 9 张。批量压缩图片：通过 Canvas 绘制方式压缩，控制尺寸与质量。保存到相册：压缩后的图片批量保存，带有进度提示。用 uni.chooseImage 选图用 Canvas 做压缩用 uni.saveImageToPhotosAlbum 保存相比直接保存原图，这样能大幅降低图片体积，提升用户体验，同时兼容批量处理和进度展示，特别适合做小程序相册类、素材类功能。
鸿蒙OS&UniApp 实现的二维码扫描与生成组件#三方框架 #Uniapp
小淼淼的博客
05-14 1296
通过UniApp实现二维码扫描与生成功能相对简单，但在跨平台兼容性和用户体验优化方面还需要一些额外工作。充分利用条件编译，处理各平台差异考虑权限管理和错误处理注重交互体验和视觉效果对复杂场景进行适当的定制开发正确实现二维码功能可以显著提升应用的实用性和用户体验，也是现代移动应用不可或缺的一部分。希望本文对你在UniApp中实现二维码功能有所帮助。如有疑问或补充，欢迎在评论区讨论交流！
canvas对图片处理模糊问题
青阳的博客
08-21 1122
遇到问题，用canvas绘制图片就会模糊，对图片已经做了设备模糊处理devicePixelRatio var devicePixelRatio = window.devicePixelRatio || 1, backingStoreRatio = canvasZanCtx.webkitBackingStorePixelRatio || canvasZanCtx.mozBackingStorePixelRatio || can
wx.canvasToTempFilePath导出的图片不清晰
weixin_51293134的博客
09-21 1821
解决办法：本质上就是生成一个更大的图片，因为手机的屏幕设备的像素比现在一般都是超过2的。实际上我们只需要在使用wx.canvasToTempFilePath的时候，设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。使用wx.canvasToTempFilePath接口，导出的canvas图片在手机上看不清晰。使用wx.getSystemInfo()获取设备像素比pixelRatio。
在ios上wx.canvasToTempFilePath生成图片不清晰
qq_43060570的博客
06-25 758
在ios上wx.canvasToTempFilePath生成图片不清晰
uni-app微信小程序canvas中使用canvasToTempFilePath在手机上导出图片尺寸与实际不符
zhangjing1019的博客
09-19 2130
比如图片的尺寸是1125*2001像素，这样用微信开发者工具下载下来的图片尺寸是1125*2001像素，用不同的手机去操作，下载出来的图片尺寸都不一样，和原图片尺寸差距很大。
小程序canvasToTempFilePath导出图片模糊？
ZZ556464的博客
04-06 1043
【代码】小程序canvasToTempFilePath导出图片模糊？
【微信小程序采坑】用微信Canvas导出的图片到手机上会出现图片模糊问题
AC_greener的博客
04-25 8841
特别是分辨率高的手机，图片就越模糊。个问题其实和像素比有关，官方解释：destWidth和destHeight单位是物理像素（pixel），canvas绘制的时候用的是逻辑像素（物理像素=逻辑像素 * density），所以这里如果只是使用canvas中的width和height（逻辑像素）作为输出图片的长宽的话，生成的图片width和height实际上是缩放了到canvas的 1 / densit
uni-app vue 在手机APP中将页面转为图片、保存为PDF文件、打开文件 ios
03-11
或者使用uni.canvasToTempFilePath将canvas内容转换为图片，但需要处理跨平台差异。 其次，保存为PDF。生成PDF可能需要将图片或HTML内容转换为PDF格式。可以考虑使用jsPDF库，它可以在前端生成PDF文件。但需要注意...
uniapp小程序绘制二维码生成图片截图保存到本地
weixin_49296337的博客
07-07 5042
项目场景： 适应于uniapp中二维码生成图片进行截图保存 问题描述： 今天用uniapp写小程序二维码并保存到本地，网上的完全没有用，最后自己写了一个， 1.使用weapp.qrcode生成二维码，并使用uni.canvasToTempFilePath生成临时图片文件， 2.使用canvas绘制二维码， 3.使用uni.canvasToTempFilePath生成图片文件，然后uni.saveImageToPhotosAlbum保存到本地： @Override public void run()
vue2+js+uni-app+uView-ui写的微信小程序，有没有一种方法，长按可以保存整个u-popup?
最新发布
10-24
- 在Uni-app中，可以使用uni.canvasToTempFilePath或相关API。 更简单的方式可能是使用微信小程序的captureScreen API，但captureScreen是整个屏幕的截图，不是特定组件。 用户想保存"整个u-popup"，而不是整个...
uniapp写h5使用html2canvas时生成的图片模糊的解决办法
linguo2625469的博客
07-16 4416
使用uniapp写微信公众号时，很多需求是将网页报错成图片海报然后保存图片去分享，js插件html2canvas能够简单的将网页绘制成canvas并转换为图片 使用方法： import html2canvas from 'html2canvas'; makeImg() { let that=this var opts = { scale: 2, // 缩放倍数 useCORS: true }; html2canvas(document.getElementById('postBox'),
uni保存canvas图片_uni-app canvas生成图片的一些问题
weixin_39764603的博客
01-14 2483
最近在做一个截图功能，发现uni-app分享自定义图片还是有点问题APP端的分享和微信小程序分享还是有点不同的，这里APP测试用的是安卓手机下面列举下我遇到的问题1.draw函数的回调不执行一般都是ctx.draw(false,()=>{})的方式执行，但是打印半天都不进入，发现是回调函数的问题，查了一会，最终还是在微信社区找到了解决方案，那就是强制执行函数ctx.draw(false,((...
uniapp canvas踩雷 文字模糊 图片不显示 ios系统无法下载
AnastasiaZyq的博客
12-22 3693
uniapp小程序项目中使用canvas实现本地保存海报 1.问题一，使用canvas保存到本地的图片中文字模糊 解决： <canvas :style="{width:windowW+ 'px',height:windowH + 'px' }" :width="windowW*pixelRatio" :height="windowH*pixelRatio" canvasId="myCanv" id="myCanv"></canvas> JS部分： on..
android canvas png 失真,【小程序】--------------处理canvas导出图片模糊问题-------------【劉】...
weixin_42520025的博客
05-27 512
一、业务需求：使用canvas在前端生成海报，并在海报上添加上水印。最后导出图片并保存到本地。二、业务逻辑实现：(1)创建canvas画布======》(2)在canvas上绘制海报========》(3)绘制水印===========》(4)绘制完成，导出图片路径=========》(5)保存到本地，并可以分享，(长按保存图片)三、代码实现：(1)、创建画布并将图片和水印绘制到canvas上co...
微信小程序-画布(canvas)转化出来的图片模糊问题
zxy2017的博客
04-30 2714
一开始想着将画布整体放大，然后使用scale或者zoom将canvas缩小的方式，在微信开发工具上使用没有问题，一阵欣喜。 高兴太早了，在真机上不能使用。canvas直接不显示了。 解决 在我们使用wx.canvasToTempFilePath的时候，设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。 // 保存图片 saveImage() { wx.canvasToTempFilePath({ x: 0, y: 0, widt
canvas 生成图片模糊
qzo_smile的博客
05-17 5078
参考文件： https://blog.csdn.net/qq_41887214/article/details/123173072 https://juejin.cn/post/6844903828916011022 https://www.jb51.net/html5/815034.html 在解决这个问题之前，必须了解以下背景知识： 1.关于屏幕的一些基础知识： 物理像素（DP） 物理像素也称设备像素，我们常听到的手机的分辨率及为物理像素，比如 iPhone 7的物理分辨率为750 * 1334。屏
微信小程序画布（canvas）生成图片模糊的解决办法
HannaLh的博客
06-11 7863
我们在用微信小程序画canvas可能会遇到生成的图片保存后很模糊的问题，根据之前的经验，我总结了两种解决办法，分别从画canvas，和保存的角度解决，各有利弊。 1、画canvas时，都用设计稿的2倍，wx.canvasToTempFilePath设置参数destWidth、destHeight(输出的宽度和高度)和width、height一样。 优点：保存的图片尺寸较小，尺寸是设计稿的2倍，图片清晰； 缺点：画canvas时需要注意2倍问题，计算增加复杂度； 2、画canvas尺寸不变，都和设计稿一样
uni.canvasToTempFilePath输出图片空白问题
qq_34927114的博客
04-07 4166
uniapp中，用uni.canvasToTempFilePath保存Canvas图片时输出空白的一片，可能的原因之一是ctx.draw()还没有画完，uni.canvasToTempFilePath就截取了画布内容并保存了，解决方法之一是加一个setTimeout(function() {}，1000），等他画完再截取保存。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值