精华内容
下载资源
问答
  • Vue.use(window['vue-cropper'].default) nuxt 使用方式 if(process.browser) { vueCropper = require('vue-cropper') Vue.use(vueCropper.default) } <vueCropper ref="cropper" :img="option.img" :...
  • Vue Avatar Cropper A simple and elegant avatar cropping and upload plugin. Installing $ npm i vue-avatar-cropper Usage <template> <div class="text-center"> <img v-if="userAvatar...
  • vue-cropper vue-image-crop-upload 这两种的样式分别如下所示: 首先是vue-image-crop-upload,我们能够发现其实这个截图有点类似于我们需要裁减头像的时候,才需要使用的,而针对于特定的矩形,可能没办法达到...

    前言

    这两天想给图片添加一个图片裁剪的功能,因为之前的图片都是直接上传的,很多图片肯定在前台显示的时候,都不能很好的达到我们想要的效果,因此就需要我们在对个别图片进行细微调整,已达到我们的目的。

    图片裁剪

    关于图片裁剪我在github中找到了两种

    • vue-cropper
    • vue-image-crop-upload

    这两种的样式分别如下所示:

    首先是vue-image-crop-upload,我们能够发现其实这个截图有点类似于我们需要裁减头像的时候,才需要使用的,而针对于特定的矩形,可能没办法达到我们的效果

    其次我们再看 vue-cropper图片裁剪,它是可以根据我们的实际需求进行裁剪,所以综上可能下面这块比较适合现在的项目需求,但是我们也可以使用上面的这款作为头像裁剪的组件。

    裁剪后的效果:

    引入Vue-cropper

    安装依赖

    npm install vue-cropper --save
    

    页面引入

    import { VueCropper } from 'vue-cropper'
    

    申明组件

     components: {
        VueCropper,
     },
    

    完整代码

    <!-- 裁剪图片 -->
    <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))
    
              //将图片上传服务器中
    
            })
    
          },
    
          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>
    
    展开全文
  • vue-cropper图片裁剪插件,axios发送请求 用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vue文件里cropperjs的使用方法和经验教训总结
  • vue图片裁剪vue-cropper

    2020-12-01 18:17:57
    vue图片裁剪-- vue-croppervue-cropper 官网 :https://github.com/xyxiao001/vue-cropper1.安装2.引入3.使用 vue-cropper 官网 :https://github.com/xyxiao001/vue-cropper 1.安装 npm install vue-cropper 2....

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

    1.安装

    npm install vue-cropper
    

    2.引入

    在main.js里面中:

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

    3.使用

    在这里插入图片描述
    在这里插入图片描述

    上传商品:
    html(省略其他代码):

    -------
    <el-form-item label="商品封面图" required prop="icon">
      <el-upload
        :headers="uploader.headers"
        :name="uploader.name"
        ref="uploader"
        :data="uploader.data"
        :show-file-list="false"
        :auto-upload="false"
        :http-request="onHandelUpload"
        :on-change="onHandelImageSelect"
        :on-success="uploadPicUrl"
        :multiple="false"
        class="avatar-uploader"
        action="https://up.qiniup.com/"
        accept=".jpg, .png, .gif"
      >
        <img
          v-if="goods.basis.icon"
          :src="goods.basis.icon"
          class="avatar"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
    </el-form-item>
    -------
    

    裁剪dialog:

    <el-dialog
      title="图片剪裁"
      :visible.sync="dialogVisible"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="cropper-content">
        <div class="cropper" style="text-align: center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="false"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="loading"
          >确认</el-button
        >
      </div>
    </el-dialog>
    

    数据模型:

     return {
       goods: {
         basis: {
    	    id: "", //商品id
    	    goodsName: "", //商品名称
    	    icon: "", //封面图
    	    -------
    	 }
       },
       uploader: {
            action: "https://up.qiniup.com/",
    
            name: "file",
    
            limit: {
              main_thumb: 6,
    
              detail_thumb: 20,
            },
    
            headers: {},
    
            data: {
              token: localStorage.getItem("qiniuToken"),
            },
          },
       //裁剪
       // 裁剪组件的基础配置option
        option: {
          img: "", // 裁剪图片的地址
          overImg: null,
          info: true, // 裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成图片的质量
          outputType: "jpeg", // 裁剪生成图片的格式
          canScale: false, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 0, // 默认生成截图框宽度
          autoCropHeight: 0, // 默认生成截图框高度
          fixedBox: true, // 固定截图框大小 不允许改变
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [7, 7], // 截图框的宽高比例
          full: true, // 是否输出原图比例的截图
          canMoveBox: false, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: true, // 截图框是否被限制在图片里面
          infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        },
        picsList: [], //页面显示的数组
       dialogVisible: false,
     }
    

    created:

    created() {
        this.onGetUploaderToken();//七牛云上传
    },
    

    methods:

    //封面图上传
    // 上传按钮   限制图片大小
    changeUpload() {
      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(() => {
        this.option.img = this.goods.basis.icon;
        this.dialogVisible = true;
      });
    },
    
    onHandelUpload: function (e) {
      let params = new FormData();
    
      params.append("file", this.option.overImg);
      params.append("token", localStorage.getItem("qiniuToken"));
    
      /**
       * @deprecated 上传图片处理成功
       */
      axios.post(e.action, params, e.headers).then((result) => {
        console.log(result);
        this.dialogVisible = false;
        this.goods.basis.icon =
          "https://hxt-img.baimokc.com/" + result.data.key;
      });
    },
    
    /**
    * @description 获取骑牛云token
    * */
    onGetUploaderToken: function () {
     get("/sys/merchant/qnToken/hxt-mini-img").then((result) => {
       if (result.code === 200) {
         storage.set("qiniuToken", result.data.qnToken, () => {});
         this.uploader.data.token = result.data.qnToken;
       }
     });
    },
     // 上传商品封面图
    uploadPicUrl(event) {
      this.goods.basis.icon = "https://hxt-img.baimokc.com/" + event.key;
      this.changeUpload();
    },
    //图片裁剪
    onHandelImageSelect: function(e) {
       console.log(e);
       let file = window.URL.createObjectURL(new Blob([e.raw]));
       const that = this;
       this.$nextTick(() => {
         this.option.img = file;
         this.dialogVisible = true;
         this.$nextTick(() => {
           let img = new Image();
           img.src = this.option.img;
           img.onload = function() {
             // 打印
             console.log(img.width, img.height);
             console.log("width:" + img.width + ",height:" + img.height);
             // img.width > img.height
             //   ? (this.option.autoCropHeight = this.option.autoCropWidth =
             //       img.height)
             //   : (this.option.autoCropHeight = this.option.autoCropWidth =
             //       img.width);
             if (img.width > img.height) {
               that.option.autoCropHeight = img.height;
               that.option.autoCropWidth = img.height;
               console.log("w>h");
             } else {
               that.option.autoCropHeight = img.width;
               that.option.autoCropWidth = img.width;
               console.log("w<h");
             }
             console.log(that.option.autoCropWidth);
             console.log(that.option.autoCropHeight);
             console.log(that.$refs.cropper);
             that.$refs.cropper.goAutoCrop();
             console.log(that.$refs.cropper.cropW);
    
             console.log(that.$refs.cropper.cropH);
           };
         });
       });
     },
    
    // 点击裁剪,这一步是可以拿到处理后的地址
    finish() {
      let _this = this;
    
      this.$refs.cropper.getCropBlob((data) => {
        // _this.option.overImg = window.URL.createObjectURL(data);
        _this.option.overImg = data;
        this.$refs.uploader.submit();
      });
    },
    
    展开全文
  • vue cropper

    2017-07-24 17:08:00
    1 <vueCropper 2 ref="cropper" 3 :img="cropImg.img" 4 :outputSize="cropImg.size" 5 :outputType="cropImg.outputType" 6 :info="cropImg.info" 7 ...
     1 <vueCropper
     2         ref="cropper"
     3         :img="cropImg.img"
     4         :outputSize="cropImg.size"
     5         :outputType="cropImg.outputType"
     6         :info="cropImg.info"
     7         :canScale="cropImg.canScale"
     8         :autoCrop="cropImg.autoCrop"
     9         :autoCropWidth="cropImg.autoCropWidth"
    10         :autoCropHeight="cropImg.autoCropHeight"
    11         :fixed="cropImg.fixed"
    12         :fixedNumber="cropImg.fixedNumber"
    13       ></vueCropper>
    this.$refs.cropper.startCrop()  //开始截图
    
    this.$refs.cropper.stopCrop() //截图结束
    // 获取截取后图片的数据
    this.$refs.cropper.getCropData((data) => {
    // callback
    })

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

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

    转载于:https://www.cnblogs.com/insight0912/p/7229950.html

    展开全文
  • vue-cropper

    2018-12-25 16:02:00
    项目中用到了vue-cropper插件,让我觉得很好用附上两个地址 vue-cropper在git上的地址https://github.com/xyxiao001/vue-cropper 针对vue-cropper进行二次封装 https://www.cnblogs.com/goloving/p/9721261.html ...

    项目中用到了vue-cropper插件,让我觉得很好用附上两个地址

    vue-cropper在git上的地址 https://github.com/xyxiao001/vue-cropper

    针对vue-cropper进行二次封装

    https://www.cnblogs.com/goloving/p/9721261.html

    这两部分基本搞定所有项目的需要

    转载于:https://www.cnblogs.com/chzlh/p/10174540.html

    展开全文
  • Vue 使用vue-cropper截图

    2020-03-26 16:19:48
    使用vue-cropper截图 1.下载vue-cropper依赖 npm install vue-cropper 2.在使用的页面引入 import VueCropper from 'vue-cropper' 3.页面使用 <vueCropper ref="cropper" :img="option.img" :output...
  • 1.安装 vue-Cropper yarn add -S vue-Cropper 2.main 全局引入或者局部引入vue-Cropper import VueCropper from 'vue-cropper' Vue.use(VueCropper) 3.直接上干货 <template> <div style="min-width: ...
  • Vue图片裁剪vue-cropper和el-upload结合安装vue-cropper引入vue-cropper应用 2021-03-09 vue中遇到图片裁剪和el-upload结合,未接触过记录下写法及应用 安装vue-cropper npm i vue-cropper -S 引入vue-cropper ...
  • 好用的图片裁剪插件vue-cropper vue-cropper图片裁剪插件文档:https://github.com/xyxiao001/vue-cropper#vue-cropper 效果预览http://github.xyxiao.cn/vue-cropper/example/ 问题:无法改变裁剪框大小和位置 ...
  • 使用Vue-Cropper对上传的图片进行裁剪 首先下载安装vue-cropper npm install vue-cropper -s main.js中引入并使用 import Vuecropper from 'vue-cropper' Vue.use(Vuecropper) 引入element-ui 的uplaod组件 这里...
  • 引用vue-cropper npm install vue-cropper yarn add vue-cropper 全局引用 import VueCropper from 'vue-cropper' Vue.use(VueCropper) 直接使用 import { VueCropper } from 'vue-cropper' export default { ...
  • vue-cropper的使用

    万次阅读 2018-12-07 20:36:35
    vue-cropper的使用 vue-cropper官方链接:https://github.com/xyxiao001/vue-cropper 项目中使用 ``` npm install vue-cropper yarn add vue-cropper ``` <template> <el-dialog title="图片...
  • Vue.use(window['vue-cropper'].default) nuxt 使用方式 if(process.browser) { vueCropper = require('vue-cropper') Vue.use(vueCropper.default) } < vueCropper ref =" cropper " :img =" option.img " ...
  • npm install vue-cropper 使用 import VueCropper from 'vue-cropper' Vue.use(VueCropper) cropper样式:把它写在弹层里 <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body ...
  • vue-cropper裁剪上传

    2019-09-27 13:47:40
    npm install vue-cropper //首先 安装vue-cropper main.js全局引用: import VueCropper from 'vue-cropper' Vue.use(VueCropper) // 挂载全局 Vue.prototype.$http = httpRe...
  • npm install vue-cropper 页面引用 import { VueCropper } from "vue-cropper"; components: { VueCropper, }, <template> <div class="box"> <div class="crop"> <vueCropper ref=...
  • 第一次做上传剪裁图片,找了许多框架,最后找到一个优雅的图片裁剪插件vue-cropper,很方便新手入手 安装 npm install vue-cropper 使用 import VueCropper from vue-cropper import axios from 'axios' const...
  • vue-cropper插件使用

    2020-07-17 17:33:01
    需求拍照之后裁剪照片,然后搜到了vue-cropper功能还是很强大的 首先是使用方式 组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, 全局使用 import VueCropper from 'vue-...
  • Vue 使用 vue-cropper实现图片裁剪

    千次阅读 2019-07-26 10:03:26
    1.安装vue-cropper 使用npm本地安装vue-cropper npm install vue-cropper --save-dev 2.实现代码 <template> <div> <div> <div class="pos movediv" :style="cutPhotomodel?'z-...
  • Vue+cropper裁剪图片

    2020-12-30 15:37:16
    npm install vue-cropper 安装 Vue.prototype.$http =service; 全局挂载 思路 1,从elementui的上传组件拿到file对象 2,解析file对象拿到blob对象 参数列表 用法 <cropper :pic.sync="item.url" ></...
  • vue 头像修改-裁剪图片 vue-cropper

    千次阅读 2020-07-13 17:46:17
    安装插件vue-cropper 页面中引用插件 安装插件vue-cropper npm install vue-cropper --save 页面中引用插件 import {VueCropper} from 'vue-cropper' components: {VueCropper}, 原头像 <...
  • vue-cropper笔记

    2018-12-07 10:19:50
    npm install vue-cropper --save-dev 引用: import vueCropper from 'vue-cropper' 声明: components: { vueCropper } &amp;lt;vueCropper ref=&quot;cropper&quot; :img=&quot;...
  • vue-cropper 截图

    2019-07-17 16:34:52
    安装: ...npm install vue-cropper --save-dev 用法: <template> <div id="cropper"> <VueCropper ref="cropper" :img="url" :info="option.info" :outputSize="option....
  • vue+图片裁剪vue-cropper以及api

    千次阅读 2019-12-19 17:29:26
    因为项目需要,需要实现一个上传完图片,对图片进行二次处理的需求,就使用了vue-cropper来实现这个功能,总的来说还是感觉非常不错的软件,这里分享下我的使用方法,以及vue-cropper的api(见最下) 实现效果: ...
  • 安装vue-cropper npm install vue-cropper --save-dev main.js里面使用 import VueCropper from 'vue-cropper' Vue.use(VueCropper) 新建一个test.vue文件 该文件只做用来演示剪切上传图片的功能,下面直接贴出...
  • 一、项目预览。 效果: 一个手指拖动,可以移动图片,两个手指拖动可以缩放。 下载该项目: ...git clone ...1.复制“vue-image-cropper”项目中的 ./src/components/imageCropper.vue文件 (imageCroppe.
  • vue的图片裁剪(vue-cropper

    千次阅读 2018-11-13 15:13:11
    npm install vue-cropper

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 759
精华内容 303
关键字:

croppervue

vue 订阅