Question

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

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);

这有效，但是：

转换为toDataURL时image/png操作非常昂贵，实际使用速度太慢（我无法转换为image/jpeg更快的操作我试过的所有设置的输出质量不足
当然必须有一种缩小图像的方法，而不必求助于单独的画布代码，然后手动进行转换以绘制到createjs Bitmap对象上？

我也尝试过：

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

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

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

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

Answer 1

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

您可以使用scale上的Bitmap.cache()参数获取所需的结果，然后根据需要重复使用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();

这是一个在行动中看到它的小提琴：http://jsfiddle.net/lannymcnie/ofdsyn7g/

请注意，缓存只使用另一个带有drawImage的画布来缩小它。我肯定会远离toDataURL，因为它根本不具备性能。

使用createjs / easeljs调整图像大小

1 个答案: