canvas 中 drawImage 导出的图片很糊解决方法

已于 2022-09-06 17:56:48 修改
阅读量3k 收藏
点赞数 1
文章标签： javascript html 前端
于 2022-09-06 15:55:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44758974/article/details/126726745
版权

今天在写小程序中遇到了一个问题折腾了很久。就是产品要做一个保存图片到相册的需求。

首先使用canvas把每个图片和文字一个个的拼到画布上面

drawImage("图片src",x坐标,y坐标,宽尺寸，高尺寸)

但是真机上面就很糊，模拟器上面也很糊

为了解决这个问题首先我们要 使用 getImageInfo() 拿到图片的 width 和 height ,让 canvas 的宽和高和图片的尺寸保持一致。如果这还不够清晰，别怕!

我们可以选择二倍图的图片和画布然后给画布设置 

transform：scale(0.5) 

缩放一倍就好了

小巴涛
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用html2canvas,将页面转换成图片的图片模糊等踩坑记录(Web/Taro h5)
weixin_44514665的博客
01-02 5251
hteml2canvas 采坑记录,涉及到图片空白跨域/截图不完整问题
Canvas - 绘制图片模糊问题（canvas 生成图片模糊）
weixin_46022934的博客
10-20 4133
Canvas绘制模糊 零、问题背景与解决思路 一、涉及到的Api 1.关于window.devicePixelRatio canvas出现模糊的原因 第一块屏幕测试 window.devicePixelRatio 的值(微软系统) 第二块屏幕测试 window.devicePixelRatio 的值(mac系统) 2.关于Window.matchMedia() 二、解决方法(canvas绘制图片模糊) 1.图片代码如下（记得查看注释） 2.canvas效果图（图片处理前）： 3.canvas效果图，与原来的
ctx.drawImage的canvas绘图不清晰解决方案,以及canvas高清导出
阿牛哥的博客
02-23 1301
ctx.drawImage的canvas绘图不清晰解决方案,以及canvas高清导出
解决canvas清晰度的问题
qyjs
02-05 830
200, 这时候, 我们看到的图片一定是清晰的, 如果缩放倍率变大了, 我们的原始尺寸的样式尺寸还是200*200, 这个时候, 我们的图片一定是不清晰的, 所以, 明白了里面的原理之后, 我们说一下他们之间的关系。我们图片有他自己本身的原始尺寸, 也有我们给图片设置的样式尺寸, 但是也要考虑到当前设备的缩放倍率, 比如我们缩放倍率为1, 一个图片的原始尺寸是200。我们改变原始尺寸不是很方便, 所以我们只能改变样式尺寸, 比如当前的缩放倍率是2, 我们再把样式尺寸也同时缩小2倍即可。
小程序canvas新版画图及处理图片模糊
最新发布
fang5211的博客
05-28 341
context.fillText("惠风和畅 为你推荐", unit*10, unit*330);canvasHeight: windowHeight - 200,//设置canvas的高度。context.fillText("厚德载物", unit*10, unit*360);canvasWidth: windowWidth - 80,//设置canvas的宽度。windowWidth: windowWidth//屏幕宽度。code.src = "后台二维码地址";
Canvas drawImage在高清屏幕下变模糊，解决方案
weixin_43865681的博客
07-16 2693
问题：在使用canvas 绘制图片时，发现图片有些模糊 像这样 但使用标签是不会出现这个问题的 <img style={{width: '30px', height: '30px'}} src={require('../../../assets/icon/ic_cloud.png')}/> 处理方法： 核心代码如下 function setupCanvas(canvas) { // Get the device pixel ratio, falling back to 1.
解决Canvas画图清晰度问题
专注前端技术，包括Web端、移动端、小程序、APP
01-06 1176
先吹下水：远程桌面的连接我们是通过Websocket连接后，后端不断返回远程端的界面二进制数据流，我接收到之后转为图像，画到Canvas中，然后对canvas进行一系列的事件监听，传递消息给服务端，从而实现远程桌面的连接操作。在完成开发之后，发现了一个问题，后端返回的图片信息是比较清晰的，当我在前端渲染的时候，将窗口放在扩展屏上时，图像显示正常，但将窗口移入到电脑屏时就出现了模糊现象。物理像素的大小即是在内存中的实际大小，CSS像素的大小即是设置的样式大小。将窗口移入扩展屏前后。
HTML5 Canvas图像模糊完美解决办法
01-19
1、最近在用h5的canvas画动画，发现图像特别模糊。后来终于找到罪魁祸首是<meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no />这个代码，因为这行代码进行了伸缩 2、模糊图像的效果：   3、将压缩去掉后的效果   可以将代码改成   <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name=viewport con
如何解决canvas生成图片显示不清晰问题？
知之为知之，不知为不知
02-27 8177
canvas 高清晰度
Canvas清晰度的问题
水瓶KaKei的博客
12-20 1314
大家在前端开发当中，可能或多或少都遇到过图像不清晰的问题，接下来，我们来讨论一下这个问题以及应该要怎么解决。
CANVAS drawImage 绘图图片模糊已解决
felicity_zll的博客
01-05 5534
Vue 中 组件命名，父组件向子组件传值props 里面元素的命名，在标签中都不识别大写，要求驼峰命名改为小写。
使用canvas对多图片拼合并导出图片的方法
12-14
先说下canvas绘图的基本方法,如下： const myCanvas = document.createElement('canvas'); myCanvas.width = 400; myCanvas.height = 400; const ctx = myCanvas.getContext('2d'); const img = new Image(); img...
微信小程序canvas.drawImage完全显示图片问题的解决
01-03
对于微信小程序，canvas处理过程中，dramImage默认图片引用是有残缺的 导入初始项目 打开链接（原官网例子），浏览器唤醒微信开发这工具，打开连接之前需要下载好微信开发者工具，如已安装则直接唤起，没有则会提示...
教你使用Canvas处理图片的方法
01-19
今天，我们不讲Canvas的图形绘制，而是讲如何对图片进行处理。 大概流程非常简单，主要分为以下三个步骤： 是的，就像把大象装进冰箱一样简单，哈哈。 一、主要API 整个流程中所用到的主要Canvas API有： 绘制图像...
html2canvas生成图片模糊 不清楚？两种解决方法
希文Gershwin
06-23 3万+
项目需求：需要把当前整个页面的数据生成为一个图片，可以让用户长按图片保存到本地手机 在网上查到生成图片的有一个插件，叫做 html2canvas 可以把你想要转变的元素变为图片，开始很顺利，但是生成后的图片，和实际的页面不符合，图片不清晰，模糊的情况，网上大部分的解决方案是通过把canvas容器扩大，再将和成的图片进行缩放。这一种可以达到效果，就是麻烦，还有一个方法直接就可以解决，推荐大家使用第二种方法 第一种方法：（亲测有效----就是麻烦） // 本地的 html2canvas 版本为 "^0.5.0
canvas - 绘制图片，图片变模糊问题解决）
热门推荐
简单记录一下。
02-18 12万+
问题：canvas绘制图片，图片变模糊 设定一个一定尺寸的canvas，我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候，大概率都会出现图片模糊的情况。 我拿下面一张图片画到canvas上作为例子，看上去应该比较明显的有模糊的感觉。 单方面的去修改图片精度，换成更高清的图片，事实证明确实有一丢丢用，但是效果不是很明显。况且我当时那个图片由于是手绘的，大小有5M，也不会切片加载图片，直接整个加载非常耗时。 那么如何去处理这样的问题呢？ 生活中应该大家都遇到过这样的情况，
记录 html2canvas 生成海报 ### 处理生成图片背景不清晰问题 ###
qq_42359718的博客
09-16 1971
背景 ： next.js 根据不同数据生成不同海报 支持 长按保存图片 方案一： 使用canvas 画 难点： 内容较多 确定元素位置 太麻烦 性能消耗大 方案二： html2canvas.js 难点：引入方式 （ssr 项目中 import 引入 得到 undefined ） 渐变色 截图失真 清晰度不够 生成图片展示带有白底 （给展示盒子 加 overflow: hidden） 解决 引入方式 发现： 在本地启动项目没有问题 import html
html5 canvas绘图模糊总结
Win32FanEx 的专栏
05-12 2053
canvas绘图过程中出现模糊情况及解决办法
canvas和drawImage压缩图片,压缩图片模糊问题
weixin_44694230的博客
08-08 332
canvas和drawImage压缩图片,压缩图片模糊问题
canvas 数据导出与重新加载
05-24
要将 canvas 中的数据导出并重新加载，可以使用以下步骤： 1. 将 canvas 中的数据导出为图像或其他格式。可以使用 canvas 的 toDataURL() 方法将 canvas 导出为 base64 编码的图像数据。例如： ``` var imgData = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值