자바 스크립트의 FileReader에서 크기가 조정 된 이미지 (카메라 등)를 업로드하고 싶습니다.

Question

카메라 또는 파일 탐색기에서 이미지를 가져올 수있었습니다.

이미지의 크기를 조정하는 동안 캔버스에로드 중입니다.

크기를 조정 한 이미지를 업로드하고 싶지만 보안 문제가 발생합니다.

reader.onload = function (event) 
{ 
    image.onload = function() 
    { 
     // resize ... 
     // canvas handling ... 

     var context = canvas.getContext("2d"); 

     context.drawImage(image, x, y, size, size, 0, 0, resize, resize); 

     var uri = canvas.toDataURL(); 
     var data = uri.replace(/^data:image\/(png|jpg);base64,/, ""); 

     $(input_file_selector).val(data); // << security error 
    } 

    //... 
}; 

파일로드 또는 카메라 캡처 -> 붙여 넣기 캔버스 크기를 조정하려면 -> 크기를 조정할 이미지 파일 업로드 ...

이 과정은 불가능하다?

Answer 1

물론 이전과 같이 context.drawImage의 크기 조정 버전을 사용할 수 있습니다. drawImage 매개 변수가 유효하다고 가정하면 코드 크기를 조정해야합니다.

하지만 ... 보안 오류는 일반적으로 도메인 간 이미지를 캔버스에 그려 넣은 결과입니다.

크로스 도메인 그리기는 캔버스를 오염시키고 canvas.toDataURL이 발생하지 않도록합니다. 헤더가 익명 액세스를 허용하고 이미지에서 익명 액세스를 허용하도록 자바 스크립트에서 지정하는 경우 교차 도메인 이미지를 업로드 할 수 있습니다. http://enable-cors.org/

다음은 FileReader를 사용하여 사용자가 이미지를 드롭 존으로 끌 수 있도록하는 예제입니다. 이미지 크기가 2 배로 조정되고 웹 페이지에 새 이미지로 추가됩니다.

// dropzone event handlers 
 
var dropzone; 
 
dropzone = document.getElementById("dropzone"); 
 
dropzone.addEventListener("dragenter", dragenter, false); 
 
dropzone.addEventListener("dragover", dragover, false); 
 
dropzone.addEventListener("drop", drop, false); 
 

 
// 
 
function dragenter(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
} 
 
// 
 

 
function dragover(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
} 
 

 
// 
 
function drop(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 

 
    var dt = e.dataTransfer; 
 
    var files = dt.files; 
 

 
    handleFiles(files); 
 
} 
 

 
// 
 
function handleFiles(files) { 
 

 
    for (var i = 0; i < files.length; i++) { 
 

 
    // get the next file that the user selected 
 
    var file = files[i]; 
 
    var imageType = /image.*/; 
 

 
    // don't try to process non-images 
 
    if (!file.type.match(imageType)) { 
 
     continue; 
 
    } 
 

 
    // a seed img element for the FileReader 
 
    var img = document.createElement("img"); 
 
    img.classList.add("obj"); 
 
    img.file = file; 
 

 
    // get an image file from the user 
 
    // this uses drag/drop, but you could substitute file-browsing 
 
    var reader=new FileReader(); 
 
    reader.onload=(function(aImg){ 
 
     return function(e) { 
 
     aImg.onload=function(){ 
 

 
      // draw the aImg onto the canvas 
 
      var canvas=document.createElement("canvas"); 
 
      var ctx=canvas.getContext("2d"); 
 
      canvas.width=aImg.width*2; 
 
      canvas.height=aImg.height*2; 
 
      ctx.drawImage(aImg,0,0,aImg.width,aImg.height,0,0,canvas.width,canvas.height); 
 

 
      // make the jpeg image 
 
      var newImg=new Image(); 
 
      newImg.onload=function(){ 
 
      newImg.id="newest"; 
 
      document.body.appendChild(newImg); 
 
      } 
 
      newImg.src=canvas.toDataURL('image/jpeg'); 
 
     } 
 
     // e.target.result is a dataURL for the image 
 
     aImg.src = e.target.result; 
 
     }; 
 
    })(img); 
 
    reader.readAsDataURL(file); 
 

 
    } // end for 
 

 
} // end handleFiles

body{ background-color: ivory; } 
 
canvas{border:1px solid red;} 
 
#dropzone{border:1px solid blue; width:300px;height:300px;}

<h4>Drag an image from desktop to blue dropzone.</h4> 
 
<div id="dropzone"></div> 
 
<div id="preview"></div>