在HTML5画布中调整图片大小
在HTML5画布中调整图片大小
我正在尝试使用JavaScript和canvas元素在客户端创建缩略图图像，但是当我缩小图片时，它看起来很糟糕。它看起来好像是在Photoshop中使用"最近邻插值"而不是"双三次插值"进行缩小。我知道这是可能的，因为这个网站可以使用canvas很好地实现。我尝试了他们在"[Source]"链接中展示的相同代码，但仍然效果很差。我是否遗漏了什么，需要设置或调整的设置？
编辑：
我正在尝试调整一个jpg的大小。我已经尝试在链接的网站和Photoshop中调整相同的jpg，缩小后看起来很好。
以下是相关的代码：
reader.onloadend = function(e)
{
var img = new Image();
var ctx = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
var copyContext = canvasCopy.getContext("2d");
img.onload = function()
{
var ratio = 1;
if(img.width > maxWidth)
ratio = maxWidth / img.width;
else if(img.height > maxHeight)
ratio = maxHeight / img.height;
canvasCopy.width = img.width;
canvasCopy.height = img.height;
copyContext.drawImage(img, 0, 0);
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
};
img.src = reader.result;
}
编辑2：
看起来我搞错了，链接的网站在缩小图像时并没有做得更好。我尝试了其他建议的方法，但没有一个看起来更好。以下是不同方法的结果：
Photoshop：
Canvas：
带有image-rendering: optimizeQuality设置并使用宽度/高度缩放的图像：
带有image-rendering: optimizeQuality设置并使用-moz-transform缩放的图像：
Pixastic上的canvas调整大小：
我想这意味着Firefox没有像它应该的那样使用双三次插值采样。我只能等待他们真正添加它。
编辑3：
问题的出现原因是希望实现在HTML5画布中调整图像大小，同时保持图像的透明度和良好的质量。为了解决这个问题，作者使用了基于Hermite滤波器的JavaScript快速图像调整算法。作者提供了一个函数resample_single来实现图像的调整，并给出了函数的参数和用法。还有一个链接，展示了他的miniPaint演示和GitHub仓库，其中包括了多核版本的代码。作者还提到，尽管多核版本的性能较好，但由于设置开销的原因，在处理小图像时速度较慢，但对于较大的源图像可能会更有用。最后，作者还提到由于Web Workers在共享内存方面存在问题，所以目前的多核版本并不理想，但希望在未来能够解决这个问题。
HTML5画布中调整图像大小的问题的出现原因是浏览器提供的图像重采样质量不够好。为了解决这个问题，可以自己实现图像重采样算法。文章提供了一个生成缩略图的代码示例，使用了Lanczos插值算法。
代码中的thumbnailer对象接收一个canvas元素、一个image元素、一个缩放宽度和一个卷积核半径作为参数。通过调用lanczosCreate函数生成Lanczos权重，并使用这些权重对图像进行重采样，最后将结果绘制到canvas上。
文章还提到了一些改进和注意事项，如使用setTimeout来避免浏览器锁定、使用webworkers来实现多核JavaScript并提高性能、以及注意内存泄漏问题等。
最后，还有一些评论提到了其他方法来调整图像大小的问题，如使用imagemagick、使用pica库等。还有一些评论提到了该算法的一些限制和改进方法。
该文章介绍了解决HTML5画布中调整图像大小问题的原因和解决方法，提供了一个示例代码并讨论了一些相关问题和改进方法。
