输入文件在JCrop中显示实时选择的图像

我正在使用JCrop来调整图像大小和裁剪图像。

我想添加一个function，以便用户可以：

– 选择图像文件

– 使用jcrop进行编辑

-Upload而不更改页面

我可以单独完成所有这些，但是当我混合这些时，我会收到错误。

$('#target').attr('src', e.target.result); $('#target2').attr('src', e.target.result); 

现在的问题是，当我更改id“target”主图像的src位置时，它不会显示我的新图像。 但是，当我在id“target2”预览图像上执行此操作时，它会显示我的新图像并且我可以对其进行处理。（但是当我按下裁剪时不会裁剪新图像）

     function dudecmon(){ jQuery(function($){ // Create variables (in this scope) to hold the API and image size var jcrop_api, boundx, boundy, // Grab some information about the preview pane $preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'), xsize = $pcnt.width(), ysize = $pcnt.height(); console.log('init',[xsize,ysize]); $('#target').Jcrop({ onChange: updatePreview, onSelect: updatePreview, onSelect: updateCoords, aspectRatio: xsize / ysize },function(){ // Use the API to get the real image size var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; // Store the API in the jcrop_api variable jcrop_api = this; // Move the preview into the jcrop container for css positioning $preview.appendTo(jcrop_api.ui.holder); }); function updatePreview(c) { if (parseInt(cw) > 0) { var rx = xsize / cw; var ry = ysize / ch; $pimg.css({ width: Math.round(rx * boundx) + 'px', height: Math.round(ry * boundy) + 'px', marginLeft: '-' + Math.round(rx * cx) + 'px', marginTop: '-' + Math.round(ry * cy) + 'px' }); } }; }); };   function updateCoords(c) { $('#x').val(cx); $('#y').val(cy); $('#w').val(cw); $('#h').val(ch); }; function checkCoords() { if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; };   function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { //jcrop_api.setImage(e.target.result); $('#target').attr('src', e.target.result); $('#target2').attr('src', e.target.result); }; reader.readAsDataURL(input.files[0]); dudecmon(); } }    /* Apply these styles only when #preview-pane has been placed within the Jcrop widget */ .jcrop-holder #preview-pane { display: block; position: absolute; z-index: 2000; top: 10px; right: -280px; padding: 6px; border: 1px rgba(0,0,0,.4) solid; background-color: white; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2); } /* The Javascript code will set the aspect ratio of the crop area based on the size of the thumbnail preview, specified here */ #preview-pane .preview-container { width: 250px; height: 175px; overflow: hidden; }   
 
  
 
 
        

Answer 1

您可以使用：

  jcrop_api.setImage('/crop/demo_files/'+$("#btn_change").val()); 

以这种方式改变图片的缺点是，你无法正确预览图片。