javascript - 如何用jquery裁剪图像？

Question

我可以在没有 Canvas 的情况下裁剪图像吗？以及如何在不调整图像大小的情况下裁剪图像？喜欢这张真实的图片是133px x 133px

Large Image成为Small Image

Large Image成为Small Image

这是我的代码 https://jsfiddle.net/w26La1u6/2/

$(document).on('change', '#files', function(event) {
        var files = event.target.files; // FileList object
        var output = document.getElementById("list");

        for (var i = 0, f; f = files[i]; i++) {
                if (f.type.match('image.*')) {
                        if (this.files[0].size < 12097152) {
                                var reader = new FileReader();
                                reader.onload = (function(theFile) {
                                        return function(e) {
                                                var span = document.createElement('span');
                                                span.innerHTML = ['<img class="thumbnail" src="', e.target.result,
                                                        '" title="', escape(theFile.name), '"/>'
                                                ].join('');
                                                output.insertBefore(span, null);
                                        };
                                })(f);

                                $('#clear, #list').show();
                                reader.readAsDataURL(f);
                        } else {
                                alert("Image Size is too big. Minimum size is 2MB.");
                                $(this).val("");
                        }
                }
        }
})

但是如果没有其他方法可以不使用 Canvas 进行裁剪，请告诉我如何使用 Canvas 进行裁剪

编辑

<input id="uploadImage" type="file" accept="image/*" capture="camera" />
<img id="imgDisplay" src="http://placehold.it/300x200" alt="Not a kitten" />


var Resample = (function (canvas) {

    // (C) WebReflection Mit Style License

  function Resample(img, width, height, onresample) {

    var load = typeof img == "string",
    i = load || img;

    if (load) {
     i = new Image;
     // with propers callbacks
     i.onload = onload;
     i.onerror = onerror;
    }

    i._onresample = onresample;
    i._width = width;
    i._height = height;

    load ? (i.src = img) : onload.call(img);
   }

   function onerror() {
    throw ("not found: " + this.src);
   }

   function onload() {
    var
     img = this,
     width = img._width,
     height = img._height,
     onresample = img._onresample
    ;

    // Altered section - crop prior to resizing
    var imgRatio = img.width / img.height;
    var desiredRatio = width / height;
    var cropWidth, cropHeight;
    if (desiredRatio < imgRatio) {
      cropHeight = img.height;
      cropWidth = img.height * desiredRatio;
    } else {
      cropWidth = img.width;
      cropHeight = img.width / desiredRatio;
    }

    delete img._onresample;
    delete img._width;
    delete img._height;

    canvas.width = width;
    canvas.height = height;

    context.drawImage(
     // original image
     img,
     // starting x point
     0,
     // starting y point
     0,
     // crop width
     cropWidth,
     // crop height
     cropHeight,
     // destination x point
     0,
     // destination y point
     0,
     // destination width
     width,
     // destination height
     height
    );

    onresample(canvas.toDataURL("image/png"));
   }

    var context = canvas.getContext("2d"),
  round = Math.round;

  return Resample;

}(
 this.document.createElement("canvas"))
);

var newCropWidth = 133;
var newCropHeight = 133;

function loadImage(data) {
  document.querySelector('#imgDisplay').src = data;
}
function handleFileSelect(evt) {
  if (evt.target.files.length === 1) {
    var picFile = evt.target.files[0];

    if (picFile.type.match('image.*')) {
      var fileTracker = new FileReader;
      fileTracker.onload = function() {
        Resample(
         this.result,
         newCropWidth,
         newCropHeight,
         loadImage
       );
      }
      fileTracker.readAsDataURL(picFile);
    }
  }
}

document.querySelector('#uploadImage').addEventListener('change', handleFileSelect, false);

Answer 1

有多种方法可以使用 jQuery UI 来做到这一点，但您可以只使用其他人已经制作的插件，例如 Cropper