缩放体验比较糟糕，仅供参考。

image.png

代码

请忽略个别业务组件，关注裁切逻辑。
总结：利用 mousedown 确定鼠标的初始化位置，利用 mousemove 随时获取当前鼠标的位置，利用和初始化位置数据的差值，来移动容器。mouseup 重置。

  1. <template>
  2.   <div class="cover-image-cropper">
  3.     <div class="cropper-container">
  4.       <div class="cropper-container-left">
  5.         <div class="origin-image">
  6.           <img-picker
  7.             ref="imgPicker"
  8.             customClass="cover-image-cropper-picker"
  9.             :imgKey="originPicKey"
  10.             :defaultImg="defaultImg"
  11.             :formDataKey="selfFormDataKey"
  12.             @picked="setImgUrl"
  13.             @delete-click="deleteCurrentSelectedImage"
  14.           />
  15.         </div>
  16.         <div v-show="currentGraphIndex !== ''" class="cropper-bg" :style="originImgDomStyle"></div>
  17.         <img
  18.           v-show="currentGraphIndex !== ''"
  19.           :src="articleForm.origin_image_url"
  20.           class="clip-image"
  21.           :style="[originImgDomStyle, clipImageStyle]"
  22.           alt="原始图片"
  23.         />
  24.         <div
  25.           v-show="currentGraphIndex !== ''"
  26.           class="drag-resize-box"
  27.           :style="dragResizeBoxStyle"
  28.           @mousedown.stop.self="commonMousedownEvent($event)"
  29.           @mousemove.stop.self="dragResizeBoxMousemoveEvent($event)"
  30.           @mouseup.stop.self="isMousedownType = false"
  31.         >
  32.           <i
  33.             v-for="(item, index) in zoomPoints"
  34.             class=" zoom-point"
  35.             :class="item.customClass"
  36.             :key="index"
  37.             @mousedown.stop.self="commonMousedownEvent($event)"
  38.             @mousemove.stop.self="zoomPointMousemoveEvent($event, index)"
  39.             @mouseup.stop.self="isMousedownType = false"
  40.           ></i>
  41.         </div>
  42.       </div>
  43.       <div class="cropper-container-right">
  44.         <div class="ratio-graph-lists">
  45.           <div
  46.             v-for="(item, index) in ratioLists"
  47.             class="single-item"
  48.             :class="{
  49.               active: currentGraphIndex === index,
  50.               disabled: !hasOriginPic,
  51.               cropped: item.croppedPosition.length,
  52.             }"
  53.             :style="item.style"
  54.             :data-radio="item.text"
  55.             @click="handleSelectedClick(index)"
  56.           >
  57.             {{ item.text }}
  58.           </div>
  59.         </div>
  60.         <div class="save-btn" :class="{ disabled: !hasOriginPic }" @click="saveCropperImage">
  61.           保存图片
  62.         </div>
  63.       </div>
  64.     </div>
  65.     <!-- 图片选择弹窗 -->
  66.     <picture-select-dialog />
  67.   </div>
  68. </template>
  70. <script>
  71. import { ImgPicker, PictureSelectDialog } from '@/components'
  72. export default {
  73.   name: 'CoverImageCropper',
  74.   props: {
  75.     articleForm: {
  76.       type: Object || String,
  77.     },
  78.   },
  79.   data() {
  80.     return {
  81.       ratioLists: [
  82.         {
  83.           text: '1:1',
  84.           initPosition: [
  85.             { x: 0, y: 0 },
  86.             { x: 70, y: 0 },
  87.             { x: 70, y: 70 },
  88.             { x: 0, y: 70 },
  89.           ],
  90.           croppedPosition: [],
  91.           initSize: { width: 70, height: 70 },
  92.           style: { width: '70px', height: '70px' },
  93.           key: '1_1',
  94.           extraValue: { prefix: '', suffix: '_1_1' },
  95.         },
  96.         {
  97.           text: '3:2',
  98.           initPosition: [
  99.             { x: 0, y: 0 },
  100.             { x: 105, y: 0 },
  101.             { x: 105, y: 70 },
  102.             { x: 0, y: 70 },
  103.           ],
  104.           croppedPosition: [],
  105.           initSize: { width: 105, height: 70 },
  106.           style: { width: '105px', height: '70px' },
  107.           key: '3_2',
  108.           extraValue: { prefix: '', suffix: '_3_2' },
  109.         },
  110.         {
  111.           text: '7:5',
  112.           initPosition: [
  113.             { x: 0, y: 0 },
  114.             { x: 97, y: 0 },
  115.             { x: 97, y: 70 },
  116.             { x: 0, y: 70 },
  117.           ],
  118.           croppedPosition: [],
  119.           initSize: { width: 97, height: 70 },
  120.           style: { width: '97px', height: '70px' },
  121.           key: '7_5',
  122.           extraValue: { prefix: '', suffix: '_7_5' },
  123.         },
  124.         {
  125.           text: '17:10',
  126.           initPosition: [
  127.             { x: 0, y: 0 },
  128.             { x: 118, y: 0 },
  129.             { x: 118, y: 70 },
  130.             { x: 0, y: 70 },
  131.           ],
  132.           croppedPosition: [],
  133.           initSize: { width: 118, height: 70 },
  134.           style: { width: '118px', height: '70px' },
  135.           key: '17_10',
  136.           extraValue: { prefix: '', suffix: '_17_10' },
  137.         },
  138.         {
  139.           text: '21:10',
  140.           initPosition: [
  141.             { x: 0, y: 0 },
  142.             { x: 143, y: 0 },
  143.             { x: 143, y: 70 },
  144.             { x: 0, y: 70 },
  145.           ],
  146.           croppedPosition: [],
  147.           initSize: { width: 143, height: 70 },
  148.           style: { width: '143px', height: '70px' },
  149.           key: '21_10',
  150.           extraValue: { prefix: '', suffix: '_21_10' },
  151.         },
  152.       ],
  153.       // 当前比例尺下标
  154.       currentGraphIndex: '',
  155.       // imgPicker key
  156.       originPicKey: 'coverImageCropper',
  157.       // formdata keys
  158.       selfFormDataKey: ['cover_img_id', 'origin_image_url'],
  159.       // 原图尺寸
  160.       originImgSize: {},
  161.       // 原图初始化位置
  162.       originImgPosition: {},
  163.       // 原图 DOM 样式
  164.       originImgDomStyle: {},
  165.       // 裁切图片 DOM 样式
  166.       clipImageStyle: {},
  167.       // 拖拽、缩放容器 DOM 样式
  168.       dragResizeBoxStyle: {},
  169.       // 当前裁切后图片的位置信息
  170.       currentPositionCoordinates: [],
  171.       // 持续长按中
  172.       isMousedownType: false,
  173.       // 鼠标按下位置
  174.       originPosition: {
  175.         x: null,
  176.         y: null,
  177.       },
  178.       zoomPoints: [
  179.         { customClass: 'top-left-point' },
  180.         { customClass: 'top-right-point' },
  181.         { customClass: 'bottom-right-point' },
  182.         { customClass: 'bottom-left-point' },
  183.       ],
  184.       // 待提交的数据
  185.       submitMsg: {},
  186.     }
  187.   },
  188.   components: {
  189.     ImgPicker,
  190.     PictureSelectDialog,
  191.   },
  192.   computed: {
  193.     defaultImg() {
  194.       return {
  195.         id: this.articleForm.cover_img_id,
  196.         file_path: this.articleForm.origin_image_url,
  197.       }
  198.     },
  199.     hasOriginPic() {
  200.       return this.articleForm.origin_image_url !== ''
  201.     },
  202.   },
  203.   watch: {
  204.     hasOriginPic: {
  205.       handler(newVal, oldVal) {
  206.         if (!newVal) {
  207.           this.currentGraphIndex = ''
  208.           this.isMousedownType = false
  209.           this.ratioLists.map((item) => {
  210.             item.croppedPosition.length = 0
  211.           })
  212.         }
  213.       },
  214.       immediate: true,
  215.     },
  216.     currentGraphIndex: {
  217.       handler(newVal, oldVal) {
  218.         if (newVal !== '') {
  219.           this.$nextTick(() => {
  220.             // 已经选取裁切图逻辑
  221.             const currentGraphCroppedPosition = this.ratioLists[newVal].croppedPosition
  223.             if (currentGraphCroppedPosition.length) {
  224.               this.updateCropperView(currentGraphCroppedPosition)
  225.               this.currentPositionCoordinates = this.ratioLists[newVal].croppedPosition
  226.             } else {
  227.               // 未选取裁切图逻辑
  228.               const originImgDom = this.$refs.imgPicker.$refs.img
  229.               const offsetWidth = originImgDom.offsetWidth
  230.               const offsetHeight = originImgDom.offsetHeight
  231.               const offsetTop = originImgDom.offsetTop
  232.               const offsetLeft = originImgDom.offsetLeft
  233.               /**
  234.                * originImgSize
  235.                * 原图长宽尺寸
  236.                */
  237.               this.originImgSize = {
  238.                 width: offsetWidth,
  239.                 height: offsetHeight,
  240.               }
  241.               /**
  242.                * originImgPosition
  243.                * 原图初始化位置
  244.                */
  245.               this.originImgPosition = {
  246.                 top: offsetTop,
  247.                 left: offsetLeft,
  248.               }
  249.               /**
  250.                * originImgDomStyle
  251.                * 原图长宽样式
  252.                */
  253.               this.originImgDomStyle = {
  254.                 top: offsetTop + 1 + 'px',
  255.                 left: offsetLeft + 1 + 'px',
  256.                 width: offsetWidth + 'px',
  257.                 height: offsetHeight + 'px',
  258.               }
  259.               /**
  260.                * currentPositionCoordinates
  261.                * 当前位置坐标
  262.                */
  263.               let currentInitPosition = JSON.parse(
  264.                 JSON.stringify(this.ratioLists[newVal].initPosition)
  265.               )
  266.               if (offsetTop > 0 || offsetLeft > 0) {
  267.                 currentInitPosition.map((item) => {
  268.                   if (offsetTop > 0) {
  269.                     item.y = item.y + offsetTop
  270.                   }
  271.                   if (offsetLeft > 0) {
  272.                     item.x = item.x + offsetLeft
  273.                   }
  274.                 })
  275.               }
  277.               this.currentPositionCoordinates = currentInitPosition
  278.               /**
  279.                * 根据最新坐标信息更新视图
  280.                */
  281.               this.updateCropperView(this.currentPositionCoordinates)
  282.             }
  283.           })
  284.         }
  285.       },
  286.     },
  287.   },
  288.   methods: {
  289.     setImgUrl(data) {
  290.       const { file_id, file_path } = data[this.originPicKey]
  291.       this.articleForm.cover_img_id = file_id
  292.       this.articleForm.origin_image_url = file_path
  293.     },
  295.     getClipImageStyle(currentPositionCoordinates) {
  296.       // polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px)
  297.       const selfOriginImgPosition = this.originImgPosition
  298.       return {
  299.         'clip-path': `polygon(
  300.                 ${currentPositionCoordinates
  301.                   .map(
  302.                     (item, index) =>
  303.                       item.x -
  304.                       this.originImgPosition.left +
  305.                       'px' +
  306.                       ' ' +
  307.                       (item.y - this.originImgPosition.top) +
  308.                       'px' +
  309.                       (index < currentPositionCoordinates.length - 1 ? ', ' : '')
  310.                   )
  311.                   .join('')}
  312.               )`,
  313.       }
  314.     },
  316.     /**
  317.      * 获取拖动、缩放容器的位置样式
  318.      * @param {array} currentPositionCoordinates - 当前位置信息
  319.      *
  320.      * @return {object} 返回 style 对象
  321.      */
  322.     getDragResizeBoxStyle(currentPositionCoordinates) {
  323.       return {
  324.         top: currentPositionCoordinates[0].y + 1 + 'px',
  325.         left: currentPositionCoordinates[0].x + 1 + 'px',
  326.         width: currentPositionCoordinates[1].x - currentPositionCoordinates[0].x + 'px',
  327.         height: currentPositionCoordinates[3].y - currentPositionCoordinates[0].y + 'px',
  328.       }
  329.     },
  331.     /**
  332.      * 获取 mousedown 事件出发点的位置坐标
  333.      * @param {object} evt - 鼠标点击事件对象
  334.      */
  335.     commonMousedownEvent(evt) {
  336.       this.isMousedownType = true
  337.       this.originPosition.x = evt.offsetX
  338.       this.originPosition.y = evt.offsetY
  339.     },
  341.     /**
  342.      * 裁切图片拖拽事件
  343.      * @param {object} evt - 拖拽事件对象
  344.      */
  345.     dragResizeBoxMousemoveEvent(evt) {
  346.       // console.log('***', evt.offsetX)
  347.       if (this.isMousedownType) {
  348.         const selfOriginImgSize = this.originImgSize
  349.         const selfOriginImgPosition = this.originImgPosition
  350.         const selfCurrentPositionCoordinates = this.currentPositionCoordinates
  351.         const x = evt.offsetX
  352.         const y = evt.offsetY
  353.         const distanceX = x - this.originPosition.x
  354.         const distanceY = y - this.originPosition.y
  355.         if (
  356.           distanceX + selfCurrentPositionCoordinates[0].x < selfOriginImgPosition.left ||
  357.           distanceY + selfCurrentPositionCoordinates[0].y < selfOriginImgPosition.top ||
  358.           distanceX + selfCurrentPositionCoordinates[1].x >
  359.             selfOriginImgSize.width + selfOriginImgPosition.left ||
  360.           distanceY + selfCurrentPositionCoordinates[3].y >
  361.             selfOriginImgSize.height + selfOriginImgPosition.top
  362.         ) {
  363.           return false
  364.         } else {
  365.           this.currentPositionCoordinates = selfCurrentPositionCoordinates.map((item) => {
  366.             return {
  367.               x: item.x + distanceX,
  368.               y: item.y + distanceY,
  369.             }
  370.           })
  372.           this.updateCropperView(this.currentPositionCoordinates)
  373.         }
  374.       }
  375.     },
  377.     /**
  378.      * 裁切图片缩放事件
  379.      * 根据 mousemove 缩放图片
  380.      * @param {object} evt - 拖拽事件对象
  381.      * @param {number} currentPointIndex - 拖拽的 point，0: ↖️， 1: ↗️， 2: ↘️， 3:  ↙️
  382.      */
  383.     zoomPointMousemoveEvent(evt, currentPointIndex) {
  384.       if (this.isMousedownType) {
  385.         const x = evt.offsetX
  386.         const distance = x - this.originPosition.x
  388.         // 判读是否可以进行容器缩放
  389.         if (this.zoomCanPass(currentPointIndex, distance)) {
  390.           return false
  391.         } else {
  392.           this.currentPositionCoordinates = this.currentPositionCoordinates.map((item, index) => {
  393.             let isEven = (currentPointIndex + 1) % 2 === 0
  395.             // 当前缩放触发方向
  396.             // x，y 坐标都变动
  397.             if (currentPointIndex === index) {
  398.               return {
  399.                 x: item.x + distance,
  400.                 y: item.y + distance,
  401.               }
  402.             }
  403.             // 顺时针下一位
  404.             if ((currentPointIndex + 1) % 4 === index) {
  405.               return {
  406.                 x: isEven ? item.x + distance : item.x,
  407.                 y: isEven ? item.y : item.y + distance,
  408.               }
  409.             }
  410.             // 对角方向
  411.             if ((currentPointIndex + 2) % 4 === index) {
  412.               return {
  413.                 x: item.x,
  414.                 y: item.y,
  415.               }
  416.             }
  417.             // 逆时针上一位
  418.             if ((currentPointIndex + 3) % 4 === index)
  419.               return {
  420.                 x: isEven ? item.x : item.x + distance,
  421.                 y: isEven ? item.y + distance : item.y,
  422.               }
  423.           })
  425.           this.updateCropperView(this.currentPositionCoordinates)
  426.         }
  427.       }
  428.     },
  430.     /**
  431.      * 判断缩放是否可执行
  432.      * @param {number} currentPointIndex - 拖拽的 point，0: ↖️， 1: ↗️， 2: ↘️， 3:  ↙️
  433.      * @param {number} distance - 缩放的大小值
  434.      *
  435.      * @return {boolean} 返回是否可执行的布尔值
  436.      */
  437.     zoomCanPass(currentPointIndex, distance) {
  438.       const selfCurrentPositionCoordinates = this.currentPositionCoordinates
  439.       const selfOriginImgSize = this.originImgSize
  440.       const selfOriginImgPosition = this.originImgPosition
  442.       switch (currentPointIndex) {
  443.         case 0:
  444.           return
  445.           distance + selfCurrentPositionCoordinates[0].x < selfOriginImgPosition.left ||
  446.             distance + selfCurrentPositionCoordinates[0].y < selfOriginImgPosition.top
  447.           break
  448.         case 1:
  449.           distance + selfCurrentPositionCoordinates[1].x >
  450.             selfOriginImgSize.width + selfOriginImgPosition.left ||
  451.             distance + selfCurrentPositionCoordinates[1].y < selfOriginImgPosition.top
  452.           break
  453.         case 2:
  454.           distance + selfCurrentPositionCoordinates[2].x >
  455.             selfOriginImgSize.width + selfOriginImgPosition.left ||
  456.             distance + selfCurrentPositionCoordinates[2].y >
  457.               selfOriginImgSize.height + selfOriginImgPosition.top
  458.           break
  459.         case 3:
  460.           distance + selfCurrentPositionCoordinates[3].x < selfOriginImgPosition.left ||
  461.             distance + selfCurrentPositionCoordinates[3].y >
  462.               selfOriginImgSize.height + selfOriginImgPosition.top
  463.           break
  464.         default:
  465.           return false
  466.       }
  467.     },
  469.     /**
  470.      * 根据最新坐标信息更新视图
  471.      * @param {object} selfCurrentPositionCoordinates - 当前裁切后图片的位置信息
  472.      */
  473.     updateCropperView(selfCurrentPositionCoordinates) {
  474.       /**
  475.        * clip-image
  476.        * 利用 css3 属性 clip-path
  477.        */
  478.       this.clipImageStyle = this.getClipImageStyle(selfCurrentPositionCoordinates)
  479.       /**
  480.        * dragResizeBoxStyle
  481.        * 用于拖动、缩放的元素
  482.        */
  483.       this.dragResizeBoxStyle = this.getDragResizeBoxStyle(selfCurrentPositionCoordinates)
  484.     },
  486.     /**
  487.      * 点击选中当前比例
  488.      * @param {number} index - 当前比例的下标
  489.      */
  490.     handleSelectedClick(index) {
  491.       if (this.hasOriginPic && this.currentGraphIndex !== index) {
  492.         this.currentGraphIndex = index
  493.         this.isMousedownType = false
  494.       }
  495.     },
  497.     /**
  498.      * 保存当前裁切比例下的图片位置信息
  499.      */
  500.     saveCropperImage() {
  501.       const currentGraph = this.ratioLists[this.currentGraphIndex]
  502.       const singleCoverScale = {}
  503.       // 保存裁切后的位置信息
  504.       currentGraph.croppedPosition = this.currentPositionCoordinates
  505.       // 表单提交所需要的比例信息
  506.       singleCoverScale.x = currentGraph.croppedPosition[0].x
  507.       singleCoverScale.y = currentGraph.croppedPosition[0].y
  508.       singleCoverScale.width = currentGraph.croppedPosition[1].x - currentGraph.croppedPosition[0].x
  509.       singleCoverScale.heigt = currentGraph.croppedPosition[3].y - currentGraph.croppedPosition[0].y
  510.       Object.assign(singleCoverScale, currentGraph.extraValue)
  512.       console.log('保存图片', singleCoverScale)
  513.       if (!this.submitMsg[currentGraph.key]) {
  514.         this.submitMsg[currentGraph.key] = singleCoverScale
  515.       } else {
  516.         this.$delete(this.submitMsg, currentGraph.key)
  517.       }
  518.     },
  520.     /**
  521.      * 删除当前选中图回调函数
  522.      * @param {array, string} formDataKey - 待删除图片表单项属性 key
  523.      */
  524.     deleteCurrentSelectedImage(formDataKey) {
  525.       if (Array.isArray(formDataKey)) {
  526.         formDataKey.forEach((singleKey) => {
  527.           this.$set(this.articleForm, singleKey, '')
  528.         })
  529.       } else {
  530.         this.$set(this.articleForm, formDataKey, '')
  531.       }
  532.     },
  533.   },
  534. }
  535. </script>
  537. <style lang="scss" scoped>
  538. .cover-image-cropper {
  539.   position: relative;
  540.   width: 100%;
  541.   height: auto;
  542.   .cropper-container {
  543.     display: flex;
  544.     &-left {
  545.       position: relative;
  547.       .origin-image {
  548.         .img-picker.cover-image-cropper-picker {
  549.           width: 256px;
  550.           height: 176px;
  551.           line-height: 176px;
  552.           .delete-icon-zIndex {
  553.             z-index: 9;
  554.           }
  555.         }
  556.       }
  557.       .cropper-bg,
  558.       .clip-image {
  559.         position: absolute;
  560.         top: 1px;
  561.         left: 1px;
  562.       }
  563.       .cropper-bg {
  564.         width: 100%;
  565.         background: rgba(0, 0, 0, 0.35);
  566.       }
  567.       .clip-image {
  568.         width: 100%;
  569.       }
  570.       .drag-resize-box {
  571.         position: absolute;
  572.         cursor: move;
  573.         .zoom-point {
  574.           position: absolute;
  575.           width: 4px;
  576.           height: 4px;
  577.           background-color: #000;
  578.           &.top-left-point {
  579.             top: -2px;
  580.             left: -2px;
  581.             cursor: nwse-resize;
  582.           }
  583.           &.top-right-point {
  584.             top: -2px;
  585.             right: -2px;
  586.             cursor: nesw-resize;
  587.           }
  588.           &.bottom-right-point {
  589.             bottom: -2px;
  590.             right: -2px;
  591.             cursor: nwse-resize;
  592.           }
  593.           &.bottom-left-point {
  594.             bottom: -2px;
  595.             left: -2px;
  596.             cursor: nesw-resize;
  597.           }
  598.         }
  599.       }
  600.     }
  601.     &-right {
  602.       position: relative;
  603.       margin-left: 85px;
  604.       &::before {
  605.         content: ' ';
  606.         position: absolute;
  607.         top: 26px;
  608.         left: -42px;
  609.         width: 1px;
  610.         height: 112px;
  611.         background: rgba(240, 242, 245, 1);
  612.       }
  613.       .ratio-graph-lists {
  614.         position: relative;
  615.         display: flex;
  616.         flex-wrap: wrap;
  617.         .single-item {
  618.           position: relative;
  619.           margin-left: 22px;
  620.           border: 1px solid rgba(216, 220, 230, 1);
  621.           line-height: 70px;
  622.           text-align: center;
  623.           font-size: 14px;
  624.           font-family: PingFangSC-Regular, PingFang SC;
  625.           color: rgba(144, 147, 153, 1);
  626.           background: rgba(240, 242, 245, 1);
  627.           cursor: pointer;
  628.           &:nth-of-type(1) {
  629.             margin-left: 0;
  630.           }
  631.           /** 兼容小屏幕，换行处理 */
  632.           @media (max-width: 1443px) {
  633.             &:nth-of-type(4) {
  634.               margin-left: 0;
  635.             }
  636.             &:nth-of-type(4),
  637.             &:nth-of-type(5) {
  638.               margin-top: 35px;
  639.             }
  640.           }
  641.           &.active {
  642.             border-color: rgba(25, 137, 250, 1);
  643.             color: rgba(25, 137, 250, 1);
  644.             background-color: rgba(240, 242, 245, 1);
  645.           }
  646.           &.disabled {
  647.             pointer-events: none;
  648.           }
  649.           &.cropped {
  650.             &::after {
  651.               content: '已获取';
  652.               position: absolute;
  653.               bottom: -27px;
  654.               left: 50%;
  655.               margin-left: -26px;
  656.               border-radius: 9px;
  657.               width: 52px;
  658.               height: 18px;
  659.               line-height: 18px;
  660.               text-align: center;
  661.               font-size: 12px;
  662.               font-family: PingFangSC-Regular, PingFang SC;
  663.               color: rgba(4, 134, 254, 1);
  664.               background: rgba(224, 240, 255, 1);
  665.             }
  666.           }
  667.         }
  668.       }
  670.       .save-btn {
  671.         margin-top: 70px;
  672.         border-radius: 4px;
  673.         width: 96px;
  674.         height: 36px;
  675.         line-height: 36px;
  676.         text-align: center;
  677.         font-size: 14px;
  678.         font-family: PingFangSC-Regular, PingFang SC;
  679.         color: rgba(255, 255, 255, 1);
  680.         background: rgba(25, 137, 250, 1);
  681.         cursor: pointer;
  682.         &.disabled {
  683.           color: rgba(144, 147, 153, 1);
  684.           background-color: rgba(240, 242, 245, 1);
  685.           pointer-events: none;
  686.         }
  687.         @media (max-width: 1443px) {
  688.           margin-top: 35px;
  689.         }
  690.       }
  691.     }
  692.   }
  693. }
  694. </style>

vue-cropper

使用 vue-cropper 实现同样的需求

  1. <template>
  2.   <div class="cropper-wrapper">
  3.     <div class="cropper-content">
  4.       <div class="cropper-content-left">
  5.         <div v-if="!hasOriginPic" class="origin-image">
  6.           <img-picker
  7.             ref="imgPicker"
  8.             customClass="cover-image-cropper-picker"
  9.             :imgKey="originPicKey"
  10.             :defaultImg="defaultImg"
  11.             :formDataKey="selfFormDataKey"
  12.             @picked="setImgUrl"
  13.             @delete-click="deleteCurrentSelectedImage"
  14.           />
  15.         </div>
  16.         <div v-else class="my-cropper-box">
  17.           <svg-icon
  18.             iconName="icon-delete-file"
  19.             className="delete-icon"
  20.             :styleObject="deleteIconStyle"
  21.             @handleClickEvent="deleteCurrentSelectedImage"
  22.           />
  23.           <vueCropper
  24.             ref="cropper"
  25.             :img="articleForm.cover_img"
  26.             :outputSize="option.size"
  27.             :info="true"
  28.             :full="option.full"
  29.             :canMove="option.canMove"
  30.             :canMoveBox="option.canMoveBox"
  31.             :fixedBox="option.fixedBox"
  32.             :original="option.original"
  33.             :autoCrop="option.autoCrop"
  34.             :autoCropWidth="option.autoCropWidth"
  35.             :autoCropHeight="option.autoCropHeight"
  36.             :centerBox="option.centerBox"
  37.             :high="option.high"
  38.             :infoTrue="option.infoTrue"
  39.             :maxImgSize="option.maxImgSize"
  40.             @cropMoving="cropMoving"
  41.             :enlarge="option.enlarge"
  42.             :mode="option.mode"
  43.             :limitMinSize="option.limitMinSize"
  44.             :fixed="option.fixed"
  45.             :fixedNumber="option.fixedNumber"
  46.           ></vueCropper>
  47.         </div>
  48.       </div>
  49.       <div class="cropper-content-right">
  50.         <div class="ratio-graph-lists">
  51.           <div
  52.             v-for="(item, index) in ratioLists"
  53.             class="single-item"
  54.             :class="{
  55.               active: currentGraphIndex === index,
  56.               disabled: !hasOriginPic,
  57.               cropped: item.isCropped,
  58.               hasEditStyle: !item.isCropped && Object.keys(item.editStyle).length,
  59.             }"
  60.             :style="[item.style, !item.isCropped ? item.editStyle : '']"
  61.             :data-radio="item.text"
  62.             @click="handleSelectedClick(index)"
  63.           >
  64.             <div class="text-layer">
  65.               <span>{{ item.text }}</span>
  66.             </div>
  67.           </div>
  68.         </div>
  69.         <div class="save-btn" :class="{ disabled: !hasOriginPic }" @click="saveCropperImage">
  70.           保存图片
  71.         </div>
  72.       </div>
  73.     </div>
  74.     <!-- 图片选择弹窗 -->
  75.     <picture-select-dialog />
  76.   </div>
  77. </template>
  79. <script>
  80. import { VueCropper } from 'vue-cropper'
  81. import { ImgPicker, PictureSelectDialog } from '@/components'
  83. export default {
  84.   name: 'CoverImageCropperPlus',
  85.   props: {
  86.     articleForm: {
  87.       type: Object || String,
  88.     },
  89.   },
  90.   data() {
  91.     return {
  92.       ratioLists: [
  93.         {
  94.           text: '1:1',
  95.           isCropped: false,
  96.           croppedPosition: {},
  97.           style: { width: '70px', height: '70px' },
  98.           editStyle: {},
  99.           scaleFactor: [1, 1],
  100.           key: '1_1',
  101.           extraValue: { prefix: '', suffix: '_1_1' },
  102.         },
  103.         {
  104.           text: '3:2',
  105.           isCropped: false,
  106.           croppedPosition: {},
  107.           style: { width: '105px', height: '70px' },
  108.           editStyle: {},
  109.           scaleFactor: [3, 2],
  110.           key: '3_2',
  111.           extraValue: { prefix: '', suffix: '_3_2' },
  112.         },
  113.         {
  114.           text: '7:5',
  115.           isCropped: false,
  116.           croppedPosition: {},
  117.           style: { width: '97px', height: '70px' },
  118.           editStyle: {},
  119.           scaleFactor: [7, 5],
  120.           key: '7_5',
  121.           extraValue: { prefix: '', suffix: '_7_5' },
  122.         },
  123.         {
  124.           text: '17:10',
  125.           isCropped: false,
  126.           croppedPosition: {},
  127.           style: { width: '118px', height: '70px' },
  128.           editStyle: {},
  129.           scaleFactor: [17, 10],
  130.           key: '17_10',
  131.           extraValue: { prefix: '', suffix: '_17_10' },
  132.         },
  133.         {
  134.           text: '21:10',
  135.           isCropped: false,
  136.           croppedPosition: {},
  137.           style: { width: '143px', height: '70px' },
  138.           editStyle: {},
  139.           scaleFactor: [21, 10],
  140.           key: '21_10',
  141.           extraValue: { prefix: '', suffix: '_21_10' },
  142.         },
  143.       ],
  144.       // 当前比例尺
  145.       currentGraphIndex: '',
  146.       // imgPicker key
  147.       originPicKey: 'CoverImageCropperPlus',
  148.       // formdata keys
  149.       selfFormDataKey: ['cover_img_id', 'cover_img'],
  150.       // 待提交的数据
  151.       submitMsg: {},
  152.       deleteIconStyle: {
  153.         width: '14px',
  154.         height: '14px',
  155.       },
  157.       crap: false,
  158.       option: {
  159.         size: 1,
  160.         full: false,
  161.         outputType: 'png',
  162.         canMove: false,
  163.         fixedBox: false,
  164.         original: false,
  165.         canMoveBox: true,
  166.         autoCrop: false,
  167.         centerBox: true,
  168.         high: false,
  169.         cropData: {},
  170.         enlarge: 1,
  171.         mode: 'contain',
  172.         maxImgSize: 2000,
  173.         fixed: true,
  174.         fixedNumber: [1, 1],
  175.       },
  176.     }
  177.   },
  178.   components: {
  179.     VueCropper,
  180.     ImgPicker,
  181.     PictureSelectDialog,
  182.   },
  183.   computed: {
  184.     defaultImg() {
  185.       return {
  186.         id: this.articleForm.cover_img_id,
  187.         file_path: this.articleForm.cover_img,
  188.       }
  189.     },
  190.     hasOriginPic() {
  191.       return this.articleForm.cover_img !== ''
  192.     },
  193.   },
  194.   watch: {
  195.     hasOriginPic: {
  196.       handler(newVal, oldVal) {
  197.         if (!newVal) {
  198.           this.currentGraphIndex = ''
  199.           this.option.canMove = false
  200.           this.ratioLists.map((item) => {
  201.             item.isCropped = false
  202.             item.croppedPosition = {}
  203.             item.editStyle = {}
  204.           })
  205.         }
  206.       },
  207.       immediate: true,
  208.     },
  209.     currentGraphIndex: {
  210.       handler(newVal, oldVal) {
  211.         if (newVal !== '') {
  212.           this.option.canMove = true
  213.           this.$nextTick(() => {
  214.             const selfRatioItem = this.ratioLists[newVal]
  215.             const selfIsCropped = selfRatioItem.isCropped
  216.             const selfPositionMsg = selfRatioItem.croppedPosition
  217.             // update current cropper ratio
  218.             this.option.fixedNumber = selfRatioItem.scaleFactor
  219.             this.$nextTick(() => {
  220.               // auto crop
  221.               this.$refs.cropper.goAutoCrop()
  222.               this.$nextTick(() => {
  223.                 // if cropped and has position message, update crop box
  224.                 if (selfIsCropped && selfPositionMsg) {
  225.                   this.$refs.cropper.cropOffsertX = selfPositionMsg.x
  226.                   this.$refs.cropper.cropOffsertY = selfPositionMsg.y
  227.                   this.$refs.cropper.cropW = selfPositionMsg.width
  228.                   this.$refs.cropper.cropH = selfPositionMsg.height
  229.                 }
  230.               })
  231.             })
  232.           })
  233.         }
  234.       },
  235.       immediate: true,
  236.     },
  237.   },
  238.   methods: {
  239.     /** 设置选中的图片*/
  240.     setImgUrl(data) {
  241.       const { file_id, file_path } = data[this.originPicKey]
  242.       this.articleForm.cover_img_id = file_id
  243.       this.articleForm.cover_img = file_path
  244.       // 裁切组件获取图片地址
  245.       this.option.img = file_path
  246.     },
  248.     /**
  249.      * 删除当前选中图回调函数
  250.      */
  251.     deleteCurrentSelectedImage() {
  252.       if (Array.isArray(this.selfFormDataKey)) {
  253.         this.selfFormDataKey.forEach((singleKey) => {
  254.           this.$set(this.articleForm, singleKey, '')
  255.         })
  256.       } else {
  257.         this.$set(this.articleForm, this.selfFormDataKey, '')
  258.       }
  259.     },
  261.     /** 裁切图回显 */
  262.     setPreviewStyle() {
  263.       this.ratioLists.map((item, index) => {
  264.         const selfCoverImg = JSON.parse(JSON.stringify(this.articleForm.cover_img))
  265.         const coverImgSplitArr = selfCoverImg.split('.')
  266.         const covreImgSuffix = coverImgSplitArr[coverImgSplitArr.length - 1]
  267.         const coverImgPrefix = coverImgSplitArr.splice(0, coverImgSplitArr.length - 1).join('.')
  268.         const newICoverImg =
  269.           coverImgPrefix +
  270.           item.extraValue.suffix +
  271.           '.' +
  272.           covreImgSuffix +
  273.           '?timestamp=' +
  274.           new Date().getTime()
  276.         item.editStyle = {
  277.           background: `url(${newICoverImg}) no-repeat 0 0`,
  278.           backgroundSize: 'contain',
  279.         }
  280.       })
  281.     },
  283.     /**
  284.      * 点击选中当前比例
  285.      * @param {number} index - 当前比例的下标
  286.      */
  287.     handleSelectedClick(index) {
  288.       if (this.hasOriginPic && this.currentGraphIndex !== index) {
  289.         this.currentGraphIndex = index
  290.       }
  291.     },
  293.     /**
  294.      * 保存当前裁切比例下的图片位置信息
  295.      */
  296.     saveCropperImage() {
  297.       const imgScale = this.$refs.cropper.scale
  298.       const { x1: cropX1, x2: cropX2, y1: cropY1, y2: cropY2 } = this.$refs.cropper.getCropAxis()
  299.       const { x1: imgX1, x2: imgX2, y1: imgY1, y2: imgY2 } = this.$refs.cropper.getImgAxis()
  300.       // console.log('cropBox axis: ', cropX1, cropX2, cropY1, cropY1)
  301.       // console.log('image axis:  ', imgX1, imgX2, imgY1, imgY2)
  302.       const currentGraph = this.ratioLists[this.currentGraphIndex]
  303.       currentGraph.isCropped = true
  305.       // 保存裁切后的位置信息
  306.       currentGraph.croppedPosition = Object.assign(
  307.         {},
  308.         {
  309.           x: cropX1,
  310.           y: cropY1,
  311.           width: cropX2 - cropX1,
  312.           height: cropY2 - cropY1,
  313.         }
  314.       )
  316.       // 表单提交所需要的比例信息
  317.       const singleCoverScale = {}
  318.       singleCoverScale.x = Math.round((cropX1 - imgX1) / imgScale)
  319.       singleCoverScale.y = Math.round((cropY1 - imgY1) / imgScale)
  320.       singleCoverScale.width = Math.round((cropX2 - cropX1) / imgScale)
  321.       singleCoverScale.height = Math.round((cropY2 - cropY1) / imgScale)
  323.       Object.assign(singleCoverScale, currentGraph.extraValue)
  325.       if (this.submitMsg[currentGraph.key]) {
  326.         this.$delete(this.submitMsg, currentGraph.key)
  327.       }
  329.       this.$set(this.submitMsg, currentGraph.key, singleCoverScale)
  330.       console.log('submitMsg', this.submitMsg)
  331.     },
  332.   },
  333. }
  334. </script>
  336. <style lang="scss" scoped>
  337. .test-button {
  338.   display: flex;
  339.   flex-wrap: wrap;
  340. }
  342. .btn {
  343.   display: inline-block;
  344.   line-height: 1;
  345.   white-space: nowrap;
  346.   cursor: pointer;
  347.   background: #fff;
  348.   border: 1px solid #c0ccda;
  349.   color: #1f2d3d;
  350.   text-align: center;
  351.   box-sizing: border-box;
  352.   outline: none;
  353.   margin: 20px 10px 0px 0px;
  354.   padding: 9px 15px;
  355.   font-size: 14px;
  356.   border-radius: 4px;
  357.   color: #fff;
  358.   background-color: #50bfff;
  359.   border-color: #50bfff;
  360.   transition: all 0.2s ease;
  361.   text-decoration: none;
  362.   user-select: none;
  363. }
  365. .cropper-content {
  366.   display: flex;
  367.   &-left {
  368.     position: relative;
  369.     width: 256px;
  370.     height: 176px;
  371.     .origin-image {
  372.       position: absolute;
  373.       top: 0;
  374.       left: 0;
  375.       z-index: 9;
  376.       .img-picker.cover-image-cropper-picker {
  377.         width: 256px;
  378.         height: 176px;
  379.         line-height: 176px;
  380.         .delete-icon-zIndex {
  381.           z-index: 9;
  382.         }
  383.       }
  384.     }
  385.     .my-cropper-box {
  386.       position: relative;
  387.       width: 256px;
  388.       height: 176px;
  389.       border: 1px dashed #dcdfe6;
  390.       &:hover {
  391.         border-color: #409eff;
  392.         .delete-icon {
  393.           visibility: visible;
  394.         }
  395.       }
  396.       .delete-icon {
  397.         visibility: hidden;
  398.         z-index: 99;
  399.         position: absolute;
  400.         top: -7px;
  401.         right: -7px;
  402.         cursor: pointer;
  403.       }
  404.     }
  405.   }
  406.   &-right {
  407.     position: relative;
  408.     margin-left: 85px;
  409.     &::before {
  410.       content: ' ';
  411.       position: absolute;
  412.       top: 26px;
  413.       left: -42px;
  414.       width: 1px;
  415.       height: 112px;
  416.       background: rgba(240, 242, 245, 1);
  417.     }
  418.     .ratio-graph-lists {
  419.       position: relative;
  420.       display: flex;
  421.       flex-wrap: wrap;
  422.       /** 兼容小屏幕，换行处理 */
  423.       @media (max-width: 1443px) {
  424.         width: 316px;
  425.         .single-item {
  426.           &:nth-of-type(4) {
  427.             margin-left: 0;
  428.           }
  429.           &:nth-of-type(4),
  430.           &:nth-of-type(5) {
  431.             margin-top: 35px;
  432.           }
  433.         }
  434.       }
  435.       .single-item {
  436.         position: relative;
  437.         margin-left: 22px;
  438.         border: 1px solid rgba(216, 220, 230, 1);
  439.         line-height: 70px;
  440.         text-align: center;
  441.         font-size: 14px;
  442.         font-family: PingFangSC-Regular, PingFang SC;
  443.         color: rgba(144, 147, 153, 1);
  444.         background: rgba(240, 242, 245, 1);
  445.         cursor: pointer;
  446.         &:nth-of-type(1) {
  447.           margin-left: 0;
  448.         }
  449.         &:hover,
  450.         &.active {
  451.           border-color: rgba(25, 137, 250, 1);
  452.           color: rgba(25, 137, 250, 1);
  453.           background-color: rgba(240, 242, 245, 1);
  454.         }
  455.         &.disabled {
  456.           pointer-events: none;
  457.         }
  458.         &.cropped {
  459.           &::after {
  460.             content: '已获取';
  461.             position: absolute;
  462.             bottom: -27px;
  463.             left: 50%;
  464.             margin-left: -26px;
  465.             border-radius: 9px;
  466.             width: 52px;
  467.             height: 18px;
  468.             line-height: 18px;
  469.             text-align: center;
  470.             font-size: 12px;
  471.             font-family: PingFangSC-Regular, PingFang SC;
  472.             color: rgba(4, 134, 254, 1);
  473.             background: rgba(224, 240, 255, 1);
  474.           }
  475.         }
  476.         &.hasEditStyle {
  477.           .text-layer {
  478.             color: #fff;
  479.             background-color: rgba(0, 0, 0, 0.15);
  480.           }
  481.         }
  482.       }
  483.     }
  485.     .save-btn {
  486.       margin-top: 70px;
  487.       border-radius: 4px;
  488.       width: 96px;
  489.       height: 36px;
  490.       line-height: 36px;
  491.       text-align: center;
  492.       font-size: 14px;
  493.       font-family: PingFangSC-Regular, PingFang SC;
  494.       color: rgba(255, 255, 255, 1);
  495.       background: rgba(25, 137, 250, 1);
  496.       cursor: pointer;
  497.       &:hover {
  498.         border-color: #369efe;
  499.         background-color: #369efe;
  500.       }
  501.       &.disabled {
  502.         color: rgba(144, 147, 153, 1);
  503.         background-color: rgba(240, 242, 245, 1);
  504.         pointer-events: none;
  505.       }
  506.       @media (max-width: 1443px) {
  507.         margin-top: 35px;
  508.       }
  509.     }
  510.   }
  511. }
  512. </style>

参考