使用画架保存旋转图像？

Question

我正在使用 easeljs 将位图图像加载到 canvas 上。我可以应用旋转，我想为该图像获取修改后的 dataUrl，以显示旋转。但是在使用 cache 或 getCacheDataURL?

时旋转似乎被忽略了

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

希望对您有所帮助。

使用画架保存旋转图像？

Saving rotated image with easeljs?

javascript

easeljs