vue封装原生的可预览裁剪上传图片插件H5,PC端都可以使用

已于 2024-02-29 12:04:55 修改
阅读量1.2k 收藏 25
点赞数 33
分类专栏： vue组件 文章标签： vue.js 前端 javascript
于 2024-02-26 10:20:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45636198/article/details/136292701
版权

  感谢大家的点赞和转发，欢迎大家关注本人的博客。试用期指导，项目开发，简历优化，毕业设计/论文，欢迎添加本人微信。

 新人作者，欢迎关注和收藏👏🏻👏🏻

思路：1.先做出一个上传的图片的上传区

<!-- 上传区 -->

    <label for="fileUp">

      <div class="upBorder">

        <img src="../assets/add.png" alt="" />

        <input

          ref="fileUp"

          type="file"

          id="fileUp"

          accept="image"

          style="display: none"

          @change="upload()"

        />

      </div>

    </label>

upload() {

    let that = this;

    console.log(this.$refs.fileUp.files);

    if (this.$refs.fileUp.files.length != 0) {

      const reader = new FileReader();

      reader.readAsDataURL(this.$refs.fileUp.files[0]);

      reader.onload = function () {

        const img = new Image();

        img.src = reader.result;

        that.fileList.push(reader.result);

        that.$refs.fileUp.value = null; //上传后重置上传input的value,这样才能同时上传相同的图片

        console.log(reader.result);

      };

      this.upLodaOk = true;

    }

  },

　给上传图片的input绑定上ref属性然后通过FileReader构造函数获取上传的文件。

 2.完成已上传文件的预览区域

<!-- 预览区域 -->

     <div

       class="preView"

       v-for="(i, index) in fileList"

       :key="index"

       ref="preList"

     >

       <div class="fileList" v-if="upLodaOk">

         <img

           src="../assets/remove.png"

           alt=""

           class="remove"

           @click="removeProp(index)"

         />

         <img

           :src="fileList[index]"

           alt=""

           class="img"

           @click="cut(index)"

           ref="imgitem"

         />

       </div>

     </div>

在upload方法中将通过FileReader构造函数获取上传的文件push到fileList数组中然后遍历渲染出已经上传的图片列表，并且给每一个图片绑定ref属性。 

3.完成图片删除的功能

<!-- 删除弹窗 -->
    <div
      class="prop"
      :style="{
        height: this.windowHeight + 'px',
        width: this.windowWidth + 'px',
      }"
      v-if="show"
    >
      <div class="text">
        <img
          src="../assets/remove.png"
          alt=""
          class="close"
          @click="removePropClose()"
        />
        <div>要删除这张照片吗</div>
        <div class="action">
          <button class="btn green" @click="removePropClose()">取消</button>
          <button class="btn blue" @click="remove()">确定</button>
        </div>
      </div>
    </div>

removeProp(index) {

   //v-for循环中的ref是个数组，根据index来取每一个对应的dom元素

   this.removeIndex = index;

   this.show = true;

 },

 removePropClose() {

   this.show = false;

 },

 remove() {

   this.fileList.splice(this.removeIndex, 1);

   this.$refs.fileUp.value = null; //删除后重置上传input的value,这样才能同时上传相同的图片

   console.log(this.$refs.fileUp.value);

   this.show = false;

 },

点击预览图片上的x会触发删除确认弹窗，在removeProp方法中将要删除的图片的Index接收并存储的removeIndex变量中，remove方法中将fileList数组中对应索引的元素去掉并且重置一下上传属性，也可以在每次上传后重置，并且关闭弹窗 

4.完成上传时的剪裁功能

<!-- 裁剪蒙层 -->
    <div
      class="prop center"
      v-if="cutProp"
      :style="{
        height: this.windowHeight + 'px',
        width: this.windowWidth + 'px',
      }"
    >
      <div v-html="pre" ref="preimg" class="imgContent"></div>
      <div class="cutHandler">
        <button class="btn green" @click="cancel()">取消</button>
        <button class="btn blue" @click="qdcut()">剪裁</button>
      </div>
    </div> 

cut(index) {

   this.selIndex = index;

   this.pre = `<img

         src="${this.fileList[index]}"

         alt=""

         class='cutImg'

       />`;

   this.cutProp = true;

   console.log(this.$refs);

   this.$nextTick(function () {

     console.log(this.$refs.preimg.firstChild); //使用nextTick,dom更新完成后才能获取到子节点

     this.myCropper = new Cropper(this.$refs.preimg.firstChild, {

       aspectRatio: 1 / 1,

       dragMode: "move",

       outputType: "png", //防止图片背景变黑

       crop(event) {

         console.log(event.detail.x);

         console.log(event.detail.y);

         console.log(event.detail.width);

         console.log(event.detail.height);

         console.log(event.detail.rotate);

         console.log(event.detail.scaleX);

         console.log(event.detail.scaleY);

       },

     });

   });

 },

 qdcut() {

   let cropBox = this.myCropper.getCropBoxData();

   console.log(this.myCropper.getCropBoxData()); //打印裁剪数据

   let cropCanvas = this.myCropper.getCroppedCanvas({

     width: cropBox.width,

     height: cropBox.height,

   }); //使用画布画出裁剪后的图片

   let imgData = cropCanvas.toDataURL(); //导出裁剪后图片的数据

   console.log(imgData);

   this.fileList.splice(this.selIndex, 1, imgData);

   console.log(this.fileList);

   this.cutProp = false;

 }, //确定裁剪

 cancel() {

   this.cutProp = false;

 }, //取消裁剪

　因为本次封装的是预览时裁剪的功能，所以裁剪的是点击预览列表中的文件触发的，cut方法将选择的图片的index存储selIndex变量中，然后通过v-html指令在剪裁弹窗中加载出对应的图片来进行裁剪，裁剪使用cropper.js来进行的，注意使用时要在this.$nextTick方法的回调中来进行剪裁函数的初始化，这样才能获取到通过v-html指令插入的图片。

　　选择合适的裁剪尺寸后点击确认才加调用qdcut方法，通过cropper.js的内置方法getCropBoxData()获取剪裁的数据，通过getCroppedCanvas()传入对应的数据然后导出剪裁后的图片，将fileList中对应的元素替换即可完成

6.下面附上整个代码，可以直接拿去使用： 

<template>
  <div>
    <!-- 裁剪蒙层 -->
    <div
      class="prop center"
      v-if="cutProp"
      :style="{
        height: this.windowHeight + 'px',
        width: this.windowWidth + 'px',
      }"
    >
      <div v-html="pre" ref="preimg" class="imgContent"></div>
      <div class="cutHandler">
        <button class="btn green" @click="cancel()">取消</button>
        <button class="btn blue" @click="qdcut()">剪裁</button>
      </div>
    </div>
    <!-- 删除弹窗 -->
    <div
      class="prop"
      :style="{
        height: this.windowHeight + 'px',
        width: this.windowWidth + 'px',
      }"
      v-if="show"
    >
      <div class="text">
        <img
          src="../assets/remove.png"
          alt=""
          class="close"
          @click="removePropClose()"
        />
        <div>要删除这张照片吗</div>
        <div class="action">
          <button class="btn green" @click="removePropClose()">取消</button>
          <button class="btn blue" @click="remove()">确定</button>
        </div>
      </div>
    </div>
    <!-- 上传区域 -->
    <div class="upContent">
      <!-- 预览区域 -->
      <div
        class="preView"
        v-for="(i, index) in fileList"
        :key="index"
        ref="preList"
      >
        <div class="fileList" v-if="upLodaOk">
          <img
            src="../assets/remove.png"
            alt=""
            class="remove"
            @click="removeProp(index)"
          />
          <img
            :src="fileList[index]"
            alt=""
            class="img"
            @click="cut(index)"
            ref="imgitem"
          />
        </div>
      </div>
      <!-- 上传区 -->
      <label for="fileUp">
        <div class="upBorder">
          <img src="../assets/add.png" alt="" />
          <input
            ref="fileUp"
            type="file"
            id="fileUp"
            accept="image"
            style="display: none"
            @change="upload()"
          />
        </div>
      </label>
    </div>
  </div>
</template>
<script>
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
export default {
  name: "upload",
  data() {
    return {
      cutProp: false,
      pre: "", //准备剪裁的图片
      selIndex: "", //选择照片的索引
      removeIndex: "", //准备删除的照片的索引
      show: false, //删除弹出层
      myCropper: null,
      afterImg: "",
      ingData: null,
      upLodaOk: false, //是否展示预览列表
      fileList: [], //已经上传图片的列表
    };
  },
  methods: {
    upload() {
      let that = this;
      console.log(this.$refs.fileUp.files);
      if (this.$refs.fileUp.files.length != 0) {
        const reader = new FileReader();
        reader.readAsDataURL(this.$refs.fileUp.files[0]);
        reader.onload = function () {
          const img = new Image();
          img.src = reader.result;
          that.fileList.push(reader.result);
          that.$refs.fileUp.value = null; //上传后重置上传input的value,这样才能同时上传相同的图片
          console.log(reader.result);
        };
        this.upLodaOk = true;
      }
    },
    removeProp(index) {
      //v-for循环中的ref是个数组，根据index来取每一个对应的dom元素
      this.removeIndex = index;
      this.show = true;
    },
    removePropClose() {
      this.show = false;
    },
    remove() {
      this.fileList.splice(this.removeIndex, 1);
      this.$refs.fileUp.value = null; //删除后重置上传input的value,这样才能同时上传相同的图片
      console.log(this.$refs.fileUp.value);
      this.show = false;
    },
    cut(index) {
      this.selIndex = index;
      this.pre = `<img
            src="${this.fileList[index]}"
            alt=""
            class='cutImg'
          />`;
      this.cutProp = true;
      console.log(this.$refs);
      this.$nextTick(function () {
        console.log(this.$refs.preimg.firstChild); //使用nextTick,dom更新完成后才能获取到子节点
        this.myCropper = new Cropper(this.$refs.preimg.firstChild, {
          aspectRatio: 1 / 1,
          dragMode: "move",
          outputType: "png", //防止图片背景变黑
          crop(event) {
            console.log(event.detail.x);
            console.log(event.detail.y);
            console.log(event.detail.width);
            console.log(event.detail.height);
            console.log(event.detail.rotate);
            console.log(event.detail.scaleX);
            console.log(event.detail.scaleY);
          },
        });
      });
    },
    qdcut() {
      let cropBox = this.myCropper.getCropBoxData();
      console.log(this.myCropper.getCropBoxData()); //打印裁剪数据
      let cropCanvas = this.myCropper.getCroppedCanvas({
        width: cropBox.width,
        height: cropBox.height,
      }); //使用画布画出裁剪后的图片
      let imgData = cropCanvas.toDataURL(); //导出裁剪后图片的数据
      console.log(imgData);
      this.fileList.splice(this.selIndex, 1, imgData);
      console.log(this.fileList);
      this.cutProp = false;
    }, //确定裁剪
    cancel() {
      this.cutProp = false;
    }, //取消裁剪
  },
  mounted() {},
  computed: {
    windowWidth() {
      return document.documentElement.clientWidth;
    },
    windowHeight() {
      return document.documentElement.clientHeight;
    },
  }, //监听屏幕的宽度和高度
};
</script>
<style>
.upBorder {
  width: 8rem;
  height: 8rem;
  border: 1px silver dashed;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upContent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img {
  width: 8rem;
  height: 8rem;
}

.fileList {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.remove {
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 0rem;
  right: 0rem;
  cursor: pointer;
}
.prop {
  vertical-align: middle;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.7);
}
.text {
  border-radius: 0.2rem;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  position: fixed;
  z-index: 1000;
  color: black;
  text-align: center;
  background-color: #fff;
  padding: 2rem 4rem;
  white-space: nowrap;
}
.close {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1rem;
  height: 1rem;
}
.action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}
.btn {
  font-size: 0.12rem;
  color: #fff;
  padding: 0.2rem 0.8rem;
}
.blue {
  background-color: #1989fa;
  border: 1px solid #1989fa;
}
.green {
  background-color: #07c160;
  border: 1px solid #07c160;
}
.cropper-point.point-se {
  width: 5px;
  height: 5px;
}
.cropper {
  position: fixed;
  top: 0;
  z-index: 999;
}

/* .cropper-container{
   top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
} */
.imgContent {
  width: 16rem;
  height: 16rem;
  display: inline-block;
  /* top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0); */
}
.cutImg {
  display: block;
  max-width: 100%;
}
.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cropper-bg {
  background: none;
}
.cutHandler {
  margin-top: 2rem;
  width: 16rem;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cropper-modal {
  background: rgba(0, 0, 0, 0);
}
</style>

运行截图：

 H5,PC端都可以使用

  感谢大家的点赞和转发，欢迎大家关注本人的博客。试用期指导，项目开发，简历优化，毕业设计/论文，欢迎添加本人微信。

 新人作者，欢迎关注和收藏👏🏻👏🏻

 觉得作者写的不错或者心情愉悦的老板也可以投币打赏，感谢观看，希望能给大家带来帮助 

 

Z编程
关注
  • 33
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue移动端裁剪图片结合插件Cropper的使用实例代码
08-30
Vue移动端裁剪图片结合插件Cropper的使用实例代码 本篇文章主要介绍了Vue移动端裁剪图片结合插件Cropper的使用实例代码，具有一定的参考价值。下面将详细讲解标题、描述、标签和部分内容中涉及到的知识点。 标题...
Vue.js图片预览插件使用详解
10-18
在Vue.js 中，有时候我们需要实现图片预览功能，这通常涉及到图片预览插件的使用。本文主要讲解了一款名为 "vue-picture-preview-extend" 的Vue.js 图片预览插件的使用方法。 首先，要安装这个插件，你可以通过npm...
H5端 图片裁剪插件cropperjs和vue-cropper
超级小恐龙~
09-26 2277
使用vue-cropper（https://github.com/xyxiao001/vue-cropper）移动端情况下裁剪的时候 会出现部分机型图片翻转以及拖动卡顿问题，直接改源码， 图片翻转问题可以解决在checkOrientationImage方法中注释掉h.rotate(90*Math.PI/180)即可。卡拖动顿问题 在 moveImg 和startMove 方法中加上 t.stopImmediatePropagation() 本地调试二次打开的时候出现卡死现象，lssues中也未能...
vue中上传图片并裁剪
qq_51538602的博客
08-30 1728
先安装 引用上传按钮 弹出的裁剪框 是参照这位博主的改进的 仅作为本人的学习积累笔记 如有侵权 私信我删除谢谢vue+element实现图片上传及裁剪功能（vue-cropper）_努力搬砖的阿一的博客-CSDN博客_element 图片裁切...
在Vue3中使用图片裁剪vue-cropper
最新发布
weixin_45653441的博客
05-23 228
【代码】在Vue3中使用图片裁剪vue-cropper。
vue 项目 el-upload vue-cropper 上传图片自动裁剪功能
weixin_44766849的博客
07-27 695
vue-cropper是一个可以进行图片剪辑的插件，使用于vue。1、下载vue-cropper。3、component引入组件。2、引用（组件引入）
vue-cropper-h5移动端实现拍照截取上传图片
Anthea_xm的博客
08-31 797
ps:因为我这里给了图片固定宽高，图片上传后会压缩就做了等比例缩放。只用给图片一个css属性：object-fit: contain即可。但是只能在img上生效，image、u--image这些都不行。3、使用：我这里是直接与img标签配合使用的一般是用组件库的upload配合使用或是与input的文件上传配合。1、下载vue-cropper-h5。2、在需要的页面引入。
推荐项目：Vue-Cropper-H5 - 精彩的Web图像裁剪解决方案
gitblog_00070的博客
03-30 592
推荐项目：Vue-Cropper-H5 - 精彩的Web图像裁剪解决方案 项目地址:https://gitcode.com/2277419213/vue-cropper-h5 项目简介 Vue-Cropper-H5 是一个基于 Vue.js 的轻量级图像裁剪组件，特别适合在H5页面中实现高质量的图片裁剪功能。它提供了丰富的API和配置选项，让你可以轻松定制你的裁剪体验。 技术分析 基于Vue.js...
vue3图片预览插件.zip
06-14
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，...
基于Vue的vue-img-cutter图片裁剪插件设计源码
05-23
vue-img-cutter是一个基于Vue开发的简单易用的图片裁剪插件，包含24个文件，其中包括7个JavaScript文件、3个Markdown文件、2个JSON文件、2个Vue文件、2个PNG图片文件、1个EditorConfig文件、1个Git忽略文件、1个NPM...
vue实现图片预览组件封装与使用
12-29
这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能，在父组件中每一张图片都可以实现图片放大查看。 子组件 <!--html部分--> <mt-swipe :auto=0 :show-indicators=false :...
多张图片上传插件
06-02
前端插件已经在项目中亲自实践，比较好用。类似与微信QQ的说说上传图片样式 记录博文：http://blog.csdn.net/java_huilong/article/details/72847980
flash图片上传插件
04-11
包含整理好的swfuploadv250.Net开发包，SWFUpload_v250_beta_3_samples，和一个asp.net+flash插件
百度图片上传插件
06-17
支持单、多文件上传，支持即时预览，支持删除
比较全的一个上传图片插件
08-02
一个比较全的上传图片插件，支持本地上传，摄像头拍照，图片剪切，简单易懂，附上一个自己在MVC中使用它的方法，一看就懂，很容易
单图片上传插件
09-30
设置单个图片上传插件 html5 jqury插件 非常好用的插件
H5，Vue，实现图片预览功能，可双击放大，复位，重置，双指放大缩小图片，使用 hammerjs插件
m0_55074611的博客
08-04 3523
H5，Vue，实现图片预览功能，可双击放大，复位，重置，双指放大缩小图片，使用 hammerjs插件
使用 jquery-file-upload 插件实现图片上传功能
@必意玲
02-16 8682
获取了文件框的元素 调用fileupload函数即可 只要引入了插件 jquery对象上都会有这个函数就可以调用。这里我用的 files.pic1 接收，所以客户端必须根据 pic1 传参数到服务端。jQuery File Upload 需要引入的包。
jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档
Python代码大全
12-14 1686
服务端处理没有特殊的限制，只要服务端接受file表单提交的数据处理后返回json格式数据，上传成功返回的json数据里必须含有code和src，其中code必须为200，src是上传后的图片url，上传失败返回的json数据里必须含有code和msg，其中code为错误码(不能是200)，msg为错误信息。jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档。以./upload1.php为例。程序包内含使用Demo。
Vue图片裁剪实战：vue-cropper插件使用与Base64转Blob解析
本文主要介绍了如何在Vue项目中使用vue-cropper插件进行图片裁剪，包括裁剪效果展示、遇到的问题以及解决方案，并提供了一份包含完整代码的裁剪组件示例。 在Vue.js开发中，有时候我们需要实现图片裁剪功能，vue-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值