新手上路，请多包涵

我正在尝试裁剪图像并将裁剪后的数据发送到服务器端。我正在使用 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;
    }
});

原文由 Shahbaz Hashmi 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript jquery html

阅读 310

2 个回答

得票最新

社区维基

发布于
2022-12-12

✓ 已被采纳

嘿@Shahbaz 我正在尝试使用 cropper.js 为您提供解决方案。

这是你可以做的

从这里下载 cropper.js

 //link the  js files
<head>
  <script src="jquery.js"></script> // optional
  <link  href="cropper.min.css" rel="stylesheet">
  <script src="cropper.min.js"></script>
</head>

身体

<input type="file" name="image" id="image" onchange="readURL(this);"/>
<div class="image_container">
    <img id="blah" src="#" alt="your image" />
</div>
<div id="cropped_result"></div>        // Cropped image to display (only if u want)
<button id="crop_button">Crop</button> // Will trigger crop event

Javascript

 <script type="text/javascript" defer>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
            setTimeout(initCropper, 1000);
        }
    }
    function initCropper(){
        var image = document.getElementById('blah');
        var cropper = new Cropper(image, {
          aspectRatio: 1 / 1,
          crop: function(e) {
            console.log(e.detail.x);
            console.log(e.detail.y);
          }
        });

        // On crop button clicked
        document.getElementById('crop_button').addEventListener('click', function(){
            var imgurl =  cropper.getCroppedCanvas().toDataURL();
            var img = document.createElement("img");
            img.src = imgurl;
            document.getElementById("cropped_result").appendChild(img);

            /* ---------------- SEND IMAGE TO THE SERVER-------------------------

                cropper.getCroppedCanvas().toBlob(function (blob) {
                      var formData = new FormData();
                      formData.append('croppedImage', blob);
                      // Use `jQuery.ajax` method
                      $.ajax('/path/to/upload', {
                        method: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function () {
                          console.log('Upload success');
                        },
                        error: function () {
                          console.log('Upload error');
                        }
                      });
                });
            ----------------------------------------------------*/
        })
    }
</script>

希望这可以帮助。谢谢。

原文由 Siddhartha Chowdhury 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-12-12

根据接受的答案添加了这个，以防有人使用 jquery wrapper for cropper

 let ICropper = (function($) {
  let $cropperCanvasImage = $('#cropper-canvas-image');
  return {
    readUrl,
    cropImage
  }

  function readUrl(input) {
    if (input.files && input.files[0]) {
      let reader = new FileReader();
      reader.onload = function(e) {
        $cropperCanvasImage.attr('src', e.target.result)
      };
      reader.readAsDataURL(input.files[0]);
      setTimeout(initCropper, 1000);
    }
  }

  function initCropper() {
    $cropperCanvasImage.cropper({
      aspectRatio: 1 / 1
    });
  }

  function cropImage() {
    let imgUrl = $cropperCanvasImage.data('cropper').getCroppedCanvas().toDataURL();
    let img = document.createElement("img");
    img.src = imgUrl;
    $("#cropped-result").append(img);
  }
})(jQuery)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script name="jquery-croper-script">
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(require("jquery"),require("cropperjs")):"function"==typeof define&&define.amd?define(["jquery","cropperjs"],r):r(e.jQuery,e.Cropper)}(this,function(c,s){"use strict";if(c=c&&c.hasOwnProperty("default")?c.default:c,s=s&&s.hasOwnProperty("default")?s.default:s,c.fn){var e=c.fn.cropper,d="cropper";c.fn.cropper=function(p){for(var e=arguments.length,a=Array(1<e?e-1:0),r=1;r<e;r++)a[r-1]=arguments[r];var u=void 0;return this.each(function(e,r){var t=c(r),n="destroy"===p,o=t.data(d);if(!o){if(n)return;var f=c.extend({},t.data(),c.isPlainObject(p)&&p);o=new s(r,f),t.data(d,o)}if("string"==typeof p){var i=o[p];c.isFunction(i)&&((u=i.apply(o,a))===o&&(u=void 0),n&&t.removeData(d))}}),void 0!==u?u:this},c.fn.cropper.Constructor=s,c.fn.cropper.setDefaults=s.setDefaults,c.fn.cropper.noConflict=function(){return c.fn.cropper=e,this}}});
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.css" />

<input type="file" name="source-image" id="sourceImage" onchange="ICropper.readUrl(this);" />
<div class="image-container">
  <img id="cropper-canvas-image" src="#" alt="your image" />
</div>
<div id="cropped-result"></div>
<button onclick="ICropper.cropImage(this)">Crop</button>

原文由 Osvaldo Maria 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

使用坐标裁剪图像

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

问一个鼠标滚动事件，这种是怎么实现的？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译