相关疑难解决方法(0)

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

Id用于代码: jcrop图像的

目标
图片 fileupload控件
预览画布预览
clear_selection按钮清除所选区域

设置jcrop.

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.Jcrop.js"></script>
<script src="./js/jquery.color.js"></script>

清除选择.

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

});

在jcrop中显示上传的文件

jQuery('#clear_selection').click(function(){
  $('#target').Jcrop({    

      setSelect: [0,0,0,0],
    });
});

裁剪图像并将其分配给画布(从stackoverflow上的一个线程获取此图像)

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader …

我正在尝试裁剪图像并将裁剪的数据发送到服务器端.我正在使用imgareaselect插件.我得到了选择的坐标,但无法裁剪图像.互联网上提供的所有解决方案都是使用css预览裁剪的图像.但是我怎样才能获得裁剪数据？无需预览裁剪后的图像.我的代码是

cropw = $('#cropimg').imgAreaSelect({
             maxWidth: 300, maxHeight: 300,
            aspectRatio: '1:1',
            instance: true,
            handles: true,
            onSelectEnd: function (img, selection) {                
            x1 = selection.x1;
            y1 = selection.y1;
            x2 = selection.x2;
            y2 = selection.y2;
    }
});