首页 前端知识 Vue使用vue-img-cropper实现图片裁剪

Vue使用vue-img-cropper实现图片裁剪

2024-05-11 23:05:14 前端知识 前端哥 419 616 我要收藏
vue-img-cropper

vue-img-cropper是一个可以进行图片剪辑的插件,使用于vue
github地址:https://github.com/TonyXiang/vue-img-cropper

图片裁剪的基本原理
核心:借助canvas实现图片裁剪
处理思路
  • 首先创建canvas对像。

  • 指定canvas的高度宽度。

  • 计算原图需要剪切的相关参数。

  • 通过drawImage方法将需要的部分画上去。

  • 通过toDataURL方法获取图片base64的值。

  • 监听touch触摸方法,根据移动计算裁剪范围的变化,重新获取图片

关键方法

最主要的drawImage方法有一下传参方式:

  • drawImage(img, dx, dy)

  • drawImage(img, dx, dy, dw, dh)

  • drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)

各参数说明:
  • img:需要插入的img/video/canvas 元素。

  • dx/dy:canvas的开始绘制点位。

    import vueImgCroppe from 'vue-cropper';
    Vue.use(vueImgCroppe);

  • dw/dh:canvas的绘制区域大小。

  • sx/sy:image的开始绘制点位。

  • sw/wh:image的绘制区域大小。

安装
npm install vue-img-cropper -S
引入

main.js

import vueImgCroppe from 'vue-cropper';
Vue.use(vueImgCroppe);
参数
参数说明类型默认值
height可选,裁剪后图片的高度(单位px)Number500
width可选,裁剪后图片的宽度(单位px)Number500
maxSize可选,图片最大尺寸(单位:b)NumberNumber.MAX_VALUE
maxScale可选,图片最大的放大倍数Number4
compressionRatio可选,图片压缩比例,范围为:0~1Number0.92
footerHeight可选,裁剪页面底部栏的高度(单位px)Numberwindow.innerWidth * 0.1375
confirmBtnText可选,底部栏确认按钮文案String'选取'
cancelBtnText可选,底部栏取消按钮文案String'取消'
事件
事件名称说明回调参数
cutImg确认裁剪时触发base64格式的图片数据
oversize图片体积超过maxSize时触发Object: { fileSize, maxSize } ;(fileSize、maxSize为 Number 类型的数据,单位:b)
showLoading加载时触发--
hideLoading加载完成后触发--
showErrorErrorMsg, String'***'
方法
名称说明
getImg打开相册/相机
getImg

该方法是通过使用input实现对相机/相册的调用

<form ref="fileForm" hidden>
      <input
        ref="fileInput"
        type="file"
        accept="image/*"
        hidden="hidden"
        @change="changeFun"
        id="myInput"
      />
</form>
<div @click="getImg">
      <slot></slot>
</div>
getImg() {
      this.$refs.fileInput.click();
},
Slot
名称说明
(默认)触发打开相机/相册的按钮
代码实例
<vue-img-cropper
    ref="cropper"
    :height="800"
    :width="800"
    :maxScale="3"
    :compressionRatio="0.8"
    @cutImg="showCutImg"
    @showLoading="showLoading"
    @hideLoading="hideLoading"
    @showError="showError"
>
    <div class="cut-btn">图片裁剪</div>
</vue-img-cropper>
// 也可以调用组件的 getImg 方法来打开相册/相机
this.$refs.cropper.getImg()

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8157.html
标签
评论
发布的文章

JSON三种数据解析方法

2024-05-22 09:05:13

使用nvm管理(切换)node版本

2024-05-22 09:05:48

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!