我应该如何裁剪图像在客户端使用jcrop和上传？ [英] How should I crop the image at client side using jcrop and upload it?

问题描述

我要做的是使用html fileupload控制选择图像，使用jcrop裁剪选择，在客户端裁剪图像，并上传图像。这里是小调链接 https://jsfiddle.net/govi20/spmc7ymp/

代码中使用的ID：



图片

照片文件上传控制

预览画布预览

clear_selection 按钮清除所选区域

设置jcrop。

 < script type =text / javascript> 
 jQuery（function（$）{
 
 var api; 
 
 $（'＃target'）。Jcrop（{
 // start off with jcrop-light class 
 bgOpacity：0.5，
 keySupport：false，
 bgColor：'black'，
 minSize：[240,320]，
 maxSize：[480,640] 
 onChange：updatePreview，
 onSelect：updatePreview，
 height：160，
 width：120，
 addClass：'jcrop-normal'
} （）{
 api = this; 
 api.setSelect（[0,0,240,320]）; 
 api.setOptions（{bgFade：true}）; 
 api.ui.selection .addClass（'jcrop-selection'）; 
}）; 
 
}）; 
  

清除选择。

  jQuery（'＃clear_selection'）。click（function（）{
 $（'＃target'）。Jcrop（{
 
 setSelect：[0， 0,0,0]，
}）; 
}）; 
 

在jcrop中显示上传的文件

  function readURL（input）{
 
 if（input.files&& input.files [0]）{
 var reader = new FileReader ）; 
 reader.onload = function（e）{
 $（'＃target'）。attr（'src'，e.target.result）; 
 setProperties（）; 
} 
 reader.readAsDataURL（input.files [0]）; 
} 
} 
 
 function setProperties（）{
 $（'＃target'）。Jcrop（{
 setSelect：[0,0,240,320] 
}）; 
} 
 $（＃photograph）。change（function（）{
 readURL（this）; 
}）; 
  

裁剪图像并将其分配给canvas（从stackoverflow上的一个线程获取） / p>



  function make_base（）{
 console.log（make_base called）; 
 var base_image = new Image（）; 
 base_image.src =''; 
 base_image.onload = function（）{
 context.drawImage（base_image，0，0）; 
} 
} 
 
 var canvas = document.getElementById（'preview'），
 context = canvas.getContext（'2d'）; 
 
 make_base（）; 
 function updatePreview（c）{
 console.log（called）; 
 if（parseInt（c.w）> 0）{
 //显示图像预览
 var imageObj = $（＃target）[0] 
 var canvas = $（＃preview）[0]; 
 var context = canvas.getContext（2d）; 
 context.drawImage（imageObj，c.x，c.y，c.w，c.h，0，0，canvas.width，canvas.height）; 
} 
}; 
  
 
 
 
 
 
 
 
我面对的问题： / p> 
 
 
 
 
 updatePreview函数在选择时未调用，因此无法显示画布。
 
 
 
 
 
 Canvas是HTML5元素，这意味着客户端应该具有html5兼容的浏览器，因此如何删除此条件。
 
 
 
 
解决方案
 Seahorsepip的答案太棒了。我对非后备答案做了很多改进。
 
 
 
  http://jsfiddle.net/w1Lh4w2t/  
 
 
 
我建议不要做那个奇怪的隐藏png的东西，当一个Image对象工作得很好只要我们不支持回退）。
  var jcrop_api; 
 var canvas; 
 var context; 
 var image; 
 var prefsize; 
  
虽然即使如此，你最好将数据从画布上
  function loadImage（input）{
 if（input.files &&& input.files [0]）{
 var reader = new FileReader（）; 
 reader.onload = function（e）{
 image = new Image（）; 
 image.src = e.target.result; 
 validateImage（）; 
} 
 reader.readAsDataURL（input.files [0]）; 
} 
} 
  
但是，如果你想要更多的功能，如果我们将jcrop附加到一个插入的画布（我们用jcrop刷新时销毁）。我们可以轻松地做任何事情，我们可以做一个画布，然后再次validateImage（），并有更新的图像可见的地方。
  function validateImage（）{
 if（canvas！= null）{
 image = new Image（）; 
 image.src = canvas.toDataURL（'image / png'）; 
} 
 if（jcrop_api！= null）{
 jcrop_api.destroy（）; 
} 
 $（＃views）。empty（）; 
 $（＃views）。append（< canvas id = \canvas\>）; 
 canvas = $（＃canvas）[0]; 
 context = canvas.getContext（2d）; 
 canvas.width = image.width; 
 canvas.height = image.height; 
 context.drawImage（image，0，0）; 
 $（＃canvas）。Jcrop（{
 onSelect：selectcanvas，
 onRelease：clearcanvas，
 boxWidth：crop_max_width，
 boxHeight：crop_max_height 
 }，function（）{
 jcrop_api = this; 
}）; 
 clearcanvas（）; 
} 
  
然后在提交我们提交任何挂起的操作，如applyCrop ），如果我们有那些需要的东西，为后备东西添加数据到隐藏字段。然后我们有一个系统，我们可以轻松地修改画布，以任何方式，那么当我们提交画布数据被正确发送。
  function applyCrop（）{
 canvas.width = prefsize.w; 
 canvas.height = prefsize.h; 
 context.drawImage（image，prefsize.x，prefsize.y，prefsize.w，prefsize.h，0，0，canvas.width，canvas.height）; 
 validateImage（）; 
} 
  
画布已添加到div视图。
 < div id =views>< / div> 
  
 
 
 
 
 
 
更新：修正将函数串在一起的代码基于image.onload函数，以便Firefox不会混乱。
 
What I am trying to do is select the image using html fileupload control, crop the selection using jcrop, crop image at client side and upload the image. Here is fiddle link https://jsfiddle.net/govi20/spmc7ymp/

Id's used in code:


target for jcrop image 

photograph fileupload control 

preview canvas preview

clear_selection button the clear the selected area
    
    
    

setting up the jcrop.
<script type="text/javascript">
jQuery(function($){

var api;

$('#target').Jcrop({
  // start off with jcrop-light class
  bgOpacity: 0.5,
  keySupport: false,
  bgColor: 'black',
  minSize:[240,320],
  maxSize:[480,640],
  onChange : updatePreview,
  onSelect : updatePreview, 
  height:160,
  width:120,
  addClass: 'jcrop-normal'
},function(){
  api = this;
  api.setSelect([0,0,240,320]);
  api.setOptions({ bgFade: true });
  api.ui.selection.addClass('jcrop-selection');
  });

});
for clearing the selection.
 jQuery('#clear_selection').click(function(){
  $('#target').Jcrop({    

      setSelect: [0,0,0,0],
    });
});
to display uploaded file in jcrop
function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#target').attr('src', e.target.result);
            setProperties();       
        }
        reader.readAsDataURL(input.files[0]);
    }
}

 function setProperties(){
   $('#target').Jcrop({         
              setSelect: [0,0,240,320]
        }); 
 }
 $("#photograph").change(function(){
    readURL(this);     
  });
to crop the image and assign it to canvas(got this from one of the threads on stackoverflow)
function make_base() {
    console.log("make_base called");
    var base_image = new Image();
    base_image.src = '';
    base_image.onload = function () {
        context.drawImage(base_image, 0, 0);
    }
}

var canvas = document.getElementById('preview'),
context = canvas.getContext('2d');

make_base();
function updatePreview(c) {
    console.log("called");
    if(parseInt(c.w) > 0) {
        // Show image preview
        var imageObj = $("#target")[0];
        var canvas = $("#preview")[0];
        var context = canvas.getContext("2d");
        context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
    }
};


Issues I am facing:

updatePreview function is not getting called on selection, hence no canvas is visible.
crop selection is not draggable (I am using bootstrap css).
Canvas is HTML5 element, that means client should have html5 compatible browser, so how can I remove this condition.

解决方案
Seahorsepip's answer is fantastic. I made a lot of improvements on the non-fallback answer.

http://jsfiddle.net/w1Lh4w2t/

I would recommend not doing that strange hidden png thing, when an Image object works just as well (so long as we're not supporting fallbacks).
var jcrop_api;
var canvas;
var context;
var image;
var prefsize;
Though even then we are, you're better off getting that data out of the canvas at the end and putting it in that field only at the end.
function loadImage(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      image = new Image();
      image.src = e.target.result;
      validateImage();
    }
    reader.readAsDataURL(input.files[0]);
  }
}
But, if you want more functions than just crop, if we attach the jcrop to an inserted canvas (which we destroy with the jcrop on refresh). We can easily do anything we can do with a canvas, then validateImage() again and have the updated image visible in place.
function validateImage() {
  if (canvas != null) {
    image = new Image();
    image.src = canvas.toDataURL('image/png');
  }
  if (jcrop_api != null) {
    jcrop_api.destroy();
  }
  $("#views").empty();
  $("#views").append("<canvas id=\"canvas\">");
  canvas = $("#canvas")[0];
  context = canvas.getContext("2d");
  canvas.width = image.width;
  canvas.height = image.height;
  context.drawImage(image, 0, 0);
  $("#canvas").Jcrop({
    onSelect: selectcanvas,
    onRelease: clearcanvas,
    boxWidth: crop_max_width,
    boxHeight: crop_max_height
  }, function() {
    jcrop_api = this;
  });
  clearcanvas();
}
Then on submit we submit any pending operations, like applyCrop() or applyScale(), adding data into hidden fields for fallback stuff, if we have those things needed. We then have a system we can easily just modify the canvas, in any way, then when we submit the canvas data gets sent properly.
function applyCrop() {
  canvas.width = prefsize.w;
  canvas.height = prefsize.h;
  context.drawImage(image, prefsize.x, prefsize.y, prefsize.w, prefsize.h, 0, 0, canvas.width, canvas.height);
  validateImage();
}
The canvas is added to a div views.
 <div id="views"></div>




Update: Fixed the code to string the functions together based on the image.onload functions so that Firefox doesn't mess up.

                        
这篇关于我应该如何裁剪图像在客户端使用jcrop和上传？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！