[JQUERY] HTML5 캔버스 Todataurl은 공백을 반환합니다

HTML5 캔버스 Todataurl은 공백을 반환합니다

해결법

1. ---

   1.내 직감은 VAR ImageData =의 모든 것이 img.onload 함수로 들어가야합니다.

   내 직감은 VAR ImageData =의 모든 것이 img.onload 함수로 들어가야합니다.

   즉, 관련 부분에서 코드가 다음과 같습니다.

   img.onload = function() {
     canvas.width = width;
     canvas.height = height;
     ctx.drawImage(img, 0, 0, width, height);
   
     var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   
     document.body.appendChild(canvas); //picture gets uploaded                    
   
     // Generate the image data
   
     var Pic = canvas.toDataURL("image/png");
   
     console.log(Pic); // => returns base64 value which when tested equivalent to blank                              
     Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
   
     // Sending image to Server
     $.ajax({
       // …
     });
   };
   img.src = datauri;
   

   그 이유는 라인입니다

   ctx.drawImage(img, 0, 0, width, height);
   

   이미지가로드 된 후에 올바르게 실행됩니다. 그러나 불행히도이 줄이 실행될 때로드를 기다리지 않습니다.

   var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   

   모든 후속 라인.

   캔버스에 그릴 수 있도록 이미지를로드해야합니다. 캔버스는 getImageData를 호출하기 위해로드 된 이미지를 포함해야합니다.

from https://stackoverflow.com/questions/31193418/html5-canvas-todataurl-returns-blank by cc-by-sa and MIT license