使用createjs / easyljs调整图像大小

肯·查特菲尔德

我想使用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);

这可行,但是:

  1. toDataURL转换时操作非常昂贵image/png且速度太慢,在实践中使用(我不能转换到更快image/jpeg由于质量输出的不足我尝试了所有的设置)

  2. 当然,必须有一种方法来缩小图像的大小,而不必诉诸于单独的画布代码,然后手动进行转换以绘制到createjs Bitmap对象上?

我也尝试过:

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

但是,尽管速度非常快,但这似乎并不实际(在任何情况下,我都必须canvas每次都创建一个单独的元素来简化此操作。)

我想知道是否可以使用一种方法drawImage将位图的降采样版本直接绘制到createjs位图实例中,而不必通过单独的画布对象或转换为字符串?

如果我理解正确,那么内部就是createjscache属性的工作方式(即drawImage内部使用它来写入DisplayObject),但是我无法弄清楚自己如何使用它。

兰尼

您已使用createjs标记了该帖子easeljs,但是您的示例显示了用于缩放的普通Canvas上下文用法。

您可以使用scale参数onBitmap.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,因为它根本不起作用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用AngularJS和CreateJS预加载图像

来自分类Dev

使用PHP直接从URL调整图像大小

来自分类Dev

使用CSS调整大小和裁剪图像

来自分类Dev

如何使用PHP批量调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用javascript调整图像大小

来自分类Dev

使用URL调整WordPress中图像的大小

来自分类Dev

在Ubuntu上使用convert调整图像的大小

来自分类Dev

如何使用Bootstrap调整图像大小

来自分类Dev

调整NSAttributedString中使用的图像的大小

来自分类Dev

使用空白来源调整图像大小

来自分类Dev

使用位图调整大图像大小的OutOfMemoryException

来自分类Dev

上传前使用画布调整图像大小

来自分类Dev

使用Pillow Python调整图像大小

来自分类Dev

使用AlamofireImage调整下载图像的大小

来自分类Dev

使用CSS调整图像的裁剪部分的大小

来自分类Dev

使用ImageMagick和CloudConvert调整图像大小

来自分类Dev

如何使用python下载调整大小的图像?

来自分类Dev

使用CSS Grid调整图像大小

来自分类Dev

使用Shell脚本调整图像大小

来自分类Dev

使用GParted调整分区图像的大小?

来自分类Dev

如何使用createjs创建图像映射

来自分类Dev

如何使用PHP批量调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用imagemagick调整图像大小

来自分类Dev

使用Java调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用createjs / easyljs调整图像大小

来自分类Dev

使用 javascript 调整图像大小