前端vue-cropperjs实现图片裁剪方案

 更新时间:2022年07月08日 15:31:18   作者:竹业  
这篇文章主要为大家介绍了前端vue-cropperjs实现图片裁剪方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

做了个图片的裁剪的功能和预览的功能,前端图片的裁剪方案,大多数都是用cropperjs进行封装,npm上有vue-cropperjs可以直接用起来,viewerjs是用来实现图片的预览,这里直接使用了v-viewer来实现。

可以点击现在地址体验喔

git仓库地址 以及在线demo地址

图片裁剪

图片裁剪的流程

  • 首先使用el-upload组件,渲染已经存在或者裁剪过的图片
  • 点击文件上传,选中需要裁剪的图片
  • 弹出一个弹框,在弹框中使用vue-cropperjs实现图片裁剪
  • 裁剪完成后,通过回调函数,将处理后的图片文件(Blob格式)上传到服务器或者本地预览出来
  • 裁剪完成的图片列表,通过v-viewer实现点击全屏预览(辅助作用)

vue-cropperjs的使用

代码实现

  • 首先在组件注册VueCropper组件
  • 直接可以通过vue-cropper标签使用组件
  • 设置this.$refs.cropper.setAspectRatio(1)之后,图片只能按照一定的比例裁剪,想要随意裁剪可以不设置
  • 通过this.$refs.cropper.relativeZoom、this.onRotateDegreeChange、this.$refs.cropper.move、this.$refs.cropper.scaleX 等API,可以对图片进行平移、缩放、翻转、旋转等操作
  • 通过this.$refs.cropper.getCroppedCanvas().toBlob()获取到处理后图片的Blob格式文件
  • Blob格式文件处理成File格式后,上传到服务器
// 引入组件并注册
import "cropperjs/dist/cropper.css";
import VueCropper from "vue-cropperjs";

// 直接使用组件
<vue-cropper
  overflow-hidden
  ref="cropper"
  :src="src"
  preview=".preview"
  :minContainerHeight="500"
  background
  :ready="onReady"
/>

// 图片可以在onReady方法中设置裁剪的宽高比例
this.$refs.cropper.setAspectRatio(this.aspectRatioValue);

// 缩放图片
this.$refs.cropper.relativeZoom(percent);

// 图片旋转角度
this.onRotateDegreeChange(this.rotateDegree);

// 图片平移
this.$refs.cropper.move(offsetX, offsetY);

// 图片翻转
this.$refs.cropper.scaleX(scale);
this.$refs.cropper.scaleY(scale);

// 重置
this.$refs.cropper.reset();

// 获取修改后的图片的数据
  this.$refs.cropper
      .getCroppedCanvas({
        // 限制画布大小,限制生成的图片体积
        maxWidth: 2056,
        maxHeight: 2056,
      })
      .toBlob(
        (blob) => {
          // 调用确定的回调函数,将blob上传到服务器或者本地预览
          this.$emit("confirm", blob);
        },
        // 如果旋转角度不为直角,则图片一定会出现空白区域,空白区域默认透明,使用 png 格式
        //this.rotateDegree % 90 === 0 ? this.file.type : 'image/png',
        this.file.type,
        // 质量
        this.quality
      );
      
// 将文件上传到服务器
function onCropperConfirm(blob) {
    let file = new File([blob], filename, { type: blob.type,});
     const formData = new FormData();
     formData.append("file", file);
     // ...
     axios.post("/upload", formData).then((res) => {
          // ...
     })
}

实现效果

v-viewer的使用

代码实现

v-viewer主要的实现图片的全屏预览,基于viewerjs封装

  • 首先在main.js中引入css和注册v-viewer插件
  • 在页面中可以直接通过this.$viewerApi 调用,传入图片路径的数组和对应的索引,实现全屏预览图片
// 首先在main.js中引入组件
import "viewerjs/dist/viewer.css";
import VueViewer from "v-viewer";
Vue.use(VueViewer);

// 组件中使用
this.$viewerApi({
    options: {
      toolbar: true,
      initialViewIndex: 1,
    },
    images: [
        "https://placem.at/people?random=1&txt=0&w=500&h=500",
        "https://placem.at/people?random=1&txt=0&w=1000&h=500"
    ],
});

实现效果

参考资料

www.npmjs.com/package/v-v…

www.npmjs.com/package/vue…

推荐 js前端实现word excel pdf ppt mp4图片文本等文件预览

最后

图片剪裁使用插件实现的话,只能说CV工程师不要太爽,要了解原理的话,还是需要花费很多时间研究的;更多关于前端vue-cropperjs图片裁剪的资料请关注脚本之家其它相关文章!

相关文章

  • Vue Router4中params传参失效和报错问题的解决方法

    Vue Router4中params传参失效和报错问题的解决方法

    在使用vue-router4中params 进行路由组件之间传参,跳转页面接收不了并报错,本文给大家介绍了Vue Router4中params传参失效和报错问题的解决方法,需要的朋友可以参考下
    2024-03-03
  • 在Vue中使用Viser说明(基于AntV-G2可视化引擎)

    在Vue中使用Viser说明(基于AntV-G2可视化引擎)

    这篇文章主要介绍了在Vue中使用Viser说明(基于AntV-G2可视化引擎),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue前端el-input输入限制输入位数及输入规则

    vue前端el-input输入限制输入位数及输入规则

    这篇文章主要给大家介绍了关于vue前端el-input输入限制输入位数及输入规则的相关资料,文中通过代码介绍的介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue+ESLint 配置保存 自动格式化代码

    vue+ESLint 配置保存 自动格式化代码

    这篇文章主要介绍了vue+ESLint 配置保存 自动格式化代码的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Vue中android4.4不兼容问题的解决方法

    Vue中android4.4不兼容问题的解决方法

    这篇文章主要介绍了Vue中android4.4不兼容问题的解决方法,需要的朋友可以参考下
    2018-09-09
  • vue3.0 子组件如何修改父组件传递过来的值

    vue3.0 子组件如何修改父组件传递过来的值

    这篇文章主要介绍了vue3.0 子组件如何修改父组件传递过来的值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue项目优化的一些实战策略

    Vue项目优化的一些实战策略

    代码优化不仅仅局限在业务逻辑这块,像是代码复用、效率等等都是我们可以加以改进的地方,这篇文章主要给大家介绍了关于Vue项目优化的一些实战策略,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 手把手教你创建vue3项目的最佳方式

    手把手教你创建vue3项目的最佳方式

    如今的Vue3已经势不可挡,当然搭建一个全新的Vue3项目也有了全新的方式,下面这篇文章主要给大家介绍了关于如何手把手教你创建vue3项目的最佳方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 八种Vue组件间通讯方式合集(推荐)

    八种Vue组件间通讯方式合集(推荐)

    这篇文章主要介绍了八种Vue组件间通讯方式合集(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • vue-cli-service的参数配置过程

    vue-cli-service的参数配置过程

    这篇文章主要介绍了vue-cli-service的参数配置过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04

最新评论