imagecrop 微调图像的利器

小蓝 • 2024-12-12 13:14 • 编程

一、ImageCropper

ImageCropper是一个基于JavaScript的图像剪切工具，它是利用HTML5 Canvas实现的。用它来微调你的图像，可以达到很好的效果。ImageCropper可以用来剪切调整图像大小、旋转并多次保存。使用它可以得到像Photoshop中那样的微调体验。你可以在这里找到：https://fengyuanchen.github.io/cropperjs/

二、ImageCropper文档

在ImageCropper的官网上，你可以找到很多关于ImageCropper的文档。这些文档包括如下内容：

1、ImageCropper的安装和使用方式

  let cropper = new Cropper(image, {
    aspectRatio: 16 / 9,
    crop(event) {
      console.log(event.detail.x);
      console.log(event.detail.y);
      ...
    }
  });

2、API Reference

  cropper.rotateTo(90);

3、常见问题解答

4、关于ImageCropper的示例及其详细解析

三、ImageCropper.js

ImageCropper.js 是一个开源的 JavaScript 图像裁剪库。它可以用简单的方式实现图像的微调。在 ImageCropper.js 中，$().cropper() 方法是最常用的用于实例化 Cropper 插件的方法。也可以使用单例模式，在此方法的基础上通过 $.fn.cropper.noConflict() 方法的方法对 Cropper 变量进行重新定义。这些示例代码可以从 GitHub 上的 ImageCropper 库中找到。

四、ImageCrop使用说明

使用ImageCrop可以调整图片，对于图像裁剪、旋转、缩放及保存有较好的支持。ImageCrop内置了一些图像特效（例如灰度、黑白等），同时也支持使用SVG过滤器。ImageCrop还支持拖放图片，跨浏览器兼容性也非常好。

  let myImage = document.getElementById('myImage');
  let cropArea = document.getElementById('cropArea');
  let cropper = new ImageCrop(myImage, {
    cropArea: cropArea,
    zoom: true,
    effect: 'grayscale'
  });
  ...

五、ImageCrop如何去十字选取

在ImageCrop中，有两种方式可以选择十字：

1、按下十字形状的调整器并拖拽来更改裁剪区域尺寸

let cropper = new Cropper(image, {
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
  }
});

2、鼠标右键单击或滑动屏幕（移动设备上）以临时开启移动并调整选区。

两个简单步骤将选中选区：

1、将鼠标（或手指）悬停在选择器的一条边上。

2、双击引出的移动十字在图像上移动并调整选择区域大小和/或位置。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/246333.html