yuanlei
/
udemo-cut-image
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
袁磊 3 months ago
parent
247a84933a
commit
c5d3304eec
2 changed files with 183 additions and 204 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 385
      uni_modules/vrapile-cut-image/components/vrapile-cut-image/vrapile-cut-image.vue
  2. 2
      uni_modules/vrapile-cut-image/readme.md

385
uni_modules/vrapile-cut-image/components/vrapile-cut-image/vrapile-cut-image.vue
View File

@ -1,92 +1,92 @@
<template>
<view class="uni-content-info">
<view class='cropper-content'>
<view v-if="showImage" class="uni-corpper">
<view class="uni-corpper-content">
<image class="uni-corpper-content-image" :src="imageSrc" mode="aspectFit"
:style="'transform:rotate('+rotateAll + 'deg) rotateY('+rotateY + 'deg) rotateX('+rotateX + 'deg)'">
<view class="vrapile-content">
<view class="vrapile-cropper">
<view v-if="showImage" class="vrapile-cropper-inner">
<view class="vrapile-cropper-content">
<image class="vrapile-cropper-image" :src="imageSrc" mode="aspectFit"
:style="'transform:rotate('+rotateAll+'deg) rotateY('+rotateY+'deg) rotateX('+rotateX+'deg)'">
</image>
<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove"
<view class="vrapile-cropper-box" @touchstart.stop="contentStartMove"
@touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
:style="'left:'+cutL+'rpx;top:'+cutT+'rpx;right:'+cutR+'rpx;bottom:'+cutB+'rpx'">
<view class="uni-cropper-view-box">
<view class="uni-cropper-dashed-h"></view>
<view class="uni-cropper-dashed-v"></view>
<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart"
<view class="vrapile-cropper-box-view">
<view class="vrapile-cropper-dashed-h"></view>
<view class="vrapile-cropper-dashed-v"></view>
<view class="vrapile-cropper-line-t" data-drag="top" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart"
<view class="vrapile-cropper-line-r" data-drag="right" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart"
<view class="vrapile-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart"
<view class="vrapile-cropper-line-l" data-drag="left" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart"
<view class="vrapile-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-tr" data-drag="topTight"></view>
<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart"
<view class="vrapile-cropper-point point-tr" data-drag="topRight"></view>
<view class="vrapile-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart"
<view class="vrapile-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart"
<view class="vrapile-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart"
@touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart"
<view class="vrapile-cropper-point point-bl" data-drag="bottomLeft"></view>
<view class="vrapile-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart"
@touchmove.stop="dragMove"></view>
<view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
<view class="vrapile-cropper-point point-lt" data-drag="leftTop"></view>
</view>
</view>
</view>
</view>
</view>
<view class='cropper-operate'>
<view class="cropper-operate-button cropper-operate-button-upload" @click="getImage">
<view class="vrapile-operate">
<view class="vrapile-operate-button vrapile-operate-button-upload" @click="getImage">
<uni-icons type="upload" size="20"></uni-icons>选择
</view>
<view class="cropper-operate-button cropper-operate-button-reset" @click="refresh">
<view class="vrapile-operate-button vrapile-operate-button-reset" @click="reset">
<uni-icons type="loop" size="20"></uni-icons>重置
</view>
<view class="cropper-operate-button cropper-operate-button-reset" @click="rotateTopButtom">
<view class="vrapile-operate-button vrapile-operate-button-reset" @click="rotateTopButtom">
<uni-icons type="left" size="20"></uni-icons>翻转
</view>
<view class="cropper-operate-button cropper-operate-button-reset" @click="rotateLeftRight">
<view class="vrapile-operate-button vrapile-operate-button-reset" @click="rotateLeftRight">
<uni-icons type="top" size="20"></uni-icons>翻转
</view>
<view class="cropper-operate-button cropper-operate-button-rotate" @click="rotateRight(90)">
<view class="vrapile-operate-button vrapile-operate-button-rotate" @click="rotateRight(90)">
<uni-icons type="refreshempty" size="20"></uni-icons>
90
</view>
<view class="cropper-operate-button cropper-operate-button-rotate" @click="rotateRight(-10)">
<view class="vrapile-operate-button vrapile-operate-button-rotate" @click="rotateRight(-10)">
<uni-icons type="refreshempty" size="20" style="transform: rotateY(180deg);"></uni-icons>
10
</view>
<view class="cropper-operate-button cropper-operate-button-rotate" @click="rotateRight(10)">
<view class="vrapile-operate-button vrapile-operate-button-rotate" @click="rotateRight(10)">
<uni-icons type="refreshempty" size="20"></uni-icons>
10
</view>
<view class="cropper-operate-button cropper-operate-button-rotate" @click="rotateRight(3)">
<view class="vrapile-operate-button vrapile-operate-button-rotate" @click="rotateRight(3)">
<uni-icons type="refreshempty" size="20"></uni-icons>
3
</view>
<view class="cropper-operate-button cropper-operate-button-rotate" @click="changeScale(30)">
<view class="vrapile-operate-button vrapile-operate-button-rotate" @click="changeScale(30)">
<uni-icons type="plus" size="20"></uni-icons>
30
</view>
<view class="cropper-operate-button cropper-operate-button-rotate" @click="changeScale(-30)">
<view class="vrapile-operate-button vrapile-operate-button-rotate" @click="changeScale(-30)">
<uni-icons type="minus" size="20"></uni-icons>
30
</view>
<view class="cropper-operate-button cropper-operate-button-rotate" @click="changeScale(3)">
<view class="vrapile-operate-button vrapile-operate-button-rotate" @click="changeScale(3)">
<uni-icons type="plus" size="20"></uni-icons>
3
</view>
</view>
<view class='cropper-image' v-if="imageViewSrc">
<image mode="aspectFit" class='cropper-image-image' :src="imageViewSrc"></image>
<view class="vrapile-view" v-if="imageViewSrc">
<image class="vrapile-view-image" mode="aspectFit" :src="imageViewSrc"></image>
</view>
<view class='cropper-config'>
<button class="cropper-config-button" type="warn" @click="saveImageInfo"> 提交 </button>
<view class="vrapile-submit">
<button class="vrapile-submit-button" type="warn" @click="saveImageInfo"> 提交 </button>
</view>
<canvas class="cropper-canvas" canvas-id="imageCanvas"></canvas>
<canvas class="vrapile-canvas" canvas-id="imageCanvas"></canvas>
</view>
</template>
@ -108,7 +108,7 @@
DRAFG_MOVE_RATIO = 1 //移动时候的比例,
export default {
name: 'cutImage',
name: "cutImage",
props:{
avatar:{
type: String
@ -236,7 +236,7 @@
})
this.getImageInfo()
},
refresh(){
reset(){
this.setData({
cutL: 150,
cutT: 150,
@ -263,7 +263,7 @@
// 获取图片
getImageInfo() {
// 将图片写入画布
let ctx = uni.createCanvasContext('imageCanvas', this)
let ctx = uni.createCanvasContext("imageCanvas", this)
// 清除内容
ctx.clearRect(0, 0, this.rpxToPx(750), this.rpxToPx(750))
// 重置旋转内容
@ -280,7 +280,7 @@
}
ctx.translate(this.rpxToPx(-375), this.rpxToPx(-375))
// 设置canvas背景色
// ctx.fillStyle = 'black';
// ctx.fillStyle = "black";
// ctx.fillRect(0, 0, this.rpxToPx(750), this.rpxToPx(750))
ctx.drawImage(this.imageSrc, IMG_RATIO>=1?0:(IMG_REAL_H-IMG_REAL_W)/2, IMG_RATIO<=1?0:(IMG_REAL_W-IMG_REAL_H)/2, IMG_REAL_W, IMG_REAL_H)
// 用户反馈，此处ios旋转后无法预览，改true为false可解决问题
@ -293,7 +293,7 @@
destWidth: this.rpxToPx(750 - this.cutL - this.cutR) * this.scaleTate,
destHeight: this.rpxToPx(750 - this.cutT - this.cutB) * this.scaleTate,
quality: 1,
canvasId: 'imageCanvas',
canvasId: "imageCanvas",
success: (res)=> {
this.setData({
imageViewSrc: res.tempFilePath
@ -306,7 +306,7 @@
})
},
saveImageInfo(){
this.$emit('save', {
this.$emit("save", {
avatar: this.imageViewSrc
})
return this
@ -363,22 +363,7 @@
dragMove(e) {
let dragType = e.target.dataset.drag
switch (dragType) {
case 'right':
let dragLengthR = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
if (CUT_R + dragLengthR < 0) dragLengthR = -CUT_R
this.setData({
cutR: CUT_R + dragLengthR
})
break
case 'left':
let dragLengthL = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
if (CUT_L - dragLengthL < 0) dragLengthL = CUT_L
if ((CUT_L - dragLengthL) > (SCREEN_WIDTH - this.cutR)) dragLengthL = CUT_L - (SCREEN_WIDTH - this.cutR)
this.setData({
cutL: CUT_L - dragLengthL
})
break
case 'top':
case "top":
let dragLengthT = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
if (CUT_T - dragLengthT < 0) dragLengthT = CUT_T
if ((CUT_T - dragLengthT) > (SCREEN_WIDTH - this.cutB)) dragLengthT = CUT_T - (SCREEN_WIDTH - this.cutB)
@ -386,14 +371,29 @@
cutT: CUT_T - dragLengthT
})
break
case 'bottom':
case "right":
let dragLengthR = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
if (CUT_R + dragLengthR < 0) dragLengthR = -CUT_R
this.setData({
cutR: CUT_R + dragLengthR
})
break
case "bottom":
let dragLengthB = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
if (CUT_B + dragLengthB < 0) dragLengthB = -CUT_B
this.setData({
cutB: CUT_B + dragLengthB
})
break
case 'rightBottom':
case "left":
let dragLengthL = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
if (CUT_L - dragLengthL < 0) dragLengthL = CUT_L
if ((CUT_L - dragLengthL) > (SCREEN_WIDTH - this.cutR)) dragLengthL = CUT_L - (SCREEN_WIDTH - this.cutR)
this.setData({
cutL: CUT_L - dragLengthL
})
break
case "rightBottom":
let dragLengthRBX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
let dragLengthRBY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
@ -419,80 +419,16 @@
</script>
<style scoped>
.uni-content-info{
.vrapile-content{
height: 100%;
overflow-y: auto;
}
.cropper-content {
.vrapile-cropper{
min-height: 750rpx;
width: 100%;
}
.cropper-operate{
padding: 5rpx 10rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
.cropper-operate-button{
margin: 5rpx 10rpx;
margin-top: 10rpx;
width: 80rpx;
padding: 10rpx 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
font-size: 14px;
border: 3rpx solid gray;
}
.cropper-operate-button-upload{
width: 170rpx;
}
.cropper-operate-button-reset{
width: 110rpx;
}
.cropper-operate-button-rotate{
width: 80rpx;
}
.cropper-config {
position: fixed;
width: 100%;
bottom: 10rpx;
padding: 10rpx;
display: flex;
justify-content: space-between;
z-index: 2;
}
.cropper-config-button{
width: 90%;
}
.cropper-image{
padding: 10rpx 40rpx;
margin-bottom: 80rpx;
/* #ifndef H5 */
margin-bottom: 120rpx;
/* #endif */
display: flex;
justify-content: center;
}
.cropper-image-image{
width: 400rpx;
height: 400rpx;
}
.cropper-canvas{
position:absolute;
width: 750rpx;
height: 750rpx;
top: -9999rpx;
left: -9999rpx;
}
.uni-corpper {
.vrapile-cropper-inner {
position: relative;
overflow: hidden;
-webkit-user-select: none;
@ -506,16 +442,16 @@
height: 750rpx;
background: #000;
}
.uni-corpper-content {
.vrapile-cropper-content {
position: relative;
width:750rpx;
height:750rpx;
left:0rpx;
top:0rpx
width: 750rpx;
height: 750rpx;
left: 0rpx;
top: 0rpx;
}
.uni-corpper-content-image {
/* 底层展示的图片 */
.vrapile-cropper-image {
display: block;
/* width: 100%; */
min-width: 0 !important;
@ -528,26 +464,14 @@
width: 750rpx;
height: 750rpx;
}
/* 移动图片效果 */
.uni-cropper-drag-box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: move;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}
/* 内部的信息 */
.uni-corpper-crop-box {
/* 操作的方框 */
.vrapile-cropper-box {
position: absolute;
background: rgba(255, 255, 255, 0.3);
z-index: 2;
}
.uni-corpper-crop-box .uni-cropper-view-box {
.vrapile-cropper-box-view {
position: relative;
display: block;
width: 100%;
@ -556,9 +480,9 @@
outline: 1rpx solid #69f;
outline-color: rgba(102, 153, 255, .75)
}
/* 横向虚线 */
.uni-cropper-dashed-h {
.vrapile-cropper-dashed-h {
position: absolute;
top: 33.33333333%;
left: 0;
@ -567,9 +491,9 @@
border-top: 1rpx dashed rgba(255, 255, 255, 0.5);
border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5);
}
/* 纵向虚线 */
.uni-cropper-dashed-v {
.vrapile-cropper-dashed-v {
position: absolute;
left: 33.33333333%;
top: 0;
@ -578,22 +502,21 @@
border-left: 1rpx dashed rgba(255, 255, 255, 0.5);
border-right: 1rpx dashed rgba(255, 255, 255, 0.5);
}
/* 四个方向的线 为了之后的拖动事件*/
.uni-cropper-line-t {
.vrapile-cropper-line-t {
position: absolute;
display: block;
width: 100%;
background-color: #69f;
background-color: #6699ff;
top: 0;
left: 0;
height: 1rpx;
opacity: 0.1;
cursor: n-resize;
}
.uni-cropper-line-t::before {
content: '';
.vrapile-cropper-line-t::before {
content: "";
position: absolute;
top: 50%;
right: 0rpx;
@ -605,11 +528,10 @@
background: transparent;
z-index: 11;
}
.uni-cropper-line-r {
.vrapile-cropper-line-r {
position: absolute;
display: block;
background-color: #69f;
background-color: #6699ff;
top: 0;
right: 0rpx;
width: 1rpx;
@ -617,9 +539,8 @@
height: 100%;
cursor: e-resize;
}
.uni-cropper-line-r::before {
content: '';
.vrapile-cropper-line-r::before {
content: "";
position: absolute;
top: 0;
left: 50%;
@ -631,21 +552,19 @@
background: transparent;
z-index: 11;
}
.uni-cropper-line-b {
.vrapile-cropper-line-b {
position: absolute;
display: block;
width: 100%;
background-color: #69f;
background-color: #6699ff;
bottom: 0;
left: 0;
height: 1rpx;
opacity: 0.1;
cursor: s-resize;
}
.uni-cropper-line-b::before {
content: '';
.vrapile-cropper-line-b::before {
content: "";
position: absolute;
top: 50%;
right: 0rpx;
@ -657,11 +576,10 @@
background: transparent;
z-index: 11;
}
.uni-cropper-line-l {
.vrapile-cropper-line-l {
position: absolute;
display: block;
background-color: #69f;
background-color: #6699ff;
top: 0;
left: 0;
width: 1rpx;
@ -669,9 +587,8 @@
height: 100%;
cursor: w-resize;
}
.uni-cropper-line-l::before {
content: '';
.vrapile-cropper-line-l::before {
content: "";
position: absolute;
top: 0;
left: 50%;
@ -684,81 +601,143 @@
z-index: 11;
}
.uni-cropper-point {
/* 四个角和四条线中间的点 */
.vrapile-cropper-point {
width: 5rpx;
height: 5rpx;
background-color: #69f;
opacity: .75;
background-color: #6699ff;
opacity: 0.75;
position: absolute;
z-index: 3;
}
.point-t {
top: -3rpx;
left: 50%;
margin-left: -3rpx;
cursor: n-resize;
}
.point-tr {
top: -3rpx;
left: 100%;
margin-left: -3rpx;
cursor: n-resize;
cursor: ne-resize;
}
.point-r {
top: 50%;
left: 100%;
margin-left: -3rpx;
margin-top: -3rpx;
cursor: n-resize;
cursor: e-resize;
}
.point-rb {
left: 100%;
top: 100%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
cursor: n-resize;
cursor: se-resize;
width: 36rpx;
height: 36rpx;
background-color: #69f;
background-color: #6699ff;
position: absolute;
z-index: 1112;
opacity: 1;
}
.point-b {
left: 50%;
top: 100%;
margin-left: -3rpx;
margin-top: -3rpx;
cursor: n-resize;
cursor: s-resize;
}
.point-bl {
left: 0%;
top: 100%;
margin-left: -3rpx;
margin-top: -3rpx;
cursor: n-resize;
cursor: sw-resize;
}
.point-l {
left: 0%;
top: 50%;
margin-left: -3rpx;
margin-top: -3rpx;
cursor: n-resize;
cursor: w-resize;
}
.point-lt {
left: 0%;
top: 0%;
margin-left: -3rpx;
margin-top: -3rpx;
cursor: n-resize;
cursor: nw-resize;
}
/* 操作按钮 */
.vrapile-operate{
padding: 5rpx 10rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
.vrapile-operate-button{
margin: 5rpx 10rpx;
margin-top: 10rpx;
width: 80rpx;
padding: 10rpx 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10rpx;
font-size: 14px;
border: 3rpx solid gray;
}
.vrapile-operate-button-upload{
width: 170rpx;
}
.vrapile-operate-button-reset{
width: 110rpx;
}
.vrapile-operate-button-rotate{
width: 80rpx;
}
/* 提交按钮 */
.vrapile-submit {
position: fixed;
width: 100%;
bottom: 10rpx;
padding: 10rpx;
display: flex;
justify-content: space-between;
z-index: 2;
}
.vrapile-submit-button{
width: 90%;
}
/* 裁剪图片预览 */
.vrapile-view{
padding: 10rpx 40rpx;
margin-bottom: 80rpx;
/* #ifndef H5 */
margin-bottom: 120rpx;
/* #endif */
display: flex;
justify-content: center;
}
.vrapile-view-image{
width: 400rpx;
height: 400rpx;
}
/* canvas引入 */
.vrapile-canvas{
position:absolute;
width: 750rpx;
height: 750rpx;
top: -9999rpx;
left: -9999rpx;
}
</style>

2
uni_modules/vrapile-cut-image/readme.md
View File

@ -17,7 +17,7 @@
</template>
<script>
// import { uploadAvatar } from "@/api/system/user"
// import { uploadAvatar } from "@/api/system/user.js"
export default {
data() {
return {

Write Preview
Loading…
Cancel
Save