vue插件vue-cropper的使用小计

2019-08-16 admin

首先需要下载插件,不需要多说npm install vue-cropper --save; 1.自己项目对应的页面进行引入import { VueCropper } from “vue-cropper”; 2.注册组件:components: { VueCropper }; 3.上传时调用该插件;我是借助elementUI的上传组件再加工处理的: 页面如下:

         <div class="home-tab-body-img">
          <div class="imgList" v-for="(item,index) in fileImgList" :key="index">
            <div class="imgList-delete" @click = "deleteImg(item)">
               <i class="el-icon-close" title="删除" ></i>
            </div>
            <img :src="getReadImg(item.filePath)" alt="" @click="handlePictureCardPreview(item.filePath)">
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="getReadImg(filePathAdd)" alt="">
            </el-dialog>
          </div>
          <el-upload
          :multiple="false"
          :show-file-list="false"
          class="editor-slide-upload"
          :before-upload="beforeAvatarUploadPS"
          list-type="picture-card"
          action
          :limit="3"
          >
            <i class="el-icon-plus"></i>
            <p>(最多3张)</p>
          </el-upload>
      </div>

    <!-- 剪切图片的弹框-->
    <div class="upload-dialog">
        <el-dialog title="图片裁剪" :visible.sync="isShowCropper" :close-on-click-modal="false">
          <div class="vue-cropper-box">
            <div class="vue-cropper-content">
                 <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="option.info"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                :fixedBox="option.fixedBox"
                @realTime="realTime"
                @imgLoad="imgLoad"
            ></vueCropper>
            </div>
            <div class="operate-wrap">
              <div class="lf">
                <el-button type="primary" plain @click="turnLeft">左旋转</el-button>
                <el-button type="primary" plain @click="turnRight">右旋转</el-button>
                <el-button type="primary" plain @click="changeScale(1)">放大</el-button>
                <el-button type="primary" plain @click="changeScale(-1)">缩小</el-button>
                <el-button type="primary" @click="onCubeImg">上传</el-button>
              </div>
              <div class="rt">
                <el-button type="primary" @click="cancleCropper">取消</el-button>
              </div>
            </div>

          </div>
        </el-dialog>
    </div>

vuecropper的基础配置:

    //裁剪组件的基础配置option
  option: {
            img: '', // 裁剪图片的地址
            info: true, // 裁剪框的大小信息
            outputSize: 1, // 剪切后的图片质量(0.1-1)
            full: true, // 输出原图比例截图 props名full
            outputType: 'png', // 裁剪生成额图片的格式
            canMove: true,  // 能否拖动图片
            original: false,  // 上传图片是否显示原始宽高
            canMoveBox: true,  // 能否拖动截图框
            autoCrop: true, // 是否默认生成截图框
            autoCropWidth: 740, // 默认生成截图框宽度
            autoCropHeight: 400, // 默认生成截图框高度
            fixedBox: true // 截图框固定大小
  },
  //切图尺寸是固定的,想可修改可把fixedBox设置为false

借助before-upload上传时调用vuecropper插件:

 beforeAvatarUploadPS(file) {
    if(this.imgLength > 2){
      this.$message({
                type: "warning",
                message: "效果图最多上传3张"
            });
      return false
    }
    this.option.img=URL.createObjectURL(file);
            const isDWG = file.name.split('.');
    const format = isDWG[isDWG.length - 1];
    this.uploadParams.isFile="1";
        // uploadParams.file="";
            if (format !="png" && format !="jpg") {
                        this.$message.error('上传文件只能是 png或jpg 格式!');
                        return false;
    }
    this.isShowCropper = true;
    // const dialog = new Promise((resolve,reject)=>{

    // });

    // return dialog
},
然后我加了几个剪切的按钮进行旋转或放大,并把上传方法一并粘贴到如下:

 turnLeft() {
  this.$refs.cropper.rotateLeft();
},
turnRight() {
  this.$refs.cropper.rotateRight();
},
cancleCropper() {//取消截图
  this.isShowCropper = false;
},
changeScale(num){
    num = num || 1; 
    this.$refs.cropper.changeScale(num); 
},
imgLoad (msg) { 
    console.log('imgLoad')
    console.log(msg) 
},
 // 实时预览函数 
realTime(data) { 
    console.log('realTime')
    this.previews = data 
}, 
onCubeImg() {//剪切上传
  // 获取cropper的截图的base64 数据
  this.$refs.cropper.getCropData(data => {
    // this.fileinfo.url = data;

    //先将显示图片地址清空,防止重复显示
    this.option.img = "";
    //将剪裁后base64的图片转化为file格式
    let file = this.convertBase64UrlToBlob(data);
    // this.fileImg=URL.createObjectURL(file);
    var formData = new FormData();
    formData.append("file", file);
    formData.append("isFile", '1');
    projectResource.uploadImg(this.prjID,formData).then(res=>{
        if(res.result == "0"){
          this.$message({
              type: "success",
              message: "上传成功"
          });
          this.fileTypeSearch();
          this.isShowCropper = false;
          // this.fileList=[{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
        }
    });
  });
},
// 将base64的图片转换为file文件
convertBase64UrlToBlob(urlData) {
  let bytes = window.atob(urlData.split(",")[1]); //去掉url的头,并转换为byte
  //处理异常,将ascii码小于0的转换为大于0
  let ab = new ArrayBuffer(bytes.length);
  let ia = new Uint8Array(ab);
  for (var i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob([ab], { type: "image/jpeg" });
},

处理完这些你就可以看看你的也页面了

clipboard.png

备注:vuecropper主要是 clipboard.png, 把需要的参数处理好,基本就算基础掌握该插件了

[转载]原文链接:https://segmentfault.com/a/1190000020082498

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72617.html

文章标题:vue插件vue-cropper的使用小计

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
回到顶部