javascript - 用画架保存旋转图像？

Question

我正在使用 easeljs 将位图图像加载到 Canvas 上。我可以应用旋转，并且我想获取该图像的修改后的 dataUrl，以显示旋转。但是使用 cache 或 getCacheDataURL 时旋转似乎被忽略？

示例代码 -- jsfiddle here

var stage = new createjs.Stage("canvas");

// Create an image.
var image = new Image();
// Since this sample is cross-domain, we must set this flag.
// Note that the origin server supports CORS.
image.crossOrigin = "Anonymous";
image.onload = createImage;
image.src = "http://playpen.createjs.com/CORS/duck.png";

// rotate the image
bmp.rotation = 45;

stage.addChild(bmp);

function createImage() {

  // Update the stage once to show the loaded image (at its native size)
  stage.update();

  // Cache the bitmap. This is necessary to create the cache-canvas.
    bmp.cache(0,0,image.width,image.height);

   // Note that if you update again, it will show the canvas image as blurred.
   //stage.update();

  // Get the cache-canvas's data url.
  var url = bmp.getCacheDataURL();

  // Create a new image with the data url, and add it to the body.
  var img2 = new Image();
  img2.src = url;
  document.body.appendChild(img2);
}

Answer 1

图像仅在其父上下文中旋转。旋转它不会改变源的方向，即使您缓存它也是如此。

这里是一个快速更新，其中位图被添加到容器中，并且容器而不是 bmp 被缓存。由于 bmp 在容器内旋转，因此它会按预期显示。

http://jsfiddle.net/ecwd5vdz/2/

var cont = new createjs.Container();
cont.addChild(bmp);
//
cont.cache(0,0,image.width,image.height);

希望有帮助。