Canvas-drawImage 绘制图片模糊问题

最近遇到这样的问题，使用canvas输出图片，图片比canvas区域大，尺寸限制之后反而变得特别模糊：

代码：

        var c = document.getElementById("myimage");//canvas的idvar ctx=c.getContext("2d");var img=new Image();img.src = 图片地址;img.addEventListener('load',imgin);function imgin(){c.width = $(window).width();c.height = $(window).width()*img.height/img.width;clearInterval(m);ctx.clearRect(0,0,c.width,c.height);ctx.drawImage(img,0,0,c.width,c.height);}$(window).resize(function(){imgin();});

解决：先让图片以原先尺寸呈现，再用css限制：

var c = document.getElementById("myimage");<span style="font-family: Arial, Helvetica, sans-serif;">//canvas的id</span>var ctx=c.getContext("2d");var img=new Image();img.src = ...;//<span style="font-family: Arial, Helvetica, sans-serif;">图片地址;</span>img.addEventListener('load',imgin);function imgin(){// c.width = $(window).width();// c.height = $(window).width()*img.height/img.width;c.width = img.width;//重点c.height = img.height;<//重点clearInterval(m);ctx.clearRect(0,0,c.width,c.height);ctx.drawImage(img,0,0,c.width,c.height);c.style.width = '100%';//重点}$(window).resize(function(){imgin();});

效果：

Canvas-drawImage 绘制图片模糊问题相关推荐

CANVAS drawImage 绘图图片模糊已解决
CANVAS drawImage 绘图图片模糊解决不可以在CSS中定死canvas画布的长宽, 在绘图时给出canvas宽高具体JS代码: const canvas = document.getE ...
Canvas - 绘制图片模糊问题（canvas 生成图片模糊）
Canvas绘制模糊文章目录 Canvas绘制模糊零.问题背景与解决思路一.涉及到的Api 1.关于window.devicePixelRatio canvas出现模糊的原因第一块屏幕测试 w ...
html5canvas绘制图片源码,HTML5 CANVAS：绘制图片
HTML5 CANVAS:绘制图片通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...
前端html生成图片,HTML5 Canvas：绘制图片
通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素类型: HTMLImageEleme ...
微信小程序canvas 2d 绘制图片与文字导出图片
wxml内容如下 <canvas id="myCanvas" type="2d"style="width: {{ canvas.width } ...
小程序 canvas 2d 绘制图片并保存
获取canvas实例,使用的官方的代码.用一个变量canvas保存实例,后续保存时会调用. data () {return {canvas: null // 实例} }, onReady() {con ...
H5 canvas画布字体图片模糊变清晰
H5 canvas画布字体图片模糊处理 <canvas id="canvas " width="386px" height="386px&qu ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
微信小程序合成海报_微信小程序 canvas生成海报图片模糊问题
一.制作正常显示海报,生成二倍海报隐藏代码如下 {{sendName}} 保存图片 /*css*/ .btn { width: 300rpx; height: 90rpx; line-height: ...
【HTML】Canvas(3)-绘制图片
开发游戏的时候,游戏中的地图.背景.任务.物品等都是由图片组成的,这次我们来谈谈在canvas中如何操作图片吧. canvas中提供了drawImage函数和putImageData函数来绘制图片. ...

Canvas-drawImage 绘制图片模糊问题

Canvas-drawImage 绘制图片模糊问题相关推荐

最新文章

热门文章