업로드하기 전에 이미지 미리보기 및 자르기

Question

내 사이트에 이미지 업로드 버튼이 있습니다. 이렇게하면 어떻게 동작할까요?

1. 사용자가 "파일 선택"버튼을 클릭하고 이미지를 선택합니다. http://www.jqueryrain.com/?BEAlLLl9
2. 사용자는 자르기 영역을 선택하고 "제출"안타 :
3. 이미지 (자바 스크립트을 FileReader API를 사용하여) 모든 제출
4. 자르기 플러그인이 예를 들어, 해당 이미지에 적용되기 전에 보여줍니다.

2 단계에서 3 단계까지 도움이 필요합니다. FileReader API를 사용하여 이미지를 올바르게 표시하는 문제는 base64로 인코딩 된 src 속성을 얻는 것입니다. 그리고 내가 사용한 이미지 자르기 플러그인은 src="" 속성을 유효한 것으로 인식하지 못하기 때문에 이미지를 올바르게 찾거나 초기화하거나 그릴 수 없습니다.

어떻게 1-4 단계를 수행 할 수 있습니까? 확실히 이것은 페이스 북과 같은 주요 사이트에서 이전에 수행 되었습니까? 그런 다음

var windowURL = $window.URL || $window.webkitURL; 
var imageUrl = windowURL.createObjectURL(imageFile); 

당신이 이미지를 가지고 :

Answer 1

http://html5.sapnagroup.com/demos/dragDropUploadsCrop/ 이 링크는 당신이 createObjectURL 방법을 사용할 수 있습니다 http://html5.sapnagroup.com/2012/08/preview-and-crop-before-upload/

Files with following extensions are only allowed 
        allowedExtensions: ['gif','jpg','jpeg','png','txt'], 
        showCropTool: 1, 
        sizeLimit: 10737418240, // Maximum filesize limit which works without any problems is 30MB. Current limit is set to 10MB = 10 * 1024 * 1024 
        params: { 
            'uploadedBy': 'Sapnagroup', 
            'x1': '0',  // x coordinates of the image 
            'y1': '0',      // x coordinates of the image 
            'x2': '300',    // x coordinates of the image 
            'y2': '150',    // y coordinates of the image 
            'cWidth': '300',        // required crop width 
            'cHeight': '150',       // required crop heignt 
            'oWidth': '800',        // width of the crop preview image 
            'oHeight': '600',       // height of the crop preview image 
            'rWidth': '300',        // resize width 
            'rHeight': '150'        // resize height 
        }, 

Answer 2

1. 가 선택한 파일의 미리보기를 표시하려면 원하는 것을 안내 할 것입니다 url 자르기 선택을위한 인터페이스를 표시 할 수 있습니다.

2. 캔버스를 사용하여 이미지를자를 수있는 영역을자를 때.

   function crop(image, x1, y1, x2, y2) { 
       var canvas = document.createElement('canvas'); 
   
       canvas.setAttribute('width', x2 - x1); 
       canvas.setAttribute('height', y2 - y1); 
   
       var context = canvas.getContext('2d'); 
       context.drawImage(image, -x1, -y1); 
   
       return canvas; 
   } 
   

3. 그 후 당신은 XHR2을 사용하여 서버에 업로드 할 수 있습니다 캔버스 (https://github.com/blueimp/JavaScript-Canvas-to-Blob)에서 이미지와 물방울을 얻을 수 있습니다.