使用 jquery 图像裁剪器进行 Ajax 图像预览 [blob url]

Posted 2023-02-25

【中文标题】使用 jquery 图像裁剪器进行 Ajax 图像预览 [blob url]

【英文标题】：Ajax image preview with jquery image cropper [blob url]

【发布时间】：2015-08-10 05:08:35

【问题描述】：

我正在尝试使用 this ajax 图像预览 javascript sn-p 和 cropper image jquery 插件来创建 ajax 预览裁剪器。

到目前为止，我已经获得了图像预览，然后您可以单击预览并裁剪图像：http://codepen.io/anon/pen/oXmmEq?editors=101

我遇到的主要问题是说您想选择另一个图像进行裁剪。您之前选择的旧图像仍然存在。

我想要的是：

不必点击图片进行裁剪，只需在加载时立即进行裁剪 如果用户出错，可以预览另一张图片并对其进行裁剪。

我认为对于 2，您只需将图像裁剪器代码包装在一个函数中并执行以下操作：

function PreviewImage(no) 
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage" + no).files[0]);
oFReader.onload = function(oFREvent) 
  cropperCode(); // Wraps around image cropper code. Called when oFReader loads.
  document.getElementById("uploadPreview" + no).src = oFREvent.target.result;
;

编辑 我刚刚在cropper demo 中注意到它在被裁剪图像的右下角附近有一个上传图标。当我将鼠标悬停在它上面时，会显示“使用 Blob Urls 导入图像”

我认为这是代码：

    // Import image
var $inputImage = $('#inputImage');
var URL = window.URL || window.webkitURL;
var blobURL;

if (URL) 
  $inputImage.change(function () 
    var files = this.files;
    var file;

    if (!$image.data('cropper')) 
      return;
    

    if (files && files.length) 
      file = files[0];

      if (/^image\/\w+$/.test(file.type)) 
        blobURL = URL.createObjectURL(file);
        $image.one('built.cropper', function () 
          URL.revokeObjectURL(blobURL); // Revoke when load complete
        ).cropper('reset').cropper('replace', blobURL);
        $inputImage.val('');
       else 
        $body.tooltip('Please choose an image file.', 'warning');
      
    
  );
 else 
  $inputImage.parent().remove();

这里是the new codepen try

感谢您提供的任何帮助。

【问题讨论】：

首先我想知道图像什么时候会被裁剪。??你能这么说吗？

抱歉，Himesh，我不确定我是否理解？如果您询问图像何时被裁剪，那是在您选择要上传的图像之后。您可以在我展示的 codepen 示例中看到。

你没有显示完整的代码意味着提交调用或ajax调用在哪里。 >?

预览版？这应该就是全部了：pastie.org/10340951你可以在codepen上试试：codepen.io/anon/pen/oXmmEq?editors=101

【参考方案1】：

我需要添加另一个名为 tooltip 的 jquery 库。

添加库后，编辑中使用的 codepen 将起作用