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

最新推荐文章于 2024-08-13 10:03:40 发布
最新推荐文章于 2024-08-13 10:03:40 发布
阅读量3.5k 收藏 2
点赞数 3
分类专栏： uni-app canvas 文章标签： vue.js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33769914/article/details/121775399
版权
博客探讨了如何通过调整Canvas元素的样式属性，实现背景图片的真实宽高比例，从而避免图片在Canvas上缩放时出现模糊。博主分享了一个技巧，即先获取图片的真实宽高，然后将Canvas的width和height设置为这些值的一半，最后在绘制图片时乘以2，有效解决了图像失真的问题。
摘要由CSDN通过智能技术生成

 

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

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

肖肖肖丽珠
关注
专栏目录
wx.canvasToTempFilePath
03-29
官方文档中只有一行 wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wx.saveFile差不多； wx.canvasToTempFilePath({               canvasId: 'target',               success: function success(res) {                 wx.saveFile({                   tempFilePath: res.tempFilePath,                   succe
uni-app-barcode:uni-app 条形码生成器
05-12
uni-app 条形码生成器 作者：诗小柒 支持H5、微信小程序、APP，其它平台的没有测试 使用canvas生成 不懂如何使用可以去直接打包下载运行 说明 此条形码组件的条形码生成部分移植改造自，精简了代码，移除无效属性，...
uni-app微信小程序canvas中使用canvasToTempFilePath在手机上导出图片尺寸与实际不符
zhangjing1019的博客
09-19 1572
比如图片的尺寸是1125*2001像素，这样用微信开发者工具下载下来的图片尺寸是1125*2001像素，用不同的手机去操作，下载出来的图片尺寸都不一样，和原图片尺寸差距很大。
解决canvas清晰度的问题
qyjs
02-05 1236
200, 这时候, 我们看到的图片一定是清晰的, 如果缩放倍率变大了, 我们的原始尺寸的样式尺寸还是200*200, 这个时候, 我们的图片一定是不清晰的, 所以, 明白了里面的原理之后, 我们说一下他们之间的关系。我们图片有他自己本身的原始尺寸, 也有我们给图片设置的样式尺寸, 但是也要考虑到当前设备的缩放倍率, 比如我们缩放倍率为1, 一个图片的原始尺寸是200。我们改变原始尺寸不是很方便, 所以我们只能改变样式尺寸, 比如当前的缩放倍率是2, 我们再把样式尺寸也同时缩小2倍即可。
uniapp中如何使用uni.canvasToTempFilePath方法上传Canvas内容为图片，并理解其工作原理
最新发布
weixin_51480428的博客
08-13 850
uniapp通过封装复杂的网络请求和文件处理逻辑，使得开发者能够通过简单的API调用实现文件上传功能。开发者不需要手动处理HTTP请求的细节，只需提供必要的参数并处理响应即可。
wx.canvasToTempFilePath导出的图片不清晰
weixin_51293134的博客
09-21 1049
解决办法：本质上就是生成一个更大的图片，因为手机的屏幕设备的像素比现在一般都是超过2的。实际上我们只需要在使用wx.canvasToTempFilePath的时候，设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。使用wx.canvasToTempFilePath接口，导出的canvas图片在手机上看不清晰。使用wx.getSystemInfo()获取设备像素比pixelRatio。
微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
热门推荐
pcaxb的专栏
02-21 1万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址： 微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度  在小程序布局中，如果图片不是固定高度和高度，但image设置的是固定的高度和宽度，这时候原始图片相对image设置的固定高度和宽度不是等比例大小，那么这张图片就会变形，变的不清晰。这时就可以使用下面的等比例缩放的方式
在ios上wx.canvasToTempFilePath生成图片不清晰
qq_43060570的博客
06-25 651
在ios上wx.canvasToTempFilePath生成图片不清晰
小程序canvasToTempFilePath导出图片模糊？
ZZ556464的博客
04-06 858
【代码】小程序canvasToTempFilePath导出图片模糊？
uniapp写h5使用html2canvas时生成的图片模糊的解决办法
linguo2625469的博客
07-16 4110
使用uniapp写微信公众号时，很多需求是将网页报错成图片海报然后保存图片去分享，js插件html2canvas能够简单的将网页绘制成canvas并转换为图片 使用方法： import html2canvas from 'html2canvas'; makeImg() { let that=this var opts = { scale: 2, // 缩放倍数 useCORS: true }; html2canvas(document.getElementById('postBox'),
uni-app 使用html2tocanvas 模糊的问题
PlayboyBoZhao的博客
10-31 953
html2tocanvas 模糊的问题 经过搜索发现 使用背景图 background-image 会导致模糊 但使用uniapp 写的 image 引擎会渲染成 div 嵌套一个image 再把图片使用 div background-image 来展示 上图可以看出 最终图片 还是使用了 背景图的方式展示出来 所以导致了结果图片模糊的问题 解决方法方法 cover-image <cover-image src="/static/img/uni.e19b3310.png">简单的</
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app优医问诊-配套资料
05-04
8. **微信小程序接入**：uni-app支持快速生成微信小程序，学习者应掌握微信小程序的开发规范，以及如何通过uni-app进行对接。 9. **性能优化**：学习如何通过合理使用懒加载、减少API调用、优化渲染等方式提高uni-...
uni-app使用微信小程序云函数的步骤示例
10-15
在本教程中，我们将深入探讨如何在uni-app中使用微信小程序云函数。uni-app是一个多端开发框架，它允许开发者使用一套代码实现跨平台应用，包括iOS、Android、H5、微信小程序等。而微信小程序云函数则是在微信小程序...
uni-app开发介绍PPT
08-12
uni-app是一款使用Vue.js开发所有前端应用的框架，开发者可以编写一套代码，并将其发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。...
android canvas png 失真,【小程序】--------------处理canvas导出图片模糊问题-------------【劉】...
weixin_42520025的博客
05-27 439
一、业务需求：使用canvas在前端生成海报，并在海报上添加上水印。最后导出图片并保存到本地。二、业务逻辑实现：(1)创建canvas画布======》(2)在canvas上绘制海报========》(3)绘制水印===========》(4)绘制完成，导出图片路径=========》(5)保存到本地，并可以分享，(长按保存图片)三、代码实现：(1)、创建画布并将图片和水印绘制到canvas上co...
微信小程序-画布(canvas)转化出来的图片模糊问题
zxy2017的博客
04-30 2524
一开始想着将画布整体放大，然后使用scale或者zoom将canvas缩小的方式，在微信开发工具上使用没有问题，一阵欣喜。 高兴太早了，在真机上不能使用。canvas直接不显示了。 解决 在我们使用wx.canvasToTempFilePath的时候，设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。 // 保存图片 saveImage() { wx.canvasToTempFilePath({ x: 0, y: 0, widt
canvas 生成图片模糊
qzo_smile的博客
05-17 4634
参考文件： 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 绘制的图片模糊的问题
xiaofang_z的博客
08-06 518
之前前面写过一遍有关canvas移动端适配的稿文，测试测出来还有点bug,绘制的图有点模糊，这里完善下。假如，页面是1200*680 的高度，我的图片得是2倍的图2400*1360。canvas 设置成2400*1360的width ，这样页面会被放大，canvas的width、height得是实际可视内容的宽度，得动态获取。当然在实际h5页面里，宽高不会是这样写死的，都是动态获取。解决办法是，所有的数值，必须要 乘以 dpr，记得，如果有点位的展示，点位也需要 乘以dpr。例如，我这个设计是横屏，
uni-app加载图片模糊
03-05
在uni-app中加载图片并实现模糊效果，可以通过以下步骤实现： 1. 首先，在uni-app项目中的页面中引入需要使用的图片资源。可以使用`<image>`标签或者`<img>`标签来加载图片。 2. 接下来，可以使用CSS样式来实现图片的模糊效果。可以通过设置`filter`属性来实现模糊效果。例如，可以使用`blur()`函数来设置图片的模糊程度。示例代码如下： ```html <template> <view> <image class="blur-image" src="/static/image.jpg"></image> </view> </template> <style> .blur-image { filter: blur(5px); /* 设置模糊程度，可以根据需要调整数值 */ } </style> ``` 在上述示例中，`/static/image.jpg`是需要加载的图片路径，`blur-image`是自定义的类名，通过设置`filter: blur(5px)`来实现图片的模糊效果。 3. 最后，根据需要调整模糊效果的程度，可以修改`blur()`函数中的参数值。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值