在通过 slingshot 上传之前使用 Meteor js 中的 Cropit 进行图像裁剪

Posted 2023-02-25

【中文标题】在通过 slingshot 上传之前使用 Meteor js 中的 Cropit 进行图像裁剪

【英文标题】：Use Cropit in Meteor js for image cropping before upload via slingshot

【发布时间】：2016-07-25 23:42:09

【问题描述】：

有没有人有使用cropit和流星的经验？

我想在通过 slingshot 将图像发送到 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....但是，它根本不起作用.... 我尝试通过单击上传按钮上传图像， 但是没有预览...导出按钮也不起作用.....

谁能帮我解决这个问题？？？ :)

【问题讨论】：

浏览器的控制台有错误吗？

不是真的，有一个错误“无法解析 SourceMap：localhost:2323/packages/…”，但我认为它应该无关紧要。

我也尝试直接将cropit与一些静态html页面一起使用，它工作得很好，所以我认为问题出在我没有用Meteor设置好@@

通常说在onCreated回调中运行jquery插件不是最好的主意。 onCreated 在模板实例初始化但在渲染之前调用。所以元素.image-editor 可能在那个时候甚至还不存在。相反，您想使用 onRendered 回调来确保实际模板的 html 已经被渲染。

【参考方案1】：

你可以使用croper js文件

文件在这里输入代码使用cropper.js、cropper.min.js、cropper.css、cropper.min.css

<input id="file-upload" type="file" accept="image/*" />  
<canvas id="canvas"   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");
    

【讨论】：

请在此处添加有关您在做什么的更多说明。