html5 캔버스에 숨겨진 이미지 그리기

Question

캔버스에 사용자가 업로드 한 이미지를 그린 다음 이미지의 크기를 조정하여 아마존 S3에 보냅니다. 그러나 그려지는 동안 사용자에게 이미지를 보여주고 싶지는 않습니다. 숨겨진 상태로 유지하고 싶습니다. 이것이 가능한가? 나는 이것을 처리하기 위해 각도 j와 각도 업로드를 사용하고 있습니다. 두 번째 대안은 다소 멋있게 보이는 테이블에 이미지를 그리는 것이지만, 먼저이 이미지를 크랙 할 수 있는지 확인하고 싶습니다. 여기 코드는 다음과 같습니다

$scope.onFileSelect = function ($files) { 
     $scope.files = $files; 
     $scope.upload = []; 
     for (var i = 0; i < $files.length; i++) { 
      var fr = new FileReader(); 
      fr.onload = function (e) { 
       var img = new Image(); 
       var fileSent = false; 
       img.onload = function(){ 
        var MAXWidthHeight = 488; 
        var ratio = MAXWidthHeight/Math.max(this.width,this.height); 
        var w = Math.round(this.width * ratio); 
        var h = Math.round(this.height * ratio); 
        var c = document.createElement("canvas"); 
        c.width = w; 
        c.height = h; 
        c.setAttribute("hidden", true); 
        c.getContext("2d").drawImage(this,0,0,w,h); 
        this.src = c.toDataURL(); 
        if(!fileSent) { 
         sendToS3(c.toDataURL()); 
         fileSent = true; 
        } 
        document.body.appendChild(this); 
       } 
       img.src = e.target.result; 
      } 
      fr.readAsDataURL($files[i]); 
     } 
    }; 

Answer 1

그런 다음 사용하여 캔버스를 복사 두 번째 항상 숨겨진 캔버스에 먼저 그릴을 시도 할 수 있습니다 :

ctx = c.getContext("2d"); //I like to do this 
ctx.drawImage(canvasHidden,0,0,w,h); 

잘 모르겠어요 문제가 코드에서 발생하는 위치 . 캔버스의 너비 속성을 0으로 설정하면 보이지 않게되므로 숨기려고 시도해야합니다 ... 오버플로하는 이미지가있는 경우 잘 보이지 않습니다.