聊一聊cropper.js

最新推荐文章于 2024-08-09 07:15:36 发布

红盖哇哈哈

最新推荐文章于 2024-08-09 07:15:36 发布

阅读量1.7k

点赞数 1

文章标签： vue.js canvas

本文链接：https://blog.csdn.net/weixin_45731450/article/details/113433730

版权

本文介绍了如何利用cropper.js插件快速实现前端图片裁剪功能。cropper.js是一个支持图片缩放、旋转、触摸操作的jQuery插件，通过canvas进行裁剪并获取裁剪后的base64串。文章详细讲解了安装、使用方法、配置参数，并提供了代码示例，强调了在处理跨源图片时的注意事项。

摘要由CSDN通过智能技术生成

最近的项目中有一个纯前端实现的功能困扰了我好久，就是用户上传图片以后需要用户进入图片裁剪页并完成上传的功能，一开始我是打算自己去用canvas去写这样一个页面的，但是项目开发周期短，任务紧，所以我就在网上各种扒资源，还真让我找到了这么一款神仙插件——cropper.js。

cropper.js

jQuery.cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。
在这里插入图片描述

官方地址：http://fengyuanchen.github.io/cropper/
官方文档：https://github.com/fengyuanchen/cropper/blob/master/README.md

接下来就让我们一起来聊聊这个插件：
在这里插入图片描述
这个是官方上给出的一张图，从图上不难看出这个插件实现的原理。
通过canvas实现图片裁剪，最后在通过canvas获取裁剪区域的图片base64串。
cropper提供了大量的参数、方法和事件供图片的剪裁操作。

安装

可以通过Bower或NPM来安装该插件。

bower install cropper
npm install cropper

使用方法

使用该图片剪裁插件首先要引入必要的js和css文件。

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

可以将图片或canvas直接包裹到一个块级元素中。

<!-- Wrap the image or canvas with a block element -->
<div class="container">
    <img src="picture.jpg">
</div>

可以使用$.fn.cropper方法来初始化该图片剪裁插件。

$('.container > img').cropper({
   
    aspectRatio: 16 / 9,
    crop: function(data) {
   
        // Output the result data for cropping image.
    }
});

注意：剪裁区域的尺寸继承自图片的父容器（包裹容器），所以要确保包裹图片的是一个可见的块级元素。输出的剪裁数据基于原始的图片尺寸，你可以使用这些数据直接剪裁图片。如果你要使用跨源图片来作为剪裁图片，请确保你的浏览器支持HTML5 CORS settings attributes，并且你的图片服务器支持Access-Control-Allow-Origin属性。

配置参数

cropper.js提供了一些可配置的参数用来实现一些裁剪框和图片的功能

可以通过$().cropper(options)方法来设置参数。如果你想改变全局默认参数，可以使用$.fn.cropper.setDefaults(options)方法。 
aspectRatio：类型：Number，默认值NaN。设置剪裁容器的比例。 
crop：类型：Function，默认值null。当改变剪裁容器或图片时的事件函数。 
preview：类型：String(jQuery选择器)，默认值”。添加额外的元素（容器）的预览。

现在我粘出我的代码，这里是一些参数的设置：

//创建dom
      this.createElement()
      //初始化裁剪对象
      this.cropper = new Cropper(this.preview, {
   
        aspectRatio: opt.aspectWithRatio / opt.aspectHeightRatio, // 裁剪框比例 默认NaN
        // aspectRatio: 1/1,
        autoCropArea: opt.autoCropArea || 0.8, // 默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。
        viewMode: 2, //显示模式
        guides: true, // 类型：Boolean，默认值true。是否在剪裁框上显示虚线。
        cropBoxResizable: true, //是否通过拖动来调整剪裁框的大小
        cropBoxMovable: true, //是否通过拖拽来移动剪裁框。
        dragCrop: false,
        dragMode: 'move', //‘crop’: 可以产生一个新的裁剪框3 ‘move’: 只可以移动3 ‘none’: 什么也不处理
        center: true, // 默认true  是否显示裁剪框 中间的+
        zoomable: true, //是否允许放大图像。
        zoomOnTouch: true, //是否可以通过拖动触摸来放大图像。
        zoomOnWheel: true, // 默认 true 是否允许鼠标滚轴 缩放图片
        rotatable: true, // 类型：Boolean，默认值true。是否允许旋转图片
        scalable: true,
        background: false, // 类型：Boolean，默认值true。是否在容器上显示网格背景
        checkOrientation: false,
        checkCrossOrigin: false, // 类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。
        toggleDragModeOnDblclick: true, // 认true .是否允许 拖动模式 “crop” 跟“move” 的切换状态。。即当点下为crop 模式，如果未松开拖动这时就是“move”模式。放开后又为“crop”模式
        ready: function () {
   
          if (opt.aspectRatio == 'Free') {
   
            let cropBox = _this.cropper.cropBox
            cropBox.querySelector('span.cropper-view-box').style.outline =
              'none'
            _this.cropper.disable()
          }
        },
      })

这些参数的说明我都一一的标在了后面，其中需要特别注意的是checkCrossOrigin这个参数，这个参数会检测图片的源，并且会调用一个Origin的接口，在项目中就很容易造成跨域的错误，这个参数的默认值是true,当时我用这个的时候就报了一堆length的错误，搞得我头大。。。

https://blog.csdn.net/qq727013465/article/details/51823231，当时我就是看了这篇文章，这篇文章上有详细的参数说明并且还有详细的使用代码。

下面这里有详细代码展示，仅供大家参考一下，

<!-- 这个图片剪裁插件，兼容ios与安卓 --> 
<template>
  <div>
    <input
      class="upload-img"
      type="file"
      name="file"
      ref="files"
      accept="image/*"
      @change="change($event)"
    />
  </div>
</template>
<script>
import Cropper from 'cropperjs'
// import Exif from 'exif-js'
export default {
   
  name: 'uploadpage',
  components: {
   },
  props: {
   
  },
  data() {
   
    return {
   
      widthRate: '650',
      heightRate: '800',
      rotateNum:0,//旋转的角度
    }
  },
  methods: {
   
    change(event) {
   
      this.clip(event, {
   
        aspectWithRatio: Number(this.widthRate),
        aspectHeightRatio: Number(this.heightRate),
      })
    },
    //初始化方法
    initilize(opt) {
   
      let _this = this
      this.options = opt
      //创建dom
      this.createElement()
      //初始化裁剪对象
      this.cropper = new Cropper(this.preview, {
   
        aspectRatio: opt.aspectWithRatio / opt.aspectHeightRatio, // 裁剪框比例 默认NaN
        // aspectRatio: 1/1,
        autoCropArea: opt.autoCropArea || 0.8, // 默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。
        viewMode: 2, //显示模式
        guides: true, // 类型：Boolean，默认值true。是否在剪裁框上显示虚线。
        cropBoxResizable: true, //是否通过拖动来调整剪裁框的大小
        cropBoxMovable: true, //是否通过拖拽来移动剪裁框。
        dragCrop: false,
        dragMode: 'move', //‘crop’: 可以产生一个新的裁剪框3 ‘move’: 只可以移动3 ‘none’: 什么也不处理
        center: true, // 默认true  是否显示裁剪框 中间的+
        zoomable: true, //是否允许放大图像。
        zoomOnTouch: true, //是否可以通过拖动触摸来放大图像。
        zoomOnWheel: true, // 默认 true 是否允许鼠标滚轴 缩放图片
        rotatable: true, // 类型：Boolean，默认值true。是否允许旋转图片
        scalable: true,
        background: false, // 类型：Boolean，默认值true。是否在容器上显示网格背景
        checkOrientation: false