canvas的drawimage使图片失真变模糊的解决方法

最新推荐文章于 2024-05-10 16:10:57 发布
最新推荐文章于 2024-05-10 16:10:57 发布
阅读量1.5w 收藏
点赞数
文章标签： canvas 图片 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37631082/article/details/72820369
版权
这几天做了个刮刮卡的活动，用的是wScratchPad.js。发现刮开之后的图片变得好模糊，
，
解决方法是通过把canvas先放大一倍，然后再通过transform: scale(0.5);使canvas回到原来的尺寸
最后还需要对wScratchPad的源码进行修改。
修改前：

修改后：


这个解决了canvas进行transform: scale(0.5);处理后刮卡位置出现偏移的问题。

最后刮出的效果为：



结论：

处理后，经过canvas渲染的图片也能清晰地显示出来....


之前的图片不知道怎么的就不见了，还没找到方法拿回图片,

fe_梅小西
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序canvas.drawImage完全显示图片问题的解决
10-17
主要介绍了微信小程序canvas.drawImage完全显示图片问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
canvas画图被放大且模糊的解决方法
01-19
先来理解canvas的这几个宽度和高度 canvas.width是画布的大小，而canvas.style.width是浏览器渲染的canvas的尺寸 第一个问题：画布的高度和宽度 画布的宽和高一定要在canvas标签中设置，如果是在css样式中设置，则不...
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生成图片模糊的解决方案
Bright2017的博客
07-29 3881
一般情况，在高清屏的设备下，任何绘制canvas中的图像、文字、线条、形状都可能会出现模糊的问题。可通过引入 GitHub 中的 hidpi-canvas 有效地解决。 首先去 GitHub 下载 hidpi-canvas.js 文件：传送门； 在项目中引入 hidpi-canvas.js 文件； 调用 getPixelRatio( ) 函数，得到 ratio 值； 在 drawImage( ) 中，将 width 和 height 乘以 ratio； 效果如下，但抱歉，没做对比图！ 在部分 iO
大白话canvas中drawImage()方法
最新发布
bubble21的博客
05-10 302
用于定位（左上角），就是从哪个点开始绘制。x 是距原点的水平距离 y是距原点的垂直距离。当前起始点，新建画布后起始是（0,0）偏移100,200后，原点就是(100,200)需要四个参数，在哪个点开始绘制(x,y)，绘制多大(width,height)需要四个参数，在哪个点开始剪切(sx,sy)，绘制多大(sw,sh)：用于定位（左上角），在原图哪个点开始剪切。
canvas 中 drawImage 导出的图片很糊解决方法
weixin_44758974的博客
09-06 3067
canvas 中 drawImage 导出的图片很糊解决方法
canvas 失真
qyp_slw的博客
10-13 378
Document
html5 图片虚化 js,javascript – HTML5 – Canvas,drawImage()绘制图像模糊
weixin_30994645的博客
06-04 327
我试图将以下图像绘制到画布,但尽管定义了画布的大小,但它看起来很模糊.正如您在下面所看到的,图像清晰而清晰,而在画布上,图像模糊且像素化. 它的外观如下(左边是原始的,右边是绘制的画布,模糊不清.) 我究竟做错了什么？console.log('Hello world')var c = document.getElementById('canvas')var ctx = c.getContext('...
ctx.drawImage的canvas绘图不清晰解决方案,以及canvas高清导出
阿牛哥的博客
02-23 1301
ctx.drawImage的canvas绘图不清晰解决方案,以及canvas高清导出
CANVAS drawImage 绘图图片模糊已解决
felicity_zll的博客
01-05 5534
Vue 中 组件命名，父组件向子组件传值props 里面元素的命名，在标签中都不识别大写，要求驼峰命名改为小写。
详解canvas drawImage()方法绘制图片不显示的问题
09-22
主要介绍了详解canvas drawImage()方法绘制图片不显示的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
小程序中canvas的drawImage方法参数使用详解
12-03
最近在开发小程序，海报生成的过程中，要在carvas中不断去添加图片，对小程序的drawImage参数不是很明确，这次解惑。 示例代码 有三个版本的写法： drawImage(imageResource, dx, dy) drawImage(imageResource, dx...
HTML drawimage方法 拍摄的为什么失真 总结的几个方法
技多不压身，技压人一头
10-20 2894
1.目标矩阵就是你当前GDI对象的图片，源矩形区域要剪切图片的区域，比如要从图片1获取范围坐标0,0到坐标100,100的图片粘贴到图片2的坐标100,100到坐标200,200，图片1就是源矩形区域，图片2就是目标区域 HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有
微信小程序 实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册
lmx的博客
06-26 5099
1.获取手机宽度 进而设置canvas画布的宽度 onLoad() { let that = this; // 获取系统信息，设置canvas宽高 wx.getSystemInfo({ success(res) { that.setData({ canvasWidth: res.windowWidth }...
Canvas-drawImage 绘制图片模糊问题
热门推荐
月迷津渡丶的专栏
05-12 1万+
最近遇到这样的问题，使用canvas输出图片，图片比canvas区域大，尺寸限制之后反而变得特别模糊： 代码： var c = document.getElementById("myimage");//canvas的id var ctx=c.getContext("2d"); var img=new Image(); im
微信小程序canvas画布不清晰解决方法
苦夏木禾
12-12 3562
绘制的图片，文字等十分模糊 添加以下代码,通过设置分辨率来解决 const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr) 完整代码： <!-- canvas.wxml --> <canvas type="2d" id="myCanvas"></canvas&
canvas 图形剪裁clip、缩放、旋转、位移translate、变换矩阵transform
weixin_43294560的博客
07-22 908
剪裁 根据当前所绘制的图形,对之后的所有图形进行剪裁,在这之后的所有图形在裁剪区域才显示,在这之前的不受影响 ctx.clip() 效果图 第一次剪裁 第二次剪裁 第三次剪裁 第四次剪裁 代码示例: // 绘制第一个圆 let cx=200; let cy=300; let radius=100; ctx.beginPath(); ctx.fillStyle = 'red'; ctx.arc(cx, cy, radius, 0, Math.PI * 2, false); ctx.fi
img图片不失真，进行比例缩放
qq_41761448的博客
07-15 1810
img{ width: 100%; height: 100%; object-fit: fill; object-fit: contain; object-fit: scale-down; }
html5 Canvas画图教程26:用transform来实现位移,缩放,旋转等
Just for fun的专栏
03-14 3301
本文属于《html5 Canvas画图系列教程》,本文有些长.前面我讲过在canvas中实现图形的变换,这是比较简单的,因为都是用的直观的函数.今天我还是要实现同样的图形变化效果,但不同的是我要用一个看起来就让人心碎的方法,就是transform,也就是矩阵matrix.其实我对Matrix的认识只限于他是一部很好看的电影(即黑客帝国),在没看此电影前,我根本不知道有矩阵这个名字,而且矩阵这名字又...
canvas drawImage 使用本地图片
08-09
回答: 当使用canvas的drawImage方法来绘制本地图片时，有几个要注意的地方。首先，确保图片已经加载完成后再进行绘制，因为在图片加载之前使用drawImage方法会导致绘制失败。可以使用window.onload来确保在图片加载完成后再进行绘制操作。其次，要给图片加载一定的缓冲时间，以确保图片已经完全加载进来。最后，需要注意绘制顺序，即确保图片标签的加载在canvas标签之前，并在window.onload函数中进行绘制操作，以保证绘制成功。这样可以确保图片加载完成后再使用drawImage方法进行绘制，从而解决图片显示不稳定的问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值