로드 된 이미지 객체를 크기를 조정하기 전에 회전하는 방법은 무엇입니까?

Question

이미지 파일을 비트 맵에로드 한 상태로 EaselJS를 사용하고 있습니다. 내가 원하는대로 순서를 바꾸는 데 어려움을 겪고 있습니다.

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

무엇 일어나는 것은이 조정 된 이미지가 아닌 원본을 회전하는 것입니다 : 여기에 내가 함께 일하고 있어요 무엇의 예입니다. 원본 이미지를 회전 한 다음 크기를 조정하는 방법에 대한 아이디어가 있습니까? 프로그래밍 방식으로 처리하고 원본 이미지 파일을 엉망으로 만들고 싶지는 않습니다. 실제로 내가하고있는 것에 대한 옵션이 아닙니다. 당신은 당신이 여기에 기본 HTMLCanvas 또는 HTMLImage

통과해야 원본 이미지를 조작 할 경우, 원본 이미지를 조작하지 않을 것 DisplayObject를 변환하는 createjs.Bitmap를 사용

Answer 1

어떻게 원래의 크기를 조절하는 예입니다 이미지를 추가하려면 회전을 3-4 추가 선으로 만들어야합니다. 원래 image-source-string이 아닌 반환 된 참조가있는 createjs.Bitmap을 만들어야합니다.

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

나는 도움이되기를 바랍니다. 추가 참고 사항 : 은 로컬 파일 시스템을 통해 실행될 때이 아니기 때문에 브라우저의 보안 설정으로 인해 웹 서버 (예 : 온라인 또는 XAMPP)를 통해서만 실행할 수 있습니다.