在通過彈弓上傳圖像之後，在Meteor js中使用Cropit

Question

是否有任何人有使用流星的經驗？

我想通過彈弓將圖像發送到S3之前裁剪圖像。

所以我安裝cropit與

meteor add suxez:jquery-cropit

，並根據cropit的官方網站，我想補充

<div class="image-editor"> 
        <input type="file" class="cropit-image-input"> 
        <div class="cropit-preview"></div> 
        <div class="image-size-label"> 
         Resize image 
        </div> 
        <input type="range" class="cropit-image-zoom-input"> 
        <button class="rotate-ccw">Rotate counterclockwise</button> 
        <button class="rotate-cw">Rotate clockwise</button> 

        <button class="export">Export</button> 
       </div> 

我的模板，

Template.XXXXXX.onCreated(function() { 
    $('.image-editor').cropit({ 
     exportZoom: 1.25, 
     imageBackground: true, 
     imageBackgroundBorderWidth: 20, 
     imageState: { 
      src: 'http://lorempixel.com/500/400/', 
     }, 
    }); 

我onCreated功能可按，並添加

'click .rotate-cw': function() { 
     $('.image-editor').cropit('rotateCW'); 
    }, 
    'click .rotate-ccw': function() { 
     $('.image-editor').cropit('rotateCCW'); 
    }, 
    'click .export': function() { 
     var imageData = $('.image-editor').cropit('export'); 
     window.open(imageData); 
    }, 

我的模板事件。最後

.cropit-preview { 
    background-color: #f8f8f8; 
    background-size: cover; 
    border: 5px solid #ccc; 
    border-radius: 3px; 
    margin-top: 7px; 
    width: 250px; 
    height: 250px; 
} 
.cropit-preview-image-container { 
    cursor: move; 
} 
.cropit-preview-background { 
    opacity: .2; 
    cursor: auto; 
} 
.image-size-label { 
    margin-top: 10px; 
} 
input, .export { 
    /* Use relative position to prevent from being covered by image background */ 
    position: relative; 
    z-index: 10; 
    display: block; 
} 
button { 
    margin-top: 10px; 
} 

我的CSS ....但是，這並不在所有的工作.... 我試圖通過點擊上傳按鈕， 上傳圖片，但沒有預覽...和出口按鈕不工作......

任何人都可以幫助我，請這？ :)

Answer 1

你可以使用croper js文件

文件在這裏輸入的代碼中使用cropper.js，cropper.min.js，cropper.css，cropper.min.css

<input id="file-upload" type="file" accept="image/*" /> 
<canvas id="canvas" height="5" width="5" style="display: none;"></canvas> 
<img id="target" style="max-width: 100%" /> 

<button name="Save" value="Save" id="Save">Save</button> 


    'change #file-upload' :function(e) 
    { 

    encodeImageFileAsURL(); 
    function encodeImageFileAsURL() 
    { 
    var filesSelected = document.getElementById("file-upload").files; 
    if (filesSelected.length > 0) 
    { 
     var fileToLoad = filesSelected[0]; 
     var fileReader = new FileReader(); 
     fileReader.onload = function(fileLoadedEvent) 
     { 

      $('#photos').hide(); 
      $('#crops').show(); 
      document.getElementById('target').src=""; 

      document.getElementById('target').src=fileLoadedEvent.target.result; 
      $('#target').cropper(
      { 
       aspectRatio: 1/1, 
       minCropBoxWidth : 150, 
       minCropBoxHeight :150, 
       crop: function(e) 
       { 

       // console.log(e.x); 
       // console.log(e.y); 
       // console.log(e.width); 
       // console.log(e.height); 
       // console.log(e.rotate); 
       // console.log(e.scaleX); 
       // console.log(e.scaleY); 

       $('#imgX1').val(e.x); 
       $('#imgY1').val(e.y); 
       $('#imgWidth').val(e.width); 
       $('#imgHeight').val(e.height); 
       $('#imgrotate').val(e.rotate); 
       $('#imgscaleX').val(e.scaleX); 
       $('#imgscaleY').val(e.scaleY); 
       } 
      }); 
     } 


    fileReader.readAsDataURL(fileToLoad);}} 
    }, 
    'click #Save' : function(e) 
    { 
    e.preventDefault(); 
    var photoid = $('#photoid').val(); 
    var x1 = $('#imgX1').val(); 
    var y1 = $('#imgY1').val(); 
    var width = $('#imgWidth').val(); 
    var height = $('#imgHeight').val(); 
    var rotate = $('#imgrotate').val(); 
    var scaleX = $('#imgscaleX').val(); 
    var scaleY = $('#imgscaleY').val(); 

    var canvas = $("#canvas")[0]; 
    var context = canvas.getContext('2d'); 
    var img = new Image(); 
    img.src = $('#target').attr("src"); 
    img.onload = function() `enter code here` 
    { 
     canvas.height = height; 
     canvas.width = width; 
     context.drawImage(img, x1, y1, width, height, 0, 0, width, height); 
     var dataURL = canvas.toDataURL("image/jpeg"); 
    } 
}