调整HTML5画布中的图像大小
我正在尝试使用javascript和canvas元素在客户端创建缩略图，但是当我缩小图像时，它看起来很糟糕。它看起来好像在photoshop中缩小了，重新采样设置为“最近邻”而不是Bicubic。我知道可以让它看起来正确，因为this site也可以使用画布做得很好。我尝试使用他们所做的相同代码，如“[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;
}
EDIT2：
似乎我错了，链接的网站没有做任何缩小图像的工作。我尝试了其他建议的方法，但没有一个看起来更好。这就是不同方法的结果：
的Photoshop：
画布：
带图像渲染的图像：optimizeQuality设置并使用宽度/高度缩放：
带图像渲染的图像：optimizeQuality设置并使用-moz-transform缩放：
Canvas在pixastic上重新调整大小：
我想这意味着firefox没有像我们想象的那样使用双三次采样。我只需要等到实际添加它。
EDIT3：
19 个答案:
答案 0 :(得分：385)
那么，如果所有的浏览器（实际上，Chrome 5给了我很好的浏览器），你会怎么做？不会给你足够好的重新取样质量？你自己实现它们！哦，来吧，我们正在进入Web 3.0的新时代，HTML5兼容的浏览器，超级优化的JIT javascript编译器，多核（†）机器，有大量的内存，你害怕什么？嘿，javascript中有java这个词，所以应该保证性能，对吧？看，缩略图生成代码：
// returns a function that calculates lanczos weight
function lanczosCreate(lobes) {
return function(x) {
if (x > lobes)
return 0;
x *= Math.PI;
if (Math.abs(x) < 1e-16)
return 1;
var xx = x / lobes;
return Math.sin(x) * Math.sin(xx) / x / xx;
};
}
// elem: canvas element, img: image element, sx: scaled width, lobes: kernel radius
function thumbnailer(elem, img, sx, lobes) {
this.canvas = elem;
elem.width = img.width;
elem.height = img.height;
elem.style.display = "none";
this.ctx = elem.getContext("2d");
this.ctx.drawImage(img, 0, 0);
this.img = img;
this.src = this.ctx.getImageData(0, 0, img.width, img.height);
this.dest = {
width : sx,
height : Math.round(img.height * sx / img.width),
};
this.dest.data = new Array(this.dest.width * this.dest.height * 3);
this.lanczos = lanczosCreate(lobes);
this.ratio = img.width / sx;
this.rcp_ratio = 2 / this.ratio;
this.range2 = Math.ceil(this.ratio * lobes / 2);
this.cacheLanc = {};
this.center = {};
this.icenter = {};
setTimeout(this.process1, 0, this, 0);
}
thumbnailer.prototype.process1 = function(self, u) {
self.center.x = (u + 0.5) * self.ratio;
self.icenter.x = Math.floor(self.center.x);
for (var v = 0; v < self.dest.height; v++) {
self.center.y = (v + 0.5) * self.ratio;
self.icenter.y = Math.floor(self.center.y);
var a, r, g, b;
a = r = g = b = 0;
for (var i = self.icenter.x - self.range2; i <= self.icenter.x + self.range2; i++) {
if (i < 0 || i >= self.src.width)
continue;
var f_x = Math.floor(1000 * Math.abs(i - self.center.x));
if (!self.cacheLanc[f_x])
self.cacheLanc[f_x] = {};
for (var j = self.icenter.y - self.range2; j <= self.icenter.y + self.range2; j++) {
if (j < 0 || j >= self.src.height)
continue;
var f_y = Math.floor(1000 * Math.abs(j - self.center.y));
if (self.cacheLanc[f_x][f_y] == undefined)
self.cacheLanc[f_x][f_y] = self.lanczos(Math.sqrt(Math.pow(f_x * self.rcp_ratio, 2)
+ Math.pow(f_y * self.rcp_ratio, 2)) / 1000);
weight = self.cacheLanc[f_x][f_y];
if (weight > 0) {
var idx = (j * self.src.width + i) * 4;
a += weight;
r += weight * self.src.data[idx];
g += weight * self.src.data[idx + 1];
b += weight * self.src.data[idx + 2];
}
}
}
var idx = (v * self.dest.width + u) * 3;
self.dest.data[idx] = r / a;
self.dest.data[idx + 1] = g / a;
self.dest.data[idx + 2] = b / a;
}
if (++u < self.dest.width)
setTimeout(self.process1, 0, self, u);
else
setTimeout(self.process2, 0, self);
};
thumbnailer.prototype.process2 = function(self) {
self.canvas.width = self.dest.width;
self.canvas.height = self.dest.height;
self.ctx.drawImage(self.img, 0, 0, self.dest.width, self.dest.height);
self.src = self.ctx.getImageData(0, 0, self.dest.width, self.dest.height);
var idx, idx2;
for (var i = 0; i < self.dest.width; i++) {
for (var j = 0; j < self.dest.height; j++) {
idx = (j * self.dest.width + i) * 3;
idx2 = (j * self.dest.width + i) * 4;
self.src.data[idx2] = self.dest.data[idx];
self.src.data[idx2 + 1] = self.dest.data[idx + 1];
self.src.data[idx2 + 2] = self.dest.data[idx + 2];
}
}
self.ctx.putImageData(self.src, 0, 0);
self.canvas.style.display = "block";
};
...用它可以产生这样的结果！
所以无论如何，这是你的例子的“固定”版本：
img.onload = function() {
var canvas = document.createElement("canvas");
new thumbnailer(canvas, img, 188, 3); //this produces lanczos3
// but feel free to raise it up to 8. Your client will appreciate
// that the program makes full use of his machine.
document.body.appendChild(canvas);
};
现在是时候把你最好的浏览器放在那里看看哪一个最不可能增加你客户的血压！
嗯，哪里是我的讽刺标签？（因为代码的很多部分都基于Anrieff Gallery Generator，它是否也包含在GPL2中？我不知道）
†实际上由于javascript的限制，不支持多核。
答案 1 :(得分：36)
使用带有JavaScript的 Hermite 过滤器进行快速图像调整大小/重新采样算法。支持透明度，提供优质。预习：
更新：在GitHub上添加了2.0版本（更快，网络工作者+可转移对象）。最后我搞定了！
Git：https://github.com/viliusle/Hermite-resize
演示：http://viliusle.github.io/miniPaint/
/**
* Hermite resize - fast image resize/resample using Hermite filter. 1 cpu version!
*
* @param {HtmlElement} canvas
* @param {int} width
* @param {int} height
* @param {boolean} resize_canvas if true, canvas will be resized. Optional.
*/
function resample_single(canvas, width, height, resize_canvas) {
var width_source = canvas.width;
var height_source = canvas.height;
width = Math.round(width);
height = Math.round(height);
var ratio_w = width_source / width;
var ratio_h = height_source / height;
var ratio_w_half = Math.ceil(ratio_w / 2);
var ratio_h_half = Math.ceil(ratio_h / 2);
var ctx = canvas.getContext("2d");
var img = ctx.getImageData(0, 0, width_source, height_source);
var img2 = ctx.createImageData(width, height);
var data = img.data;
var data2 = img2.data;
for (var j = 0; j < height; j++) {
for (var i = 0; i < width; i++) {
var x2 = (i + j * width) * 4;
var weight = 0;
var weights = 0;
var weights_alpha = 0;
var gx_r = 0;
var gx_g = 0;
var gx_b = 0;
var gx_a = 0;
var center_y = (j + 0.5) * ratio_h;
var yy_start = Math.floor(j * ratio_h);
var yy_stop = Math.ceil((j + 1) * ratio_h);
for (var yy = yy_start; yy < yy_stop; yy++) {
var dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half;
var center_x = (i + 0.5) * ratio_w;
var w0 = dy * dy; //pre-calc part of w
var xx_start = Math.floor(i * ratio_w);
var xx_stop = Math.ceil((i + 1) * ratio_w);
for (var xx = xx_start; xx < xx_stop; xx++) {
var dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half;
var w = Math.sqrt(w0 + dx * dx);
if (w >= 1) {
//pixel too far
continue;
}
//hermite filter
weight = 2 * w * w * w - 3 * w * w + 1;
var pos_x = 4 * (xx + yy * width_source);
//alpha
gx_a += weight * data[pos_x + 3];
weights_alpha += weight;
//colors
if (data[pos_x + 3] < 255)
weight = weight * data[pos_x + 3] / 250;
gx_r += weight * data[pos_x];
gx_g += weight * data[pos_x + 1];
gx_b += weight * data[pos_x + 2];
weights += weight;
}
}
data2[x2] = gx_r / weights;
data2[x2 + 1] = gx_g / weights;
data2[x2 + 2] = gx_b / weights;
data2[x2 + 3] = gx_a / weights_alpha;
}
}
//clear and resize canvas
if (resize_canvas === true) {
canvas.width = width;
canvas.height = height;
} else {
ctx.clearRect(0, 0, width_source, height_source);
}
//draw
ctx.putImageData(img2, 0, 0);
}
答案 2 :(得分：24)
尝试pica - 这是一款具有可选择的算法的高度优化的缩放器。见demo。
例如，第一篇文章的原始图像使用Lanczos过滤器和3px窗口在120ms内调整大小，或者使用Box过滤器和0.5px窗口调整为60ms。对于巨大的17mb图像，5000x3000px调整大小在桌面上需要大约1秒，在手机上需要3秒。
所有调整大小的原则都在这个主题中得到了很好的描述，而异食癖并没有增加火箭科学。但它对现代JIT-s的优化非常好，并且可以开箱即用（通过npm或bower）。此外，它在可用时使用网络工作者来避免界面冻结。
我还计划很快添加非锐化掩模支持，因为它在缩减后非常有用。
答案 3 :(得分：14)
我知道这是一个旧帖子，但对于像我这样的人来说这可能是有用的，几个月以来第一次遇到这个问题。
以下是一些代码，每次重新加载图像时都会调整图像大小。我知道这根本不是最优的，但我提供它作为概念证明。
另外，很抱歉将jQuery用于简单的选择器，但我对语法感觉太舒服了。
$(document).on('ready', createImage);
$(window).on('resize', createImage);
var createImage = function(){
var canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth || $(window).width();
canvas.height = window.innerHeight || $(window).height();
var ctx = canvas.getContext('2d');
img = new Image();
img.addEventListener('load', function () {
ctx.drawImage(this, 0, 0, w, h);
});
img.src = 'http://www.ruinvalor.com/Telanor/images/original.jpg';
};html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000;
}
canvas{
position: absolute;
left: 0;
top: 0;
z-index: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Resize</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
我的createImage函数在加载文档时调用一次，之后每次窗口收到调整大小事件时都会调用它。
我在Mac上的Chrome 6和Firefox 3.6中进行了测试。这种“技术”吃处理器，因为它在夏天是冰淇淋，但它可以解决问题。
答案 4 :(得分：9)
我已经提出了一些算法来对html画布像素数组进行图像插值，这可能对此有用：
https://web.archive.org/web/20170104190425/http://jsperf.com:80/pixel-interpolation/2
这些可以复制/粘贴，可以在网络工作者内部使用来调整图像大小（或任何其他需要插值的操作 - 我现在用它们来消除图像）。
我没有添加上面的lanczos内容，所以如果您愿意，可以随意添加它作为比较。
答案 5 :(得分：6)
如果您只想尝试调整图片大小，我建议您使用CSS设置图片的width和height。这是一个简单的例子：
.small-image {
width: 100px;
height: 100px;
}
请注意，height和width也可以使用JavaScript设置。这是快速代码示例：
var img = document.getElement("my-image");
img.style.width = 100 + "px"; // Make sure you add the "px" to the end,
img.style.height = 100 + "px"; // otherwise you'll confuse IE
另外，为确保调整大小的图像看起来不错，请将以下css规则添加到图像选择器：
-
-ms-interpolation-mode: bicubic：在IE7中介绍 -
image-rendering: optimizeQuality：在FireFox 3.6中引入
据我所知，除了IE之外的所有浏览器都默认使用双三次算法调整图像大小，因此调整后的图像在Firefox和Chrome中应该看起来不错。
如果设置css width和height不起作用，您可能想要使用css transform：
如果由于某种原因你需要使用画布，请注意有两种方法可以调整图像大小：通过使用css调整画布大小或者以较小的尺寸绘制图像。
有关详细信息，请参阅this question。
希望这有帮助！
答案 6 :(得分：6)
我强烈建议您查看this link并确保将其设置为true。
控制图像缩放行为
在Gecko 1.9.2中引入（Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0）
Gecko 1.9.2推出了 mozImageSmoothingEnabled属性为 画布元素;如果这个布尔值 值为false，图像不会 缩放时平滑。这个属性是 默认为true。 view plainprint？
- cx.mozImageSmoothingEnabled = false;
答案 7 :(得分：6)
这是一个改编自@ Telanor代码的javascript函数。将图像base64作为第一个参数传递给函数时，它返回调整大小后的图像的base64。 maxWidth和maxHeight是可选的。
function thumbnail(base64, maxWidth, maxHeight) {
// Max size for thumbnail
if(typeof(maxWidth) === 'undefined') var maxWidth = 500;
if(typeof(maxHeight) === 'undefined') var maxHeight = 500;
// Create and initialize two canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
var copyContext = canvasCopy.getContext("2d");
// Create original image
var img = new Image();
img.src = base64;
// Determine new ratio based on max size
var ratio = 1;
if(img.width > maxWidth)
ratio = maxWidth / img.width;
else if(img.height > maxHeight)
ratio = maxHeight / img.height;
// Draw original image in second canvas
canvasCopy.width = img.width;
canvasCopy.height = img.height;
copyContext.drawImage(img, 0, 0);
// Copy and resize second canvas to first canvas
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);
return canvas.toDataURL();
}
答案 8 :(得分：4)
我通过右键单击firefox中的canvas元素并保存为。
来获取此图像 
var img = new Image();
img.onload = function () {
console.debug(this.width,this.height);
var canvas = document.createElement('canvas'), ctx;
canvas.width = 188;
canvas.height = 150;
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0,188,150);
};
img.src = 'original.jpg';
所以无论如何，这是你的例子的“固定”版本：
var img = new Image();
// added cause it wasnt defined
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
// adding it to the body
document.body.appendChild(canvasCopy);
var copyContext = canvasCopy.getContext("2d");
img.onload = function()
{
var ratio = 1;
// defining cause it wasnt
var maxWidth = 188,
maxHeight = 150;
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;
// the line to change
// ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
// the method signature you are using is for slicing
ctx.drawImage(canvasCopy, 0, 0, canvas.width, canvas.height);
};
// changed for example
img.src = 'original.jpg';
答案 9 :(得分：4)
为了调整宽度小于原始尺寸的图像，我使用：
function resize2(i) {
var cc = document.createElement("canvas");
cc.width = i.width / 2;
cc.height = i.height / 2;
var ctx = cc.getContext("2d");
ctx.drawImage(i, 0, 0, cc.width, cc.height);
return cc;
}
var cc = img;
while (cc.width > 64 * 2) {
cc = resize2(cc);
}
// .. than drawImage(cc, .... )
它起作用=）。
答案 10 :(得分：3)
这些解决方案的一个问题是它们直接访问像素数据并循环通过它来执行下采样。根据图像的大小，这可能是非常耗费资源的，使用浏览器的内部算法会更好。
drawImage（）函数使用线性插值，最近邻重采样方法。当你没有调整大小超过原始大小的一半时，效果很好。
如果循环只能一次调整最多一半，结果会非常好，并且比访问像素数据要快得多。
此功能下采样到一半，直到达到所需的大小：
function resize_image( src, dst, type, quality ) {
var tmp = new Image(),
canvas, context, cW, cH;
type = type || 'image/jpeg';
quality = quality || 0.92;
cW = src.naturalWidth;
cH = src.naturalHeight;
tmp.src = src.src;
tmp.onload = function() {
canvas = document.createElement( 'canvas' );
cW /= 2;
cH /= 2;
if ( cW < src.width ) cW = src.width;
if ( cH < src.height ) cH = src.height;
canvas.width = cW;
canvas.height = cH;
context = canvas.getContext( '2d' );
context.drawImage( tmp, 0, 0, cW, cH );
dst.src = canvas.toDataURL( type, quality );
if ( cW <= src.width || cH <= src.height )
return;
tmp.src = dst.src;
}
}
// The images sent as parameters can be in the DOM or be image objects
resize_image( $( '#original' )[0], $( '#smaller' )[0] );
答案 11 :(得分：2)
我觉得我写的模块会产生类似于photoshop的结果，因为它通过平均它们来保留颜色数据，而不是应用算法。它有点慢，但对我来说它是最好的，因为它保留了所有的颜色数据。
https://github.com/danschumann/limby-resize/blob/master/lib/canvas_resize.js
它不会占用最近的邻居并丢弃其他像素，或者对一组进行采样并采用随机平均值。它需要每个源像素输出到目标像素的确切比例。源中的平均像素颜色将是目标中的平均像素颜色，这些其他公式，我认为它们不会。
如何使用的一个例子是在底部 https://github.com/danschumann/limby-resize
2018年10月更新：这些天我的例子比其他任何事情更具学术性。 Webgl几乎是100％，所以你最好用它调整大小以产生类似的结果，但速度更快。我相信PICA.js会做到这一点。 -
答案 12 :(得分：2)
我之前在使用可能有用的画布时发现了一些有趣的东西：
要自行调整画布控件的大小，您需要使用height=""和width=""属性（或canvas.width / canvas.height元素）。如果使用CSS来调整画布的大小，它实际上会拉伸（即：调整大小）画布的内容以适合整个画布（而不是简单地增加或减少画布的区域。
尝试将图像绘制到画布控件中，并将高度和宽度属性设置为图像大小，然后使用CSS将画布调整为您要查找的大小，这是值得的。也许这会使用不同的大小调整算法。
还应该注意的是，canvas在不同的浏览器（甚至是不同浏览器的不同版本）中具有不同的效果。浏览器中使用的算法和技术可能会随着时间的推移而发生变化（特别是Firefox 4和Chrome 6很快就会推出，这将非常强调画布渲染性能）。
此外，你可能也希望给SVG一个镜头，因为它也可能使用不同的算法。
祝你好运！
答案 13 :(得分：1)
我将@ syockit的答案以及降级方法转换为可重复使用的Angular服务，以便感兴趣的人：https://gist.github.com/fisch0920/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
})
})
答案 14 :(得分：1)
快速简单的Javascript图像缩放器：
https://github.com/calvintwr/Hermite-resize
使用：
h.resize({
source: document.getElementById('image'), // any canvas or image elements, jQuery or native
width: 400,
height: 600,
output: 'image', // [optional] `image` or `canvas`. If not entered output is same as input element.
quality: 0.7, // [optional] applicable for `image` output only
}, function(output) {
//your callback
});
历史
这是经过多轮研究，阅读和尝试之后的事实。
缩放器算法使用@ ViliusL的Hermite脚本（Hermite resizer实际上是最快的并且提供了相当好的输出）。扩展了您需要的功能。
分叉1工作人员进行调整大小，以便在调整大小时不会冻结浏览器，这与其他所有JS调整器不同。
答案 15 :(得分：0)
感谢@syockit提供了一个很棒的答案。但是，我必须按照以下方式重新格式化以使其正常工作。也许是由于DOM扫描问题：
$(document).ready(function () {
$('img').on("load", clickA);
function clickA() {
var img = this;
var canvas = document.createElement("canvas");
new thumbnailer(canvas, img, 50, 3);
document.body.appendChild(canvas);
}
function thumbnailer(elem, img, sx, lobes) {
this.canvas = elem;
elem.width = img.width;
elem.height = img.height;
elem.style.display = "none";
this.ctx = elem.getContext("2d");
this.ctx.drawImage(img, 0, 0);
this.img = img;
this.src = this.ctx.getImageData(0, 0, img.width, img.height);
this.dest = {
width: sx,
height: Math.round(img.height * sx / img.width)
};
this.dest.data = new Array(this.dest.width * this.dest.height * 3);
this.lanczos = lanczosCreate(lobes);
this.ratio = img.width / sx;
this.rcp_ratio = 2 / this.ratio;
this.range2 = Math.ceil(this.ratio * lobes / 2);
this.cacheLanc = {};
this.center = {};
this.icenter = {};
setTimeout(process1, 0, this, 0);
}
//returns a function that calculates lanczos weight
function lanczosCreate(lobes) {
return function (x) {
if (x > lobes)
return 0;
x *= Math.PI;
if (Math.abs(x) < 1e-16)
return 1
var xx = x / lobes;
return Math.sin(x) * Math.sin(xx) / x / xx;
}
}
process1 = function (self, u) {
self.center.x = (u + 0.5) * self.ratio;
self.icenter.x = Math.floor(self.center.x);
for (var v = 0; v < self.dest.height; v++) {
self.center.y = (v + 0.5) * self.ratio;
self.icenter.y = Math.floor(self.center.y);
var a, r, g, b;
a = r = g = b = 0;
for (var i = self.icenter.x - self.range2; i <= self.icenter.x + self.range2; i++) {
if (i < 0 || i >= self.src.width)
continue;
var f_x = Math.floor(1000 * Math.abs(i - self.center.x));
if (!self.cacheLanc[f_x])
self.cacheLanc[f_x] = {};
for (var j = self.icenter.y - self.range2; j <= self.icenter.y + self.range2; j++) {
if (j < 0 || j >= self.src.height)
continue;
var f_y = Math.floor(1000 * Math.abs(j - self.center.y));
if (self.cacheLanc[f_x][f_y] == undefined)
self.cacheLanc[f_x][f_y] = self.lanczos(Math.sqrt(Math.pow(f_x * self.rcp_ratio, 2) + Math.pow(f_y * self.rcp_ratio, 2)) / 1000);
weight = self.cacheLanc[f_x][f_y];
if (weight > 0) {
var idx = (j * self.src.width + i) * 4;
a += weight;
r += weight * self.src.data[idx];
g += weight * self.src.data[idx + 1];
b += weight * self.src.data[idx + 2];
}
}
}
var idx = (v * self.dest.width + u) * 3;
self.dest.data[idx] = r / a;
self.dest.data[idx + 1] = g / a;
self.dest.data[idx + 2] = b / a;
}
if (++u < self.dest.width)
setTimeout(process1, 0, self, u);
else
setTimeout(process2, 0, self);
};
process2 = function (self) {
self.canvas.width = self.dest.width;
self.canvas.height = self.dest.height;
self.ctx.drawImage(self.img, 0, 0);
self.src = self.ctx.getImageData(0, 0, self.dest.width, self.dest.height);
var idx, idx2;
for (var i = 0; i < self.dest.width; i++) {
for (var j = 0; j < self.dest.height; j++) {
idx = (j * self.dest.width + i) * 3;
idx2 = (j * self.dest.width + i) * 4;
self.src.data[idx2] = self.dest.data[idx];
self.src.data[idx2 + 1] = self.dest.data[idx + 1];
self.src.data[idx2 + 2] = self.dest.data[idx + 2];
}
}
self.ctx.putImageData(self.src, 0, 0);
self.canvas.style.display = "block";
}
});
答案 16 :(得分：0)
我想要一些定义明确的函数，所以最终得到了这些，希望对其他人也有用，
sum = sum + ((A[i] * math.log10(A[j]) + (1-A[i] * math.log10(1 - A[j])))
# Missing a parenthesis at the end.
只是为了测试这个，在选项卡中打开的图像上运行它。
答案 17 :(得分：-1)
我刚刚进行了一个并排比较的页面，除非最近发生了一些变化，否则我看不到使用canvas与简单css的缩小（缩放）。我在FF6 Mac OSX 10.7中测试过。与原版相比仍略微柔和。
然而，我确实发现了一些确实产生巨大影响的东西，并且在支持画布的浏览器中使用了图像过滤器。您可以在Photoshop中实际操作图像，模糊，锐化，饱和度，纹波，灰度等等。然后我发现了一个非常棒的jQuery插件，它使这些过滤器的应用变得轻而易举： http://codecanyon.net/item/jsmanipulate-jquery-image-manipulation-plugin/428234
我只需在调整图像大小后立即应用锐化滤镜，这样可以提供所需的效果。我甚至不必使用画布元素。
答案 18 :(得分：-1)
寻找另一个很好的简单解决方案？
var img=document.createElement('img');
img.src=canvas.toDataURL();
$(img).css("background", backgroundColor);
$(img).width(settings.width);
$(img).height(settings.height);
此解决方案将使用浏览器的resize算法！ ：）
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？