Verwenden Sie Cropit in Meteor js für Bildbeschneidung vor dem Hochladen per Schleuder

Question

Gibt es jemanden, der die Erfahrung der Verwendung von cropit mit Meteor hat?

Ich möchte die Bilder zuschneiden, bevor ich sie per Schleuder an S3 sende.

So installiere ich cropit mit

meteor add suxez:jquery-cropit

und basierend auf cropit der offiziellen Website, füge ich

<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> 

meiner Vorlage, und

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

meiner OnCreated funciton und fügen Sie

hinzu

'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); 
    }, 

zu meinem Vorlagenereignis. und schließlich

.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; 
} 

meiner CSS .... Allerdings ist es nicht funktionieren .... Ich habe versucht, das Bild hochladen, indem Sie den Upload-Button klicken, aber es gibt keine Vorschau ... und Export-Button funktioniert auch nicht .....

Könnte mir bitte jemand helfen ??? :)

Answer 1

können Sie croper js Datei

Datei Code eingeben hier verwendet cropper.js, cropper.min.js, cropper.css verwendet, 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"); 
    } 
}