我正在尝试用画布调整一些图像的大小，但我对如何平滑它们一无所知。在 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);
第一个是普通调整大小的图像标签，第二个是画布。请注意画布是如何不平滑的。我怎样才能达到“平滑”？
您可以使用向下步进来获得更好的结果。大多数浏览器在调整图像大小时似乎使用线性插值而不是双三次。
（更新规范中添加了一个质量属性，imageSmoothingQuality目前仅在 Chrome 中可用。）
除非选择不平滑或最近邻，否则浏览器将始终在缩小图像后插入图像，因为此功能作为低通滤波器以避免混叠。
双线性使用 2x2 像素进行插值，而双三次使用 4x4，因此通过分步进行，您可以在使用双线性插值时接近双三次结果，如结果图像中所示。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
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
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 = "//i.imgur.com/SHo6Fub.jpg";<img src="//i.imgur.com/SHo6Fub.jpg" width="300" height="234">
<canvas id="canvas" width=300></canvas>根据您调整大小的剧烈程度，如果差异较小，您可以跳过第 2 步。
在演示中，您可以看到新结果现在与图像元素非常相似。
由于Trung Le Nguyen Nhat 的小提琴根本不正确（它只是在最后一步使用原始图像）
我写了我自己的性能比较的一般小提琴：
基本上是：
img.onload = function() {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d"),
oc = document.createElement('canvas'),
octx = oc.getContext('2d');
canvas.width = width; // destination canvas size
canvas.height = canvas.width * img.height / img.width;
var cur = {
width: Math.floor(img.width * 0.5),
height: Math.floor(img.height * 0.5)
}
oc.width = cur.width;
oc.height = cur.height;
octx.drawImage(img, 0, 0, cur.width, cur.height);
while (cur.width * 0.5 > width) {
cur = {
width: Math.floor(cur.width * 0.5),
height: Math.floor(cur.height * 0.5)
};
octx.drawImage(oc, 0, 0, cur.width * 2, cur.height * 2, 0, 0, cur.width, cur.height);
}
ctx.drawImage(oc, 0, 0, cur.width, cur.height, 0, 0, canvas.width, canvas.height);
}
我创建了一个可重用的 Angular 服务来为感兴趣的人处理高质量的图像/画布大小调整：https : //gist.github.com/transitive-bullshit/37bac5e741eaec60e983
该服务包括两种解决方案，因为它们都有自己的优点/缺点。lanczos 卷积方法质量更高，但速度较慢，而逐步缩小方法产生合理的抗锯齿结果并且速度明显更快。
用法示例：
angular.module('demo').controller('ExampleCtrl', function (imageService) {
// EXAMPLE USAGE
// NOTE: it's bad practice to access the DOM inside a controller,
// but this is just to show the example usage.
// resize by lanczos-sinc filter
imageService.resize($('#myimg')[0], 256, 256)
.then(function (resizedImage) {
// do something with resized image
})
// resize by stepping down image size in increments of 2x
imageService.resizeStep($('#myimg')[0], 256, 256)
.then(function (resizedImage) {
// do something with resized image
})
})
虽然其中一些代码片段简短且有效，但遵循和理解它们并非易事。
由于我不喜欢堆栈溢出中的“复制粘贴”，我希望开发人员了解他们推送到软件中的代码，希望您会发现以下有用。
演示：使用 JS 和 HTML Canvas Demo fiddler 调整图像大小。
您可能会找到 3 种不同的方法来调整大小，这将帮助您了解代码的工作方式以及原因。
https://jsfiddle.net/1b68eLdr/93089/
可以在 GitHub 项目中找到演示的完整代码以及您可能希望在代码中使用的 TypeScript 方法。
https://github.com/eyalc4/ts-image-resizer
这是最终的代码：
export class ImageTools {
base64ResizedImage: string = null;
constructor() {
}
ResizeImage(base64image: string, width: number = 1080, height: number = 1080) {
let img = new Image();
img.src = base64image;
img.onload = () => {
// Check if the image require resize at all
if(img.height <= height && img.width <= width) {
this.base64ResizedImage = base64image;
// TODO: Call method to do something with the resize image
}
else {
// Make sure the width and height preserve the original aspect ratio and adjust if needed
if(img.height > img.width) {
width = Math.floor(height * (img.width / img.height));
}
else {
height = Math.floor(width * (img.height / img.width));
}
let resizingCanvas: HTMLCanvasElement = document.createElement('canvas');
let resizingCanvasContext = resizingCanvas.getContext("2d");
// Start with original image size
resizingCanvas.width = img.width;
resizingCanvas.height = img.height;
// Draw the original image on the (temp) resizing canvas
resizingCanvasContext.drawImage(img, 0, 0, resizingCanvas.width, resizingCanvas.height);
let curImageDimensions = {
width: Math.floor(img.width),
height: Math.floor(img.height)
};
let halfImageDimensions = {
width: null,
height: null
};
// Quickly reduce the dize by 50% each time in few iterations until the size is less then
// 2x time the target size - the motivation for it, is to reduce the aliasing that would have been
// created with direct reduction of very big image to small image
while (curImageDimensions.width * 0.5 > width) {
// Reduce the resizing canvas by half and refresh the image
halfImageDimensions.width = Math.floor(curImageDimensions.width * 0.5);
halfImageDimensions.height = Math.floor(curImageDimensions.height * 0.5);
resizingCanvasContext.drawImage(resizingCanvas, 0, 0, curImageDimensions.width, curImageDimensions.height,
0, 0, halfImageDimensions.width, halfImageDimensions.height);
curImageDimensions.width = halfImageDimensions.width;
curImageDimensions.height = halfImageDimensions.height;
}
// Now do final resize for the resizingCanvas to meet the dimension requirments
// directly to the output canvas, that will output the final image
let outputCanvas: HTMLCanvasElement = document.createElement('canvas');
let outputCanvasContext = outputCanvas.getContext("2d");
outputCanvas.width = width;
outputCanvas.height = height;
outputCanvasContext.drawImage(resizingCanvas, 0, 0, curImageDimensions.width, curImageDimensions.height,
0, 0, width, height);
// output the canvas pixels as an image. params: format, quality
this.base64ResizedImage = outputCanvas.toDataURL('image/jpeg', 0.85);
// TODO: Call method to do something with the resize image
}
};
}}
我不明白为什么没有人建议createImageBitmap。
createImageBitmap(
document.getElementById('image'),
{ resizeWidth: 300, resizeHeight: 234, resizeQuality: 'high' }
)
.then(imageBitmap =>
document.getElementById('canvas').getContext('2d').drawImage(imageBitmap, 0, 0)
);
效果很好（假设您为图像和画布设置了 id）。