Comment faire pivoter un objet image chargé avant de le mettre à l'échelle? - bitmap, rotation d'image, easeljs, createjs

J'utilise EaselJS avec un fichier image chargé dans un bitmap. Je ne parviens pas à le faire pivoter dans l'ordre que je veux. Voici un exemple de ce avec quoi je travaille:

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

Ce qui se passe, c’est la rotation de l’image redimensionnée et non de l’original. Des idées sur la manière de faire pivoter l'image d'origine puis de la redimensionner? Je veux le faire par programme et ne pas endommager le fichier d’image brut, c’est en fait une option avec ce que je fais.

Réponses:

Utiliser createjs.Bitmap pour transformer un objet DisplayObject ne manipulera jamais l'image d'origine. Si vous souhaitez manipuler l'image d'origine, vous devrez passer par une image native. HTMLCanvas ou HTMLImage

Voici un exemple comment redimensionner un originalimage (l'ajout de la rotation ne devrait être que de 3 à 4 lignes supplémentaires), vous devez créer votre createjs.Bitmap avec la référence renvoyée, bien sûr, et non avec la chaîne image-source-originale.

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

J'espère que ça aide. Et comme note supplémentaire: cela ne pas Si vous travaillez avec un système de fichiers local, vous ne pourrez l’exécuter que sur un serveur Web (en ligne ou XAMPP, par exemple) grâce aux paramètres de sécurité du navigateur.