精华内容
下载资源
问答
  • vue 图片剪裁插件
    千次阅读
    2019-02-01 16:31:37

    最近在用Vue做后台管理系统,需要用到图片剪裁的插件。之前用的element-ui的upload组件,但是这个不支持剪裁,在网上找了几个插件,最后决定用vue-image-crop-upload这个插件。还挺好用的,但是有一个问题,就是他不能按尺寸比例去剪裁,只能写剪裁后的图片的固定的宽和高才行。

    view视图这样写:

    其中width=320   height="180"就是固定的尺寸。

    <el-form-item label="封面图"
                        prop="coverImg"
                        hide-required-asterisk="false">
            <my-upload ref="uploader" field="file"
                       enctype="multipart/form-data"
                       :langExt="zh"
                       @crop-success="cropSuccess"
                       @crop-upload-success="cropUploadSuccess"
                       @crop-upload-fail="cropUploadFail"
                       v-model="show"
                       :withCredentials="withCredentials"
                       :no-circle="true"
                       :width="320"
                       :height="180"
                       :url="uploadImgUrl"
                       :params="params"
                       :headers="headers"
                       img-format="png"></my-upload>
            <el-button size="small"
                       type="primary"
                       @click="toggleShow">点击上传</el-button>
            <div class="">只能上传jpeg/jpg/png/gif格式的图片,且不超过5M</div>
            <img class="coverImg"
                 :src="detailRuleForm.coverImg">
          </el-form-item>

    data中代码:

    data(){
    
        return{
          show: false,
          withCredentials: true,
          params: {
            size: 5 * 1024 * 1024
          },
          headers: {
            smail: '*_~'
          },
          zh: {
            preview: '预览',
          }
        }
    
    
    }

     

    剪裁,剪裁成功,剪裁失败的函数代码:

    toggleShow () {
          this.show = !this.show;
        },
        /**
          * crop success
          *
          * [param] coverImg
          * [param] field
          */
        cropSuccess (coverImg, field) {
          // console.log('-------- crop success --------', coverImg + '---', field);
          this.detailRuleForm.coverImg = coverImg;
        },
        /**
         * upload success
         *
         * [param] jsonData  server api return data, already json encode
         * [param] field
         */
        cropUploadSuccess (jsonData, field) {
          console.log('-------- upload success --------', jsonData);
          // console.log('field: ' + field);
          if (jsonData.retCode === "00000") {
            this.detailRuleForm.coverImg = jsonData.vo.uploadUri
            //下面这个判断条件就是当上传成功后,不用用户手动再去关闭弹框,上传成功之后代码把其关闭
            if(this.$refs.uploader){
              this.$refs.uploader.off()
            }
          }
    
    
        },
        /**
         * upload fail
         *
         * [param] status    server api return error status, like 500
         * [param] field
         */
        cropUploadFail (status, field) {
          console.log('-------- upload fail --------');
          console.log(status);
          console.log('field: ' + field);
        }

    链接如下:

    https://www.npmjs.com/package/vue-image-crop-upload

    效果图如下:

    后来又找了一下,还有一个插件也比较火:

    https://github.com/xyxiao001/vue-cropper

     

    在此记录下,希望大家也能给我推荐比较实用或比较火的剪裁的插件。

    更多相关内容
  • vue图片裁剪插件vue-cropper

    千次阅读 2022-01-28 15:21:18
    vue-cropper插件的官网的地址: https://github.com/xyxiao001/vue-cropper 在线的demo展示: http://github.xyxiao.cn/vue-cropper/example/ 安装 npm install vue-cropper 使用 在需要的组件中直接引用,...

    vue-cropper插件的官网的地址:

    https://github.com/xyxiao001/vue-cropper

    在线的demo展示:

    http://github.xyxiao.cn/vue-cropper/example/

    安装

    npm install vue-cropper

    使用

    在需要的组件中直接引用,或者在main.js中

    import VueCropper from 'vue-cropper'
    Vue.use(VueCropper)

    组件内

    1.设置出一个点击展示裁剪组件的按钮

    el-button icon="el-icon-plus" style="padding:15px !important" @click="handleChangeImage"></el-button>
    <image-cropper :key="imagecropperKey" :width="300" :height="300" lang-type="zh" @close="close" />
    <img :src="imgUrl2" alt="" style="display:inline-block;width:45px;vertical-align: middle;"/>

     

    2.vue-cropper组件弹出层:

    <dialog-comp :is-show.sync="dialogFormVisible" :dialog-title="$t('common.direction')" :dialog-width="600" :dialog-height="450" dialog-unit="px" :iconWindow="'icon-ico_minglingxiafa_xuanzhong'">
        <label class="btn" for="uploads">选择图片</label>
        <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)" />
        <div style="padding:10px;display:flex">
          <div class="cut">
            <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"
              :canScale="option.canScale"
              :fixed="option.fixed"
              :centerBox="option.centerBox"
              :high="option.high"
              :mode="option.mode"
              :fixedNumber="option.fixedNumber"
              @realTime="realTime"
              @imgLoad="imgLoad"
            ></vueCropper>
          </div>
          <div class="show-preview" :style="{ overflow: 'hidden', margin: '5px' }">
            <div :style="previews.div" class="preview">
              <img :src="previews.url" :style="previews.img" />
            </div>
          </div>
        </div>
    
        <div class="dialog-footer" style="text-align:right">
          <el-button @click="closeCropper" size="small">取 消</el-button>
          <el-button type="primary" @click="finish('blob')" size="small">确 定</el-button>
        </div>
      </dialog-comp>

     3.js部分

    import { VueCropper } from "vue-cropper";
    // 官网地址https://github.com/xyxiao001/vue-cropper
    export default {
      components: {
        VueCropper,
      },
      data() {
        return {
          previews: {},
          model: false,
          modelSrc: "",
          fileName: "",
          imgFile: "",
          dialogFormVisible: false,
          option: {
            img: "",
            outputSize: 1, //剪切后的图片质量(0.1-1)
            full: false, //输出原图比例截图 props名full
            outputType: "png", //裁剪生成图片的格式
            canMove: true, //上传图片是否可以移动
            original: false, //上传图片按照原始比例渲染
            canMoveBox: false, //截图框是否可以拖动
            autoCrop: true, //是否默认生成截图框
            autoCropWidth: 200, //默认截图框宽度
            autoCropHeight: 200, //默认生成截图框高度
            fixedBox: false, //固定截图框大小
            fixedNumber: [1, 1], //截图框的宽高比例
            mode: "auto 200px", //图片默认渲染方式
            info: true, //裁剪框的大小信息
            canScale: true, //图片是否允许滚轮缩放
            fixed: true, //是否开启截图框宽高固定比例
            centerBox: true, //截图框是否被限制在图片里面
            high: true, //是否按照设备的dpr 输出等比例图片
          },
          imgUrl2: "",
          originIcon: "",
        };
      },
      methods: {
        closeCropper() {
          console.log("chufa");
          this.dialogFormVisible = false;
        },
        //上传图片(点击上传按钮)
        finish(type) {
          console.log(type);
          let selft = this;
          let formData = new FormData();
          // 输出
          if (type === "blob") {
            selft.$refs.cropper.getCropData((data) => {
              // console.log(this.$refs.cropper);
              // let img = window.URL.createObjectURL(data);
              let img = data;
              selft.model = true;
              selft.modelSrc = img;
              this.imageToCircle(img).then((res) => {
                //截出来的图片画成圆形
                selft.originIcon = res;
              });
              // 以下是上传的动作
             
            });
          } else {
            this.$refs.cropper.getCropData((data) => {});
          }
        },
        //选择本地图片
        uploadImg(e, num) {
          console.log("uploadImg");
          var selft = this;
          //上传图片
          var file = e.target.files[0];
          selft.fileName = file.name;
          if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
            alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
            return false;
          }
          var reader = new FileReader();
          reader.onload = (e) => {
            let data;
            if (typeof e.target.result === "object") {
              // 把Array Buffer转化为blob 如果是base64不需要
              data = window.URL.createObjectURL(new Blob([e.target.result]));
            } else {
              data = e.target.result;
            }
            if (num === 1) {
              selft.option.img = data;
            } else if (num === 2) {
              selft.example2.img = data;
            }
          };
          // 转化为base64
          reader.readAsDataURL(file);
          // 转化为blob
          // reader.readAsArrayBuffer(file);
        },
        imageToCircle(picUrl) {
          // 通过图片地址换出圆形的图片
          let radius, diameter, canvas, ctx;
          let img = new Image();
          img.setAttribute("crossOrigin", "anonymous"); // 解决图片跨域访问失败
          img.src = picUrl;
          return new Promise((reslove) => {
            img.addEventListener(
              "load",
              () => {
                let { width, height } = img;
                if (img.width > img.height) {
                  radius = height / 2;
                } else {
                  radius = width / 2;
                }
                diameter = radius * 2;
    
                canvas = document.createElement("canvas");
                if (!canvas.getContext) {
                  // 判断浏览器是否支持canvas,如果不支持在此处做相应的提示
                  console.log("您的浏览器版本过低,暂不支持。");
                  return false;
                }
                canvas.width = diameter;
                canvas.height = diameter;
    
                ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, diameter, diameter);
    
                // 描边
                ctx.save(); //save和restore可以保证样式属性只运用于该段canvas元素
                ctx.strokeStyle = "#eee"; //设置边线的颜色
                ctx.lineWidth = 2;
                ctx.beginPath(); //开始路径
                ctx.arc(radius, radius, radius - 5, 0, Math.PI * 2); //画一个整圆.
                ctx.stroke(); //绘制边线
    
                // 截圆形图
                ctx.save();
                ctx.beginPath();
                ctx.arc(radius, radius, radius - 5, 0, Math.PI * 2);
                ctx.clip();
    
                let x = 0,
                  y = 0,
                  swidth = diameter,
                  sheight = diameter;
    
                ctx.drawImage(img, x, y, swidth, sheight, 0, 0, diameter, diameter);
                ctx.restore();
                // toDataURL()是canvas对象的一种方法,用于将canvas对象转换为base64位编码
                let dataURL = canvas.toDataURL("image/png");
                reslove(dataURL);
              },
              false
            );
          });
        },
        show() {
          this.dialogFormVisible = true;
        },
        // 实时预览函数
        realTime(data) {
          // console.log("realTime");
          this.previews = data;
        },
        imgLoad(msg) {
          // console.log("imgLoad");
          console.log(msg);
        },
        listEvent() {
          this.app.$on("handle-change-image", this.show);
        },
        offEvent() {
          this.app.$off("handle-change-image", this.show);
        },
      },
      mounted() {
        this.listEvent();
      },
      beforeDestroy() {
        this.offEvent();
      },
    };

    展开全文
  • vue图片裁剪插件:vue-img-cutter vue-img-cutter 是一个简单易用的 vue 图片裁剪插件,支持旋转、缩放、平移,固定比例,固定尺寸,远程图片裁剪,只需要很少的代码就可以实现裁剪功能,也可以通过调整参数以适应...

    vue图片裁剪插件:vue-img-cutter

    vue-img-cutter 是一个简单易用的 vue 图片裁剪插件,支持旋转、缩放、平移,固定比例,固定尺寸,远程图片裁剪,只需要很少的代码就可以实现裁剪功能,也可以通过调整参数以适应你自己的业务需求

    特点:

    • 兼容IE9+,MSEdge,Chrome,Firefox
    • 两种展现形式,行内或弹窗
    • 可旋转、缩放图片
    • 任意比例、大小裁剪
    • 固定比例、大小裁剪
    • 支持远程图片裁剪、跨域设置

    使用:

    安装 vue-img-cutter

    npm install vue-img-cutter --save-dev

    在项目中使用

    • 在需要使用的页面中引入 vue-img-cutter,并注册成组件

    <script>
    //引入vue-img-cutter
    import ImgCutter from 'vue-img-cutter'
    
    export default {
        name: 'imgCutter',
        data() {
           return {
              
           }
        },
        //将vue-img-cutter注册成组件
        components:{
            ImgCutter
        }
    }
    </script>
    

    在页面中使用组件,并绑定 cutDown 事件,用来接收选择的图片信息

    <template>
       <div>
       	  //使用组件,并绑定cutDown事件
          <ImgCutter @cutDown="cutDown"></ImgCutter>
       </div>
    </template>
    
    <script>
    import ImgCutter from 'vue-img-cutter'
    
    export default {
        name: 'imgCutter',
        data() {
           return {
              
           }
        },
        components:{
            ImgCutter
        },
        methods: {
           //通过cutDown事件接收选择的图片信息
           cutDown(event) {
               console.log(event)
           }
        }
    }
    </script>
    

    组件参数选择:

     

    组件自定义插槽选项:

     

    组件钩子函数:

     cutDown 事件接收选择的图片的信息值(返回值):

     

     选择图片并裁剪需要的大小:

     确定后,cutDown 事件获取到的图片信息:

     

    展开全文
  • 一个vue图片裁剪组件,实现了缩放裁剪,自定义裁剪尺寸,以及iphone和部分安卓机型的照片角度纠正
  • 提供基本的图像处理工具(大小,模糊,对比度,灰度等)。
  • 基于vue图片裁剪插件vue-cropper

    万次阅读 热门讨论 2018-09-28 10:30:46
    我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了。有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的, 我这里采用了4:3的固定...

    我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了。有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的,

    我这里采用了4:3的固定比例进行裁剪,裁剪后的效果

    但是裁剪后的图片路径是base64,超级长的路径,最终还是需要处理地址传给后端的,项目用oss处理图片,最终获得一个类似于aad68a8fd577464dbcdead2e9b20084d这个的后缀传给后端,base64的路径有几万几十万个字符,传给后端会炸的吧。

    后来我通过oss进行处理,把base64的路径地址变成通过oss解析过的地址,但是!解析过的地址让我下载,下载的文件不是图片格式,记事本打开文件里面还是base64的路径,复制粘贴,没错,是裁剪之后的图片,这个问题暂时还没有解决,解决之后进行再回来修改。先附上代码吧。这里代码是比较全的,图片地址解析那一部分可以不用。

    以上问题以解决,base64转成blob格式就可以处理了,oss上传需要使用new Blob格式(2019/6/22更新)

    另外附上文档   https://github.com/xyxiao001/vue-cropper

    裁剪的vue文件:(已更新)

    先下载npm install vue-cropper --save

    <!-- 裁剪图片 -->
    <template>
      <div class="wrapper">
        <div class="model" v-show="model" @click="model = false">
          <div class="model-show">
            <img :src="modelSrc" alt="">
          </div>
        </div>
        <div class="content">
    
          <div class="show-info">
            <h2>自动生成截图框 固定比例 w : h => 4 : 3</h2>
            <div class="test">
              <vueCropper ref="cropper2" :img="example2.img " :outputSize="example2.size" :outputType="example2.outputType"
                :info="example2.info" :canScale="example2.canScale" :autoCrop="example2.autoCrop"
                :autoCropWidth="example2.autoCropWidth" :autoCropHeight="example2.autoCropHeight" :fixed="example2.fixed"
                :fixedNumber="example2.fixedNumber" :enlarge="4"></vueCropper>
            </div>
            <label class="btn" for="upload2">上传</label>
            <input type="file" id="upload2" style="position:absolute; clip:rect(0 0 0 0);"
              accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event,2)">
            <button @click="finish2()" class="btn">裁剪</button>
          </div>
        </div>
    
      </div>
    </template>
    
    <script>
      import { VueCropper } from 'vue-cropper'
      import * as OSS from 'ali-oss';
      export default {
        components: {
          VueCropper,
        },
        data() {
          return {
            model: false,
            modelSrc: '',
            crap: false,
            previews: {},
            form: {
              head: ''
            },
            example2: {
              //img的路径自行修改
              img: '$oss.url + \'/\' + form.head ',
              info: true,
              size: 1,
              outputType: 'jpeg',
              canScale: true,
              autoCrop: true,
              // 只有自动截图开启 宽度高度才生效
              autoCropWidth: 300,
              autoCropHeight: 250,
              fixed: true,
              // 真实的输出宽高
              infoTrue: true,
              fixedNumber: [4, 3]
            },
            downImg: '#'
          }
        },
        methods: {
          //点击裁剪,这一步是可以拿到处理后的地址
          finish2() {
            this.$refs.cropper2.getCropData((data) => {
              this.modelSrc = data
              this.model = false;
              //裁剪后的图片显示
              this.example2.img = this.modelSrc;
              // this.toBlob(data)
              // console.log(data)
              // console.log(this.toBlob(data))
    
              //阿里云处理图片,项目的接口,这里可以不用,上面的地址打印即为base64的地址
              this.$api.admin.url(data => {
                new OSS.Wrapper({
                  region: "oss-cn-hangzhou",
                  accessKeyId: data.accessKeyId,
                  accessKeySecret: data.accessKeySecret,
                  stsToken: data.securityToken,
                  // bucket: 'mybg'c
                  bucket: 'zhiyuan-hz'
                })
                  .put(data.key, this.toBlob(this.example2.img))
                  .then(data => {
                  console.log(data.url)
                  })
                  .catch(function (err) {
                    console.error("error: %j", err);
                  });
              });
            })
    
          },
    
          uploadImg(e, num) {
            //上传图片
            this.example2.img = ''
            var file = e.target.files[0]
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
              alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
              return false
            }
            var reader = new FileReader()
            reader.onload = (e) => {
              let data
              data = e.target.result
              if (typeof e.target.result === 'object') {
                // 把Array Buffer转化为blob 如果是base64不需要
                data = window.URL.createObjectURL(new Blob([e.target.result]))
              } else {
                data = e.target.result
              }
              if (num === 1) {
                this.option.img = data
              } else if (num === 2) {
                this.example2.img = data
              }
            }
            // 转化为base64
            // reader.readAsDataURL(file)
            // 转化为blobcs
            reader.readAsArrayBuffer(file)
          },
          // base64转blob
          toBlob(ndata) {
            //ndata为base64格式地址
            console.log(ndata)
            let arr = ndata.split(','),
              mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]),
              n = bstr.length,
              u8arr = new Uint8Array(n);
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
              type: mime
            })
          }
        },
    
      }
    </script>
    
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    
      .content {
        margin: auto;
        max-width: 585px;
        margin-bottom: 100px;
      }
    
      .test-button {
        display: flex;
        flex-wrap: wrap;
      }
    
      .btn {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #c0ccda;
        color: #1f2d3d;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 20px 10px 0px 0px;
        padding: 9px 15px;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
        background-color: #50bfff;
        border-color: #50bfff;
        transition: all .2s ease;
        text-decoration: none;
        user-select: none;
      }
    
      .des {
        line-height: 30px;
      }
    
      code.language-html {
        padding: 10px 20px;
        margin: 10px 0px;
        display: block;
        background-color: #333;
        color: #fff;
        overflow-x: auto;
        font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono;
        border-radius: 5px;
        white-space: pre;
      }
    
      .show-info {
        margin-bottom: 50px;
      }
    
      .show-info h2 {
        line-height: 50px;
      }
    
      /*.title, .title:hover, .title-focus, .title:visited {
            color: black;
        }*/
    
      .title {
        display: block;
        text-decoration: none;
        text-align: center;
        line-height: 1.5;
        margin: 20px 0px;
        background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
        color: transparent;
        -webkit-background-clip: text;
        background-size: 200% 100%;
        animation: slide 5s infinite linear;
        font-size: 40px;
      }
    
      .test {
        height: 285px;
      }
    
      .model {
        position: fixed;
        z-index: 10;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
      }
    
      .model-show {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
      }
    
      .model img {
        display: block;
        margin: auto;
        max-width: 80%;
        user-select: none;
        background-position: 0px 0px, 10px 10px;
        background-size: 20px 20px;
        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
      }
    
      .c-item {
        display: block;
        padding: 10px 0;
        user-select: none;
      }
    
      @keyframes slide {
        0% {
          background-position: 0 0;
        }
    
        100% {
          background-position: -100% 0;
        }
      }
    
      @media screen and (max-width: 1000px) {
        .content {
          max-width: 90%;
          margin: auto;
        }
    
        .test {
          height: 400px;
        }
      }
    </style>

     

     

    展开全文
  • 基于vue2.x的电商图片放大镜插件
  • 它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。Githubhttps://github.com/Vanthink-UED/vue-core-image-upload安装npm install vue-core-image-upload --s...
  • 插件演示地址 引用: npm i lrz -S // 注意:使用npm下载,不要使用cnpm下载,有坑 使用: import lrz from "lrz"; 本人使用的是Vant框架,获取file对象方法为: <van-field name="uploader" label="图片上传...
  • Vue 简单的图片区域裁切组件
  • Vue常用的插件集合

    2022-02-09 19:56:40
    element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material...
  • 安装该插件:npm install vue-cropper 结合el-element的上传组件 2.示例: 主页面 data(){ return { formData:{ currentBannerImg:"" }, isShowCropper :false, } } <el-upload class="avatar-uploader" ...
  • js(vue图片自动裁剪(适合高拍仪单据上传),只是做了简单的边缘获取逻辑处理,没有对图片的倾斜角度做矫正,以后可能会做,但是感觉不太好做。。。。。
  • 解决问题:使用exif.js来获取图像数据,然后进行处理 ** 1. 安装依赖 npm install exif-js --save 2. 获取图像数据 EXIF.getData(); 获取某个数据方向参数 EXIF.getTag(this, 'Orientation'); js完整代码如下,...
  • 基于vue和typescript开发的一款图片剪裁处理工具 优点:原生、轻量、使用简单、功能全面、扩展性强 目前功能:缩放、翻折、旋转、边缘校验、矩形剪裁、任意(椭)圆剪裁 关于缩放:鼠标(鼠标滚轮缩放)、触屏(双指...
  • 当鼠标经过头像的时候会出现个加号,我们先把外层的需求处理好,然后再处理弹窗打开,修改图片的部分 父页面 <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }"> <div class="ant-upload-...
  • Vue与VScode实用插件大全

    千次阅读 2022-04-13 12:28:39
    Vue以及VScode实用插件都在这里,千万不要错过!
  • vue.js图片处理组件 Vue头像编辑器 (vue-avatar-editor) Facebook like, avatar / profile picture component. This is Vue.js clone of mosch/react-avatar-editor Facebook喜欢,头像/头像图片组成。 这是mosch /...
  • vue-svgicon 一个创建 svg 图标组件的工具 官方文档:https://github.com/MMF-FE/vue-svgicon 使用方式 安装 // 安装到全局 npm install vue-svgicon -g // 安装到项目 npm install vue-svgicon --save-dev ...
  • Vue.js移动端图片压缩插件localResizeIMG

    千次阅读 2018-11-21 11:49:37
      为了降低类似问题带来的影响,我们采用Vue2.0压缩图片插件localResizeIMG(lrz),压缩图片。   大体的思路:每次拍照或选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localResizeIMG , 这个插件的...
  • vue实现图片预览功能,你知道了吗?
  • Vue实用插件大全 汇总

    2021-03-23 17:20:10
    vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 vue-blu - 帮助你轻松创建we
  • 主要介绍了Vue实现背景更换颜色操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 选择富文本插件的时候 还是选择了这个 所见即所得的富文本编辑器 tinymce 1.安装tinymce npm install tinymce -S npm install @tinymce/tinymce-vue -S 如果安装失败,或者报一个 Obj…啥的错误 也许是icon文件没...
  • 针对vue3+swiper7轮播插件的踩坑做一个记录,文中含已运行成功代码和注释。
  • vue2.0插件大全 UI组件开发框架实用库服务端辅助工具应用实例Demo示例 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 ...
  • Vue.js常用插件

    2021-06-17 21:24:34
    UI组件 element - 饿了么出品的Vue2...vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS 2组件框架 vonic - 快速构建移动端单页应用 eme
  • vue.js图片处理组件 Vue更大! (Vue It Bigger!) A simple image / video lightbox component for Vue.js. Based on vue-image-lightbox. Vue.js的简单图片/视频灯箱组件。 基于vue-image-lightbox。 View Demo ...
  • Vue入门、插件安装

    2020-12-21 11:15:02
    javascript技术文章开发Vue入门、插件安装 一、Vue1、什么是Vue?(1)官网地址: https://cn.vuejs.org/(2)Vue是一个渐进式的JavaScript框架。采用自底向上增量开发的设计。可以简单的理解为Vue是一个不断的去完善...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,012
精华内容 7,604
关键字:

vue图片处理插件