jquery图片裁剪插件_使用这个简单的jQuery插件裁剪和调整图像大小

借助 jQuery之类的库， 动态图像裁剪比以往更加轻松。 该代码库易于使用，社区中有成千上万的用于处理图像的插件。

这样的插件之一就是Cropper ，这是一个免费的开源图像裁剪解决方案，可以处理缩放 ， 裁剪甚至保存图像 。

该项目可在GitHub上有几十个自定义功能一定很长的文档。

Cropper为您（开发人员）提供了对界面各个方面的完全控制。 您可以使用Cropper插件中内置的30多种不同选项和20多种自定义方法 。

它完全是触摸感应的 ，因此可以在所有移动设备上使用，并支持滚轮/触控板，用于放大和缩小照片。 用户可以在裁剪之前翻转 ， 旋转 ， 缩放和重新定位照片在画布上的任何位置。

Cropper插件需要jQuery的副本，并且附带两个文件 ：CSS样式表和JavaScript插件库。 只需将这些文件添加到您的页面，就可以了！

请记住，该工具具有许多功能。 联机文档可以提供帮助，但是您需要动手设置自己的图像上传字段，以了解所有内容。 他们的示例代码只是将所有内容输出到控制台 ，看起来像这样：

$('#image').cropper({
  aspectRatio: 16 / 9,
  crop: function(e) {
    // Output the result data for cropping image.
    console.log(e.x);
    console.log(e.y);
    console.log(e.width);
    console.log(e.height);
    console.log(e.rotate);
    console.log(e.scaleX);
    console.log(e.scaleY);
  }
});

但是，您确实应该偷看现场演示，以了解其工作原理。

您可以找到X / Y坐标的实时输出数据以及顶部附近的图像尺寸 。 Cropper还包括一个上传功能 ，用户可以在其中从计算机中选择图像，然后直接在浏览器中开始裁剪。

实时缩略图会在角落更新 ，因此您可以在保存之前查看最终结果。 更改宽高比 ， 输出质量 ， 默认的裁剪位置以及更多其他内容。

翻译自: https://www.hongkiat.com/blog/image-cropping-jquery-plugin-cropper/