使用 createjs / easeljs 调整图像大小

Question

我想使用 createjs 动态缩小我 canvas 上的一些图像，然后存储较小的图像以在缩小 canvas 时出于性能原因显示。现在，我正在使用以下代码：

var bitmap = createjs.Bitmap('somefile.png');
// wait for bitmap to load (using preload.js etc.)

var oc = document.createElement('canvas');
var octx = oc.getContext('2d');
oc.width = bitmap.image.width*0.5;
oc.height = bitmap.image.height*0.5;
octx.drawImage(bitmap.image, 0, 0, oc.width, oc.height);

var dataUrl = oc.toDataURL('image/png'); // very expensive
var smallBitmap = new createjs.Bitmap(dataUrl);

这有效，但是：

转换为 image/png 时，toDataURL 操作非常昂贵，而且在实践中使用起来太慢（而且我无法转换为更快的 image/jpeg由于我尝试过的所有设置的输出质量都不够）
当然必须有一种方法可以缩小图像尺寸而不必求助于单独的 canvas 代码，然后手动进行转换以绘制到 createjs Bitmap 对象上？？

我也试过：

octx.drawImage(bitmap.image, 0, 0, oc.width, oc.height);
var smallBitmap = new createjs.Bitmap(oc);

但是虽然速度很快，但这似乎并没有真正起作用（无论如何我每次都必须创建一个单独的 canvas 元素来促进这一点。）

我想知道是否有一种方法可以使用 drawImage 将位图的缩减采样版本直接绘制到 createjs Bitmap 实例中，而无需通过单独的 canvas 对象或者转换成字符串？

如果我理解正确，在内部这就是 createjs cache 属性的工作方式（即在内部使用 drawImage 写入 DisplayObject）但我无法弄清楚自己怎么用。

Answer 1

您已使用 createjs 和 easeljs 标记此 post，但您的示例显示了用于缩放的简单 Canvas 上下文用法。

您可以在 Bitmap.cache() 上使用 scale 参数来获得您想要的结果，然后根据需要重复使用 cacheCanvas。

// This will create a half-size cache (50%)
// But scale it back up for you when it displays on the stage
var bmp = new createjs.Bitmap(img);
bmp.cache(0, 0, img.width, img.height, 0.5);

// Pull out the generated cache and use it in a new Bitmap
// This will display at the new scaled size.
var bmp2 = new createjs.Bitmap(bmp.cacheCanvas);

// Un-cache the first one to reset it if you want
bmp.uncache();

这里有一个 fiddle 可以看到它的实际效果：http://jsfiddle.net/lannymcnie/ofdsyn7g/

请注意，缓存只是使用另一个 canvas 和 drawImage 来缩小它。我肯定会远离 toDataURL，因为它根本没有性能。

使用 createjs / easeljs 调整图像大小

Resizing images using createjs / easeljs

javascript

canvas

image-resizing

easeljs

createjs