如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿

Html5 canvas drawImage图片抗锯齿2018-01-26 11:17

虽然drawImage会自动应用消除锯齿，但如果是从大尺寸变为小尺寸，某些图像就不尽人意了，比如曲线。

对于可能的性能原因，浏览器似乎通常使用的是双线性(2×2采样)插值与画布元素而不是双立方(4×4采样)。

如果这个步骤太大，那么根本就没有足够的像素从结果中反映出来。

从signal/DSP的角度来看，可以将此看作是低通滤波器的阈值设置得太高，如果信号中有许多高频，则可能会导致混叠。

现在在specs中定义了一个新属性，用于设置重采样质量：

context.imageSmoothingQuality = "low|medium|high"

目前只有Chrome支持。每个级别使用的实际方法由供应商决定，但将Lanczos假设为“高”或质量相当的东西是合理的。

则可以完全跳过降级，或者根据图像大小和浏览器，更少的重绘可以使用较大的步骤。

解决方案是使用降压来获得正确的结果。降压意味着您可以逐步缩小尺寸，以允许有限的插值范围覆盖足够的像素进行采样。

这也可以在双线性插值的情况下得到很好的结果，这样做的时候，其实际上表现得更像是双立方体。

而且由于在每个步骤中采样的像素较少，所以开销很小。

理想的步骤是在每个步骤中使用分辨率的一半，直到设置到目标大小为止。

在原始问题中使用直接缩放

使用如下所示的降压

在这种情况下，需要分三步进行：

第一步，我们使用屏幕画布将图像缩小为一半：

/// step 1 - create off-screen canvas var oc = document.createElement('canvas'),

octx = oc.getContext('2d');

oc.width = img.width * 0.5;

oc.height = img.height * 0.5;

octx.drawImage(img, 0, 0, oc.width, oc.height);

第二步，重新使用屏幕外画布，并将图像缩小到一半：

/// step 2

octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

第三步，再次画主画布，又减半，但最终的大小：

/// step 3 ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,0, 0, canvas.width, canvas.height);

总结

您可以使用此公式计算所需的步骤总数(它包括设置目标大小的最后一步)：

steps = Math.ceil(Math.log(sourceWidth / targetWidth) / Math.log(2))

如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿相关推荐

html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪
前言: 我们在网页中经常会用到图片展示,通常情况下会给一个固定的宽高来显示这个图片,然而从服务器端上传的图片大小是不确定的,如果直接按默认填充这个框有时候就会特别丑orz.作为一个完(wai)美(ma ...
html5 canvas drawImage图片模糊
问题:当使用如下设置时,图片显示模糊 javascript var img=new Image(); img.src="http://www.w3school.com.cn/i/eg_tul ...
html5 canvas 图片拼接,HTML5 canvas drawImage方法实现读取图片数据截图拼接图片。
代码如下: Document *{margin:0 auto;} .box{border: 1px solid #ccc;width:1205px;height:400px;margin:0 auto ...
利用HTML5 canvas合并图片并解决Filaed to execute 'toDataURL' on 'HTMLCanvasElement'异常
有两张图片,如下图所示,如何将两张图片合并成一张? 使用HTML5的canvas相关知识可以简单快捷地解决此需求. 目录结构: 源码使用原生js,不需要引入第三方库: <!DOCTYPE htm ...
html5 canvas实现图片玻璃碎片特效
今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效.图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息.效果图如下: 在线预览源码下载实现代码: html代码: & ...
html怎样把图片放进画布中,HTML5 canvas操作图片
1.canvas操作图像的能力 canvas更有意思的一项特性就是图像操作能力.可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等.浏览器支持的任意格式的外部图片都可以使用, ...
html5 canvas消除锯齿,HTML5 Canvas 如何取消反锯齿绘图
一.问题的提出我们都知道反锯齿(anti-aliasing)绘图给我们带来更好的视觉体验,有了这个技术,绘制的图形的边缘再不是以前毛毛躁躁的样子了.这就是采用反锯齿算法的功劳.其实质就是把要绘制的颜 ...
html5 canvas消除锯齿,HTML5 Canvas 如何取消反锯齿绘图
原文出自:http://blog.csdn.net/cheungmine/article/details/7053455 一.问题的提出我们都知道反锯齿(anti-aliasing)绘图给我们带来更 ...
html5 canvas 取消锯齿,HTML5 Canvas 如何取消反锯齿绘图
一.问题的提出我们都知道反锯齿(anti-aliasing)绘图给我们带来更好的视觉体验,有了这个技术,绘制的图形的边缘再不是以前毛毛躁躁的样子了.这就是采用反锯齿算法的功劳.其实质就是把要绘制的颜 ...

如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿

如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿相关推荐

最新文章

热门文章