devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue uni-app 裁剪图片(裁剪头像)插件vue-image-cropper_uni-image-cropper

作者：菜鸟追梦旅行 | 2024-03-22 10:05:29

赞

踩

uni-image-cropper

一、项目预览。

效果：

一个手指拖动，可以移动图片，两个手指拖动可以缩放。

下载该项目：

git clone https://github.com/Q956164483/vue-image-cropper.git

运行：

npm i

cd vue-image-cropper

npm run serve

二、应用在自己的项目。

1.复制“vue-image-cropper”项目中的 ./src/components/imageCropper.vue文件 (imageCropper.vue需要引入exif-small.js)

2.在需要使用的页面直接引入imageCropper组件，并绑定cropperConfig配置参数和裁剪之后的回调函数callback。

3.安装lrz。

npm i lrz -S

<image-cropper ref="imageCropper" :cropperConfig="cropperConfig" :callback="loadImage"></image-cropper>
  1. cropperConfig: {
  2.   width: 1, // 裁剪宽度（比例）
  3.   height: 1, // 裁剪高度（比例）
  4.   quality: 0.7, // 图片质量（0~1之间）
  5.   maxWidth: 750 // 导出的图片的最大宽度
  6. }

  1. loadImage (data) {
  2.   console.log(data)；//data为图片base64字符串，可以直接放入img的src
  3. }

三、本人修改了部分代码，可以直接复制源码。

可以选择支持一下博主，花个几十积分，我的代码：

uni-app的图片裁剪nice-cropper.rar_uniapp图片裁剪,uniapp图片裁剪-互联网文档类资源-CSDN下载

如果饭都吃不起，就选择如下：

安装lrz：

npm i lrz -S

1.效果。

2.imageCropper.vue的代码：

  1. <template>
  2.     <div ref="cropperPage" class="cropper-page" v-show="isShow">
  3.         <div @click="cancel()" class="icon icon-back"></div>
  4.         <input ref="file" type="file" accept="image/*" @change="readImage">
  5.         <img alt="" class="cropper-img" :style="imageStyle" ref="img">
  6.         <div class="cover box box-ac box-jc" :style="{height: coverHeight + 'px'}">
  7.             <!-- 请调整图片 -->
  8.         </div>
  9.         <div ref="cropBox" class="cropper-box" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove"></div>
  10.         <div class="cover cover box box-ac box-jc" :style="{height: coverHeight + 'px'}">
  11.             <div class="box box-f1 box-jc box-fh">
  12.                 <div class="btn" @click="cancel">取消</div>
  13.                 <!--重选checkPhoto-->
  14.             </div>
  15.             <div class="box box-f1 box-jc box-fh">
  16.                 <div class="btn sure" @click="confirm">确定</div>
  17.             </div>
  18.         </div>
  19.     </div>
  20. </template>
  21.  
  22. <script>
  23.     import lrz from 'lrz'
  24.     const getDinstance = function(point0, point1) {
  25.         return Math.sqrt(Math.pow(point0.pageY - point1.pageY, 2) + Math.pow(point0.pageX - point1.pageX, 2))
  26.     }
  27.     export default {
  28.         name: 'imageCropper',
  29.         props: {
  30.             //裁剪确认后的回调，结果是图片数据。
  31.             callback: {
  32.                 type: Function,
  33.                 default () {}
  34.             },
  35.             cropperConfig: {
  36.                 type: Object,
  37.                 default () {
  38.                     return {
  39.                         width: 1,//裁剪宽度（比例）
  40.                         height: 1,//裁剪高度（比例）
  41.                         quality: 0.7,//图片质量（0~1之间）
  42.                         maxWidth: 640//导出的图片最大宽度
  43.                     }
  44.                 }
  45.             }
  46.         },
  47.         data() {
  48.             return {
  49.                 coverHeight: 0,
  50.                 cropperHeight: 0,
  51.                 imgInitTop: 0,
  52.                 amplitude: 0,
  53.                 imageState: {
  54.                     left: 0,
  55.                     top: 0,
  56.                     scale: 1,
  57.                     width: 0,
  58.                     height: 0,
  59.                     originX: 0,
  60.                     originY: 0
  61.                 },
  62.                 distance: 0,
  63.                 imageStyle: {
  64.                     top: '0',
  65.                     transform: 'translate3d(0px, 0px, 0px) scale(1)',
  66.                     transformOrigin: 'left top'
  67.                 },
  68.                 cropBoxRect: {},
  69.                 touchPos: {
  70.                     x: 0,
  71.                     y: 0
  72.                 },
  73.                 isShow: false,
  74.                 minScale: 0,
  75.                 info: '',
  76.                 orientation: ''
  77.             }
  78.         },
  79.         watch: {
  80.             'imageState': {
  81.                 handler(val) {
  82.                     this.imageStyle.transform = 'translate3d(-' + val.left + 'px, -' + val.top + 'px, 0px) scale(' + val.scale + ')'
  83.                 },
  84.                 deep: true
  85.             }
  86.         },
  87.         methods: {
  88.             cancel() {
  89.                 this.file = null
  90.                 this.isShow = false
  91.             },
  92.             checkPhoto() {
  93.                 this.$refs.file.click()
  94.             },
  95.             readImage($event) {
  96.                 var self = this
  97.                 var file = $event.target.files[0]
  98.                 lrz(file)
  99.                     .then(rst => {
  100.                         self.orientation = 1
  101.                         self.$refs.img.onload = () => {
  102.                             self.initCropper()
  103.                         }
  104.                         self.$refs.img.src = rst.base64
  105.                         $event.target.value = null
  106.                     })
  107.             },
  108.             initCropper() {
  109.                 this.isShow = true // 显示裁剪界面
  110.                 this.$nextTick(() => {
  111.                     let cropperPage = this.$refs.cropperPage
  112.                     let pageWidth = cropperPage.clientWidth
  113.                     let pageHeight = cropperPage.clientHeight
  114.                     let cropBox = this.$refs.cropBox
  115.                     let cropBoxWidth = cropBox.clientWidth
  116.                     let cropBoxHeight = Math.floor(cropBoxWidth * (+this.cropperConfig.height) / (+this.cropperConfig.width))
  117.                     this.$refs.cropBox.style.height = cropBoxHeight + 'px'
  118.                     this.coverHeight = (pageHeight - cropBoxHeight) / 2
  119.                     let cropBoxTop = this.coverHeight
  120.                     this.imageState.left = 0
  121.                     this.imageState.top = 0
  122.                     this.imageStyle.top = cropBoxTop + 'px'
  123.                     this.cropBoxRect = {
  124.                         left: 0,
  125.                         top: cropBoxTop,
  126.                         width: pageWidth,
  127.                         height: cropBoxHeight
  128.                     }
  129.                     let img = this.$refs.img
  130.                     var width = this.imageState.width = img.naturalWidth
  131.                     var height = this.imageState.height = img.naturalHeight
  132.                     // 计算imageState
  133.                     if (width > height) {
  134.                         this.minScale = this.imageState.scale = this.cropBoxRect.height / height
  135.                         this.imageState.left = (width * this.imageState.scale - this.cropBoxRect.width) / 2
  136.                     } else {
  137.                         this.minScale = this.imageState.scale = this.cropBoxRect.width / width
  138.                         this.imageState.top = (height * this.imageState.scale - this.cropBoxRect.height) / 2
  139.                     }
  140.                 })
  141.             },
  142.             confirm() {
  143.                 let self = this
  144.                 let imageState = this.imageState
  145.                 let cropBoxRect = this.cropBoxRect
  146.                 // 导出图片的最大宽度
  147.                 let maxWidth = this.cropperConfig.maxWidth
  148.                 let scale2 = maxWidth / cropBoxRect.width
  149.                 let scale = imageState.scale * scale2
  150.                 let width = cropBoxRect.width * scale2
  151.                 let height = cropBoxRect.height * scale2
  152.                 let left = imageState.left * scale2
  153.                 let top = imageState.top * scale2
  154.                 let image = this.$refs.img
  155.                 let canvas = document.createElement('canvas')
  156.                 let ctx = canvas.getContext('2d')
  157.                 // ios 的照片有拍摄的角度信息 参考 http://www.bcty365.com/content-142-3055-1.html
  158.                 let orientation = this.orientation
  159.                 switch (orientation) {
  160.                     case 1:
  161.                         canvas.width = width
  162.                         canvas.height = height
  163.                         ctx.drawImage(image, left / scale, top / scale, width / scale, height / scale, 0, 0, width, height)
  164.                         break
  165.                     case 6:
  166.                         canvas.width = height
  167.                         canvas.height = width
  168.                         ctx.rotate(90 * Math.PI / 180)
  169.                         ctx.drawImage(image, left / scale, top / scale, width / scale, height / scale, 0, -height, width, height)
  170.                         break
  171.                     case 8:
  172.                         canvas.width = height
  173.                         canvas.height = width
  174.                         ctx.rotate(-90 * Math.PI / 180)
  175.                         ctx.drawImage(image, left / scale, top / scale, width / scale, height / scale, -width, 0, width, height)
  176.                         break
  177.                     case 3:
  178.                         canvas.width = width
  179.                         canvas.height = height
  180.                         ctx.rotate(180 * Math.PI / 180)
  181.                         ctx.drawImage(image, left / scale, top / scale, width / scale, height / scale, -width, -height, width, height)
  182.                         break
  183.                 }
  184.                 let dataUrl = canvas.toDataURL('image/jpeg', this.cropperConfig.quality)
  185.                 self.callback(dataUrl)
  186.                 self.isShow = false
  187.             },
  188.             getFocalPoint(point0, point1) {
  189.                 return {
  190.                     x: (point0.pageX + point1.pageX) / 2,
  191.                     y: (point0.pageY + point1.pageY) / 2
  192.                 }
  193.             },
  194.             touchStart(event) {
  195.                 var fingerCount = event.touches.length
  196.                 if (fingerCount) {
  197.                     // 记录触摸初始位置
  198.                     let touchEvent = event.touches[0]
  199.                     this.touchPos = {
  200.                         x: touchEvent.clientX,
  201.                         y: touchEvent.clientY
  202.                     }
  203.                 }
  204.                 if (fingerCount >= 2) {
  205.                     // 获取两点距离、中点位置；两点距离old/new=放大倍数；中点位置，缩放中心；
  206.                     let point0 = event.touches[0]
  207.                     let point1 = event.touches[1]
  208.                     this.distance = getDinstance(point0, point1)
  209.                     this.touchPos = this.getFocalPoint(point0, point1)
  210.                     // 设置缩放倍数，
  211.                 }
  212.             },
  213.             touchMove(event) {
  214.                 // 根据触摸点位移，移动图片，重置触摸点位置
  215.                 var fingerCount = event.touches.length
  216.                 var touchEvent = event.touches[0]
  217.                 if (fingerCount === 1) {
  218.                     let distX = touchEvent.pageX - this.touchPos.x
  219.                     let distY = touchEvent.pageY - this.touchPos.y
  220.                     let newX = this.imageState.left - distX
  221.                     let newY = this.imageState.top - distY
  222.                     let scale = this.imageState.scale
  223.                     // alert(scale)
  224.                     let maxX = this.imageState.width * scale - this.cropBoxRect.width
  225.                     let maxY = this.imageState.height * scale - this.cropBoxRect.height
  226.                     this.imageState.left = newX < 0 ? 0 : (newX > maxX ? maxX : newX)
  227.                     this.imageState.top = newY < 0 ? 0 : (newY > maxY ? maxY : newY)
  228.                     this.touchPos.x = touchEvent.pageX
  229.                     this.touchPos.y = touchEvent.pageY
  230.                 } else if (fingerCount > 1) {
  231.                     let point0 = event.touches[0]
  232.                     let point1 = event.touches[1]
  233.                     let distance = getDinstance(point0, point1)
  234.                     let zoom = distance / this.distance
  235.                     let scale = zoom * this.imageState.scale
  236.                     let maxX = this.imageState.width * scale - this.cropBoxRect.width
  237.                     let maxY = this.imageState.height * scale - this.cropBoxRect.height
  238.                     let touchPos = this.getFocalPoint(point0, point1)
  239.                     let newX = zoom * (this.imageState.left + touchPos.x) - touchPos.x
  240.                     let newY = zoom * ((this.imageState.top - this.imgInitTop) + touchPos.y) - touchPos.y + this.imgInitTop
  241.                     // 限制缩放
  242.                     // 图片新位置:由中点位置确认;(新位置到中点)/(旧位置到中点)=(new scale)/(old scale)
  243.                     // newLeft - touchPos.x = (distance / this.distance) * (oldLetf - touchPos.x)
  244.                     // oldLeft = 0 - this.imageState.left
  245.                     // oldTop = imgInitTop - this.imageState.top
  246.                     this.distance = distance
  247.                     if (scale < this.minScale) {
  248.                         this.imageState.scale = this.minScale
  249.                     } else {
  250.                         this.imageState.scale = scale
  251.                         this.imageState.left = newX < 0 ? 0 : (newX > maxX ? maxX : newX)
  252.                         this.imageState.top = newY < 0 ? 0 : (newY > maxY ? maxY : newY)
  253.                     }
  254.                     this.touchPos = touchPos
  255.                 }
  256.             }
  257.         }
  258.     }
  259. </script>
  260.  
  261. <style lang="scss" scoped>
  262. $themeColor:#409EFF;
  263. .box {
  264.     display: flex;
  265.     position: relative;
  266. }
  267. .box-f1 {
  268.     flex: 1;
  269. }
  270. .box-ac {
  271.     align-items: center
  272. }
  273. .box-jc {
  274.     justify-content: center
  275. }
  276. .box-ver {
  277.     flex-direction: column
  278. }
  279. .cropper-page {
  280.     position: fixed;
  281.     top: 0;
  282.     left: 0;
  283.     width: 100%;
  284.     height: 100%;
  285.     z-index: 10;
  286.     background-color: #fff;
  287.     overflow: hidden;
  288. }
  289. .cover {
  290.     color: #FFF;
  291.     font-size: .4rem;
  292.     background-color: rgba(0, 0, 0, 0.2);
  293. }
  294. .cropper-box {
  295.     // border: 1px dashed #FFF;
  296.     border: 2px dashed #FFF;
  297. }
  298. .cropper-img {
  299.     position: absolute;
  300.     z-index: -1;
  301. }
  302. input[type="file"] {
  303.     opacity: 0;
  304.     position: fixed;
  305.     top: -1000px;
  306.     left: -1000px;
  307. }
  308. .btn {
  309.     font-size: .6rem;
  310.     padding: .1rem .3rem;
  311.     border: .02rem solid;
  312.     color: #FFF;
  313.     border-radius: .4rem;
  314.     width:80px;
  315.     height:35px;
  316.     display: flex;
  317.     align-items: center;
  318.     justify-content: center;
  319.     background:#909399;
  320.     &.sure {
  321.         background: $themeColor;
  322.     }
  323. }
  324. </style>

3.简单使用。

  1. <template>
  2.     <div>
  3.         <image-cropper ref="imageCropper" :cropperConfig="cropperConfig" :callback="loadImage"></image-cropper>
  4.         <button @click="selectFile()">打开</button>
  5.         <div>
  6.             <img v-if="img" :src="img" style="width:200px;height:200px;"/>
  7.         </div>
  8.     </div>
  9. </template>
  10.  
  11. <script>
  12. import imageCropper from '@/components/imageCropper'
  13. export default {
  14.     name: 'Home',
  15.     components: {imageCropper},
  16.     data() {
  17.         return {
  18.             img:'',
  19.             cropperConfig: {
  20.                 width: 1,
  21.                 height: 1,
  22.                 quality: 0.7,
  23.                 maxWidth: 750
  24.             }
  25.         };
  26.     },
  27.     mounted() {
  28.         
  29.     },
  30.     methods: {
  31.         selectFile () {
  32.             this.$refs.imageCropper.checkPhoto()
  33.         },
  34.         // 图片裁剪之后的回调
  35.         loadImage (data) {
  36.             // this.images.push(data)
  37.             console.log(data)
  38.             this.img=data;
  39.         },
  40.     },
  41. };
  42. </script>
  43.  
  44. <style lang="scss" scoped>
  45.  
  46. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/287091
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号