Jak obrócić załadowany obiekt obrazu przed skalowaniem? - bitmapy, rotacji obrazów, easeljs, createjs

Używam EaselJS z plikiem obrazu załadowanym do mapy bitowej. Mam problemy z nakręceniem go w kolejności, w jakiej chciałbym. Oto przykład pracy z:

var bitmap = new createjs.Bitmap("image.png");
bitmap.rotation = -10;
bitmap.scaleX = 1.5;
bitmap.scaleY = 1.2;

To, co się dzieje, to obracanie skalowanego obrazu, a nie oryginału. Jakieś pomysły, jak obracać oryginalny obraz i skalować go? Chcę to zrobić programowo i nie mieszać się z plikiem obrazu surowego, właściwie to nie jest opcja z tym, co robię.

Odpowiedzi:

Używanie createjs.Bitmap do transformacji DisplayObject nigdy nie będzie manipulować oryginalnym obrazem, jeśli chcesz manipulować oryginalnym obrazem, musisz przejść przez natywny HTMLCanvas lub HTMLImage

Oto przykład skalowania oryginałuimage (dodając obrót powinien być tylko 3-4 liniami dodatkowymi), musiałbyś stworzyć swoją createjs.Bitmap z zwracanym odnośnikiem oczywiście, a nie z oryginalnym obrazem-łańcuchem źródłowym.

function nativeScale(img, scale)
{
var dst_canvas = document.createElement("canvas");
dst_canvas.width = Math.max(1,img.width * scale);
dst_canvas.height = Math.max(1,img.height * scale);
var dst_ctx = dst_canvas.getContext("2d");

dst_ctx.drawImage(img,0,0,dst_canvas.width,dst_canvas.height);

if ( typeof canvas.toDataURL == "undefined" ) return dst_canvas;

var img = new Image();
img.width = canvas.width;
img.height = canvas.height;
img.src = canvas.toDataURL("image/png");

return img;
}

Mam nadzieję że to pomogło. I jako dodatkowa uwaga: to będzie nie działa, gdy jest wykonywany przez lokalny system plików, można go uruchomić tylko przez serwer sieciowy (Online lub XAMPP), na przykład z powodu ustawień zabezpieczeń przeglądarki.