使用javascript canvas（平滑）调整图像大小 [英] Resize image with javascript canvas (smoothly)

问题描述

我试图调整一些图像与画布，但我没有如何平滑他们。
在photoshop，浏览器等。它们有一些算法（例如双三次，双线性），但我不知道这些是否内置在画布上。

这是我的小提琴： http://jsfiddle.net/EWupT/

  var canvas = document.createElement（'canvas'）; 
 var ctx = canvas.getContext（'2d'）; 
 canvas.width = 300 
 canvas.height = 234 
 ctx.drawImage（img，0，0，300，234）; 
 document.body.appendChild（canvas）; 
  

第一个是正常调整大小的图片标记，第二个是canvas。注意画布一个不是那么光滑。如何实现平滑？

解决方案

您可以使用向下步进以获得更好的结果。大多数浏览器在调整图片大小时似乎使用线性插值，而不是双三次函数。

除非没有选择平滑或最近的邻居，否则浏览器将在缩小后将插入图像作为低通滤波器以避免混叠。

Bilinear使用2x2像素进行插值，而bi-cubic使用4x4，所以通过在步骤中可以接近双三次结果，同时使用双线性插值，如所得到的图像所示。

在线演示

  ///当图像加载时：
 img.onload = function（）{
 
 ///设置大小与image 
 canvas.height = canvas.width *（img.height / img.width）; 
 
 /// step 1  -  resize to 50％
 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  -  resize 50％of step 1 
 octx.drawImage（oc，0，0，oc.width * 0.5，oc.height * 0.5）; 
 
 /// step 3，resize to final size 
 ctx.drawImage（oc，0，0，oc.width * 0.5，oc.height * 0.5，
 0， 0，canvas.width，canvas.height）; 
} 
 img.src =http://i.imgur.com/SHo6Fub.jpg; 
  

根据调整大小的急剧程度，如果差异较小，可以跳过步骤2。 p>

在演示中，您可以看到新的结果与图像元素非常相似。

I'm trying to resize some images with canvas but I'm clueless on how to smoothen them. On photoshop, browsers etc.. there are a few algorithms they use (e.g. bicubic, bilinear) but I don't know if these are built into canvas or not.

Here's my fiddle: http://jsfiddle.net/EWupT/

  var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width=300
    canvas.height=234
    ctx.drawImage(img, 0, 0, 300, 234);
    document.body.appendChild(canvas);

The first one is a normal resized image tag, and the second one is canvas. Notice how the canvas one is not as smooth. How can I achieve 'smoothness'?

解决方案

You can use down-stepping to achive better results. Most browsers seem to use linear interpolation rather than bicubic when resizing images.

Unless one chooses no smoothing or nearest neighbor the browser will always interpolate the image after down-scaling it as this function as a low-pass filter to avoid aliasing.

Bilinear uses 2x2 pixels to do the interpolation while bi-cubic uses 4x4 so by doing it in steps you can get close to bi-cubic result while using bi-linear interpolation as seen in the resulting images.

ONLINE DEMO

/// when image is loaded:
img.onload = function () {

    /// set size proportional to image
    canvas.height = canvas.width * (img.height / img.width);

    /// step 1 - resize to 50%
    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 - resize 50% of step 1
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    /// step 3, resize to final size
    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);
}
img.src = "http://i.imgur.com/SHo6Fub.jpg";

Depending on how drastic your resize is you can might skip step 2 if the difference is less.

In the demo you can see the new result is now much similar to the image element.

这篇关于使用javascript canvas（平滑）调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！