Question

我正在使用easeljs将位图图像加载到画布上。我可以应用旋转，我想获得该图像的修改后的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

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

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

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

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

希望有所帮助。

用easeljs保存旋转的图像？

1 个答案: