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

时间:2015-08-10 05:08:36

标签: javascript jquery ajax image

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

到目前为止,我得到了图像的预览,然后您可以点击预览并裁剪图像:http://codepen.io/anon/pen/oXmmEq?editors=101

我遇到的主要问题是你想要选择另一张图片来裁剪。您之前选择的旧图像仍然存在。

我想要的是:

  1. 无需点击图像进行裁剪,只需在加载时立即裁剪即可
  2. 如果用户犯了错误,可以预览其他图像并裁剪。
  3. 我想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

    感谢您提供的任何帮助。

1 个答案:

答案 0 :(得分:0)

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

添加库后,编辑中使用的编解码器将起作用