在通过弹弓上传之前，在Meteor js中使用Cropit进行图像裁剪

Question

有没有和流星一起玩过cropit的人？

我想在我通过弹弓发送到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....However来说，它根本不起作用...我尝试通过点击上传按钮上传图像，但没有preview...and导出按钮也不起作用.....

谁能帮我一下？:)

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");
    }
}