上传图片之前，按照一定比例进行剪裁，剪裁后上传到服务器
官方地址

安装

  1. npm install vue-cropper
  1. <template>
  2.   <div class="show-info">
  3.     <div class="test test1">
  4.       <vueCropper
  5.         ref="cropper"
  6.         :img="option.img"
  7.         :outputSize="option.size"
  8.         :outputType="option.outputType"
  9.         :info="true"
  10.         :full="option.full"
  11.         :canMove="option.canMove"
  12.         :canMoveBox="option.canMoveBox"
  13.         :fixedBox="option.fixedBox"
  14.         :original="option.original"
  15.         :autoCrop="option.autoCrop"
  16.         :autoCropWidth="option.autoCropWidth"
  17.         :autoCropHeight="option.autoCropHeight"
  18.         :centerBox="option.centerBox"
  19.         :high="option.high"
  20.         :infoTrue="option.infoTrue"
  21.         @realTime="realTime"
  22.         @imgLoad="imgLoad"
  23.         @cropMoving="cropMoving"
  24.         :enlarge="option.enlarge"
  25.       ></vueCropper>
  26.     </div>
  27.     <div class="test-button">
  28.       <button @click="changeImg" class="btn">随机图片</button>
  29.       <label class="btn" for="uploads">上传图片</label>
  30.       <input
  31.         type="file"
  32.         id="uploads"
  33.         style="position: absolute; clip: rect(0 0 0 0)"
  34.         accept="image/png, image/jpeg, image/gif, image/jpg"
  35.         @change="uploadImg($event, 1)"
  36.       />
  37.       <button @click="startCrop" v-if="!crap" class="btn">开始裁剪</button>
  38.       <button @click="stopCrop" v-else class="btn">停止裁剪</button>
  39.       <button @click="clearCrop" class="btn">清除</button>
  40.       <button @click="refreshCrop" class="btn">刷新</button>
  41.       <button @click="changeScale(1)" class="btn">放大</button>
  42.       <button @click="changeScale(-1)" class="btn">缩小</button>
  43.       <button @click="rotateLeft" class="btn">左旋转</button>
  44.       <button @click="rotateRight" class="btn">右旋转</button>
  45.       <button @click="finish('base64')" class="btn">生成图片base64</button>
  46.       <button @click="finish('blob')" class="btn">生成图片blob</button>
  47.       <a @click="down('base64')" class="btn">base64下载</a>
  48.       <a @click="down('blob')" class="btn">blob下载</a>
  49.       <a :href="downImg" download="demo.png" ref="downloadDom">{{ downImg }}</a>
  50.     </div>
  51.     <!-- -->
  52.     <div class="box">
  53.       <div class="input">
  54.         <h3>输出图片</h3>
  55.         <div
  56.           class="show-preview"
  57.           :style="{ width: previews.w + 'px', height: previews.h + 'px', overflow: 'hidden', margin: '5px' }"
  58.         >
  59.           <div :style="previews.div">
  60.             <img :src="previews.url" :style="previews.img" />
  61.           </div>
  62.         </div>
  63.       </div>
  65.       <el-row  >
  66.         <el-col :span="12" class="c-item">
  67.           <span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
  68.           <input type="checkbox" v-model="option.original" />
  69.           <span>original: {{ option.original }}</span>
  70.         </el-col>
  71.         <el-col :span="12" class="c-item">
  72.           <span>是否根据dpr生成适合屏幕的高清图片</span>
  73.           <input type="checkbox" v-model="option.high" />
  74.           <span>high: {{ option.high }}</span>
  75.         </el-col>
  76.         <el-col :span="12" class="c-item">
  77.           <span>是否输出原图比例的截图</span>
  78.           <input type="checkbox" v-model="option.full" />
  79.           <span>full: {{ option.full }}</span>
  80.         </el-col>
  81.         <el-col :span="12" class="c-item">
  82.           <span>截图信息展示是否是真实的输出宽高</span>
  83.           <input type="checkbox" v-model="option.infoTrue" />
  84.           <span>infoTrue: {{ option.infoTrue }}</span>
  85.         </el-col>
  86.         <el-col :span="12" class="c-item">
  87.           <span>能否拖动图片</span>
  88.           <input type="checkbox" v-model="option.canMove" />
  89.           <span>canMove: {{ option.canMove }}</span>
  90.         </el-col>
  91.         <el-col :span="12" class="c-item">
  92.           <span>能否拖动截图框</span>
  93.           <input type="checkbox" v-model="option.canMoveBox" />
  94.           <span>canMoveBox: {{ option.canMoveBox }}</span>
  95.         </el-col>
  96.         <el-col :span="12" class="c-item">
  97.           <span>截图框固定大小</span>
  98.           <input type="checkbox" v-model="option.fixedBox" />
  99.           <span>fixedBox: {{ option.fixedBox }}</span>
  100.         </el-col>
  101.         <el-col :span="12" class="c-item">
  102.           <span>是否自动生成截图框</span>
  103.           <input type="checkbox" v-model="option.autoCrop" />
  104.           <span>autoCrop: {{ option.autoCrop }}</span>
  105.         </el-col>
  106.         <el-col :span="12" class="c-item">
  107.           <span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
  108.           <input type="checkbox" v-model="option.centerBox" />
  109.           <span>centerBox: {{ option.centerBox }}</span>
  110.         </el-col>
  111.         <el-col :span="12" class="c-item">
  112.           <span>是否按照截图框比例输出 默认为1 </span>
  113.           <input type="number" v-model="option.enlarge" />
  114.         </el-col>
  116.         <el-col :span="12" class="c-item">
  117.           <span>输出图片格式  </span>
  118.           <label><input type="radio" name="type" value="jpeg" v-model="option.outputType" />jpeg </label>
  119.           <label><input type="radio" name="type" value="jpg" v-model="option.outputType" />jpg </label>
  120.           <label> <input type="radio" name="type" value="png" v-model="option.outputType" />png</label>
  121.           <label> <input type="radio" name="type" value="webp" v-model="option.outputType" />webp</label>
  122.         </el-col>
  123.       </el-row>
  124.     </div>
  126.     <div slot="body">{{ code1 }}</div>
  127.   </div>
  128. </template>
  131. <script>
  132. import { VueCropper } from 'vue-cropper'
  134. export default {
  135.   components: {
  136.     VueCropper,
  137.   },
  139.   data() {
  140.     return {
  141.       // 初始化值
  142.       option: {
  143.         size: 1,
  144.         full: true, // 是否输出原图比例的截图
  145.         canMove: true, // 上传图片是否可以移动
  146.         fixedBox: false, // 固定截图框大小 不允许改变
  147.         original: false, // 上传图片按照原始比例渲染
  148.         canMoveBox: true, // 截图框能否拖动
  149.         img: 'https://avatars3.githubusercontent.com/u/15681693', // url 地址 || base64 || blob null
  150.         outputSize: 1, // 裁剪生成图片的质量 1 (0-1)
  151.         outputType: 'jpg', // 裁剪生成图片的格式 jpg (jpg 需要传入jpeg)
  152.         info: '', // 裁剪框的大小信息 true
  153.         canScale: true, //  图片是否允许滚轮缩放 true
  154.         autoCrop: true, // 是否默认生成截图框 false
  155.         fixed: true, // 是否开启截图框宽高固定比例 true
  156.         // 只有自动截图开启 宽度高度才生效
  157.         autoCropWidth: 200, // 默认生成截图框宽度
  158.         autoCropHeight: 150, // 默认生成截图框高度
  159.         centerBox: true, // 截图框是否被限制在图片里面
  160.         high: true, // 是否按照设备的dpr 输出等比例图片
  161.         infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  162.         w: 200,
  163.         h: 200,
  164.         maxImgSize: 1200, // 限制图片最大宽度和高度
  165.         // enlarge:1, //图片根据截图框输出比例倍数
  166.         // fixedNumber:[1,1] // 截图框的宽高比例
  167.         // mode: 'contain',
  168.       },
  169.       //   截图后值
  170.       previews: {},
  171.       crap: false,
  172.       previewStyle1: {},
  173.       previewStyle2: {},
  174.       code1: '',
  175.       lists: [
  176.         {
  177.           img: 'https://img2.baidu.com/it/u=2102736929,2417598652&fm=26&fmt=auto&gp=0.jpg',
  178.         },
  179.         {
  180.           img: 'https://img0.baidu.com/it/u=1330784235,4146572500&fm=26&fmt=auto&gp=0.jpg',
  181.         },
  182.         {
  183.           img: 'https://img0.baidu.com/it/u=4015235454,569502415&fm=26&fmt=auto&gp=0.jpg',
  184.         },
  185.         {
  186.           img: 'https://img2.baidu.com/it/u=3566088443,3713209594&fm=26&fmt=auto&gp=0.jpg',
  187.         },
  188.         {
  189.           img: 'https://img0.baidu.com/it/u=3870964477,3746012709&fm=26&fmt=auto&gp=0.jpg',
  190.         },
  191.         {
  192.           img: 'https://img2.baidu.com/it/u=360400461,2955275651&fm=26&fmt=auto&gp=0.jpg',
  193.         },
  194.       ],
  195.       index: 0,
  196.       downImg: '',
  197.     }
  198.   },
  199.   mounted() {
  200.     console.log(window['vue-cropper'])
  201.   },
  202.   methods: {
  203.     // 上传图片
  204.     uploadImg(val, num) {
  205.       console.log(val, num)
  206.       const file = val.target.files[0]
  207.       if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(val.target.value)) {
  208.         console.log('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
  209.         return false
  210.       }
  211.       const reader = new FileReader()
  212.       reader.onload = e => {
  213.         let data
  214.         if (typeof e.target.result === 'object') {
  215.           // 把Array Buffer转化为blob 如果是base64不需要
  216.           data = window.URL.createObjectURL(new Blob([e.target.result]))
  217.         } else {
  218.           data = e.target.result
  219.         }
  220.         if (num === 1) {
  221.           this.option.img = data
  222.         } else if (num === 2) {
  223.           this.example2.img = data
  224.         }
  225.         this.previews = this.option
  226.         console.log(this.option.img)
  227.       }
  228.       // 转化为base64
  229.       // reader.readAsDataURL(file)
  230.       // 转化为blob
  231.       reader.readAsArrayBuffer(file)
  232.     },
  234.     imgLoad(val) {
  235.       console.log(val)
  236.     },
  237.     // 截图框移动回调函数
  238.     cropMoving(val) {
  239.       console.log(val)
  240.     },
  241.     changeImg(val) {
  242.       const num = Math.ceil(Math.random() * this.lists.length)
  243.       console.log(val, num, this.lists[num].img)
  245.       this.option.img = this.lists[num].img
  246.     },
  247.     // 开始截图
  248.     startCrop() {
  249.       this.crap = true
  250.       this.$refs.cropper.startCrop()
  251.     },
  253.     // 停止截图
  254.     stopCrop() {
  255.       this.crap = false
  256.       this.$refs.cropper.stopCrop()
  257.     },
  258.     // 清除截图
  259.     clearCrop() {
  260.       this.$refs.cropper.clearCrop()
  261.     },
  262.     // 刷新
  263.     refreshCrop(val) {
  264.       console.log(val)
  265.       this.$refs.cropper.refresh()
  266.     },
  267.     // 修改图片大小 正数为变大 负数变小
  268.     changeScale(val) {
  269.       console.log(val)
  270.       const num = val || 1
  271.       this.$refs.cropper.changeScale(num)
  272.     },
  273.     //  向右边旋转90度
  274.     rotateLeft(val) {
  275.       console.log(val)
  276.       this.$refs.cropper.rotateRight()
  277.     },
  278.     // 向左边旋转90度
  279.     rotateRight(val) {
  280.       console.log(val)
  281.       this.$refs.cropper.rotateLeft()
  282.     },
  285.     // 获取截图信息
  286.     getInfo() {
  287.       const W = this.$refs.cropper.cropW // 截图框宽度
  289.       const H = this.$refs.cropper.cropH // 截图框高度
  290.       console.log(W, H)
  291.     },
  293.     // down 下载
  294.     down(val) {
  295.       console.log(val)
  296.       const aLink = document.createElement('a')
  297.       aLink.download = 'demo'
  298.       // 输出
  299.       if (val === 'blob') {
  300.         // 获取截图的blob数据
  301.         this.$refs.cropper.getCropBlob(data => {
  302.           this.downImg = window.URL.createObjectURL(data)
  303.           aLink.href = window.URL.createObjectURL(data)
  304.           aLink.click()
  305.         })
  306.       } else {
  307.         // 获取截图的base64 数据
  308.         this.$refs.cropper.getCropData(data => {
  309.           this.downImg = data
  310.           aLink.href = data
  311.           aLink.click()
  312.         })
  313.       }
  314.     },
  316.     // 输出
  317.     finish(val) {
  318.       console.log(val)
  319.       // const test = window.open('about:blank')
  320.       // test.document.body.innerHTML = '图片生成中..'
  321.       if (val === 'blob') {
  322.         this.$refs.cropper.getCropBlob(data => {
  323.           const img = window.URL.createObjectURL(data)
  324.           this.model = true
  325.           this.modelSrc = img
  326.         })
  327.       } else {
  328.         this.$refs.cropper.getCropData(data => {
  329.           this.model = true
  330.           this.modelSrc = data
  331.         })
  332.       }
  333.     },
  334.     // 添加预览
  335.     realTime(data) {
  336.       console.log(data)
  337.       this.previews = data
  338.     },
  339.     // 获取图片基于容器的坐标点
  340.     getImgAxis(val) {
  341.       console.log(val)
  342.       this.$refs.cropper.getImgAxis()
  343.     },
  344.     // 获取截图框基于容器的坐标点
  345.     getCropAxis(val) {
  346.       console.log(val)
  347.       this.$refs.cropper.getCropAxis()
  348.     },
  350.     // 自动生成截图框函数
  351.     goAutoCrop(val) {
  352.       const go = this.$refs.cropper.goAutoCrop
  353.       console.log(val, go)
  354.     },
  356.     finish2(type) {
  357.       console.log(type)
  358.       this.$refs.cropper2.getCropData(data => {
  359.         this.model = true
  360.         this.modelSrc = data
  361.       })
  362.     },
  363.     finish3(type) {
  364.       console.log(type)
  365.       this.$refs.cropper3.getCropData(data => {
  366.         this.model = true
  367.         this.modelSrc = data
  368.       })
  369.     },
  370.   },
  371. }
  372. </script>
  375. <style lang="scss" scoped>
  376. .box {
  377.   display: flex;
  378. }
  379. .cut {
  380.   width: 500px;
  381.   height: 500px;
  382.   margin: 30px auto;
  383. }
  385. .c-item {
  386.   max-width: 500px;
  387.   margin: 10px auto;
  388.   margin-top: 12px;
  389. }
  391. .content {
  392.   margin: auto;
  393.   max-width: 1200px;
  394.   margin-bottom: 100px;
  395. }
  397. .test-button {
  398.   display: flex;
  399.   flex-wrap: wrap;
  400.   align-content: center;
  401.   justify-content: center;
  402. }
  404. .set{
  405.   display: flex;
  407. }
  409. .btn {
  410.   display: inline-block;
  411.   line-height: 1;
  412.   white-space: nowrap;
  413.   cursor: pointer;
  414.   background: #fff;
  415.   border: 1px solid #c0ccda;
  416.   color: #1f2d3d;
  417.   text-align: center;
  418.   box-sizing: border-box;
  419.   outline: none;
  420.   margin: 20px 10px 0px 0px;
  421.   padding: 9px 15px;
  422.   font-size: 14px;
  423.   border-radius: 4px;
  424.   color: #fff;
  425.   background-color: #50bfff;
  426.   border-color: #50bfff;
  427.   transition: all 0.2s ease;
  428.   text-decoration: none;
  429.   user-select: none;
  430. }
  432. .des {
  433.   line-height: 30px;
  434. }
  436. code.language-html {
  437.   padding: 10px 20px;
  438.   margin: 10px 0px;
  439.   display: block;
  440.   background-color: #333;
  441.   color: #fff;
  442.   overflow-x: auto;
  443.   font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono;
  444.   border-radius: 5px;
  445.   white-space: pre;
  446. }
  448. .show-info {
  449.   margin-bottom: 10px;
  450.   margin-top: 10px;
  451. }
  453. .show-info h2 {
  454.   line-height: 50px;
  455. }
  457. /*.title, .title:hover, .title-focus, .title:visited {
  458.         color: black;
  459.       }*/
  461. .title {
  462.   display: block;
  463.   text-decoration: none;
  464.   text-align: center;
  465.   line-height: 1.5;
  466.   margin: 20px 0px;
  467.   background-image: -webkit-linear-gradient(
  468.     left,
  469.     #3498db,
  470.     #f47920 10%,
  471.     #d71345 20%,
  472.     #f7acbc 30%,
  473.     #ffd400 40%,
  474.     #3498db 50%,
  475.     #f47920 60%,
  476.     #d71345 70%,
  477.     #f7acbc 80%,
  478.     #ffd400 90%,
  479.     #3498db
  480.   );
  481.   color: transparent;
  482.   -webkit-background-clip: text;
  483.   background-size: 200% 100%;
  484.   animation: slide 5s infinite linear;
  485.   font-size: 40px;
  486. }
  488. .test {
  489.   height: 500px;
  490. }
  492. .model {
  493.   position: fixed;
  494.   z-index: 10;
  495.   width: 100vw;
  496.   height: 100vh;
  497.   overflow: auto;
  498.   top: 0;
  499.   left: 0;
  500.   background: rgba(0, 0, 0, 0.8);
  501. }
  503. .model-show {
  504.   display: flex;
  505.   justify-content: center;
  506.   align-items: center;
  507.   width: 100vw;
  508.   height: 100vh;
  509. }
  511. .model img {
  512.   display: block;
  513.   margin: auto;
  514.   max-width: 80%;
  515.   user-select: none;
  516.   background-position: 0px 0px, 10px 10px;
  517.   background-size: 20px 20px;
  518.   background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
  519.     linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
  520. }
  522. .c-item {
  523.   display: block;
  524.   user-select: none;
  525. }
  527. @keyframes slide {
  528.   0% {
  529.     background-position: 0 0;
  530.   }
  531.   100% {
  532.     background-position: -100% 0;
  533.   }
  534. }
  535. </style>