<template>
|
<!-- <view ref="test" class="page-my-cropper-image">
|
<csImageEditor ref="csImageEditor" :imageSrc="imageSrc" :circleDiameter="100" @sendUrl="updateImage"></csImageEditor>
|
<view class="cropper-button">
|
<button class="btn_default" @click="cancel">取消</button>
|
<text class="ico fs-time" @click="mirrorImage"></text>
|
<text class="ico fs-time" @click="rotateCounterClockwise"></text>
|
<button type="primary" class="btn" @click="ok">确定</button>
|
</view>
|
</view> -->
|
<!-- <view class="content">
|
<cs-ImageEditor ref="csImageEditor" :imageSrc="imageSrc" @sendUrl="updateImage"></cs-ImageEditor>
|
<view style="margin-top: 100rpx;">
|
<button type="primary" @tap="clickCamera">选择图片</button>
|
<button style="margin-top: 20rpx;" type="primary" @tap="rotateCounterClockwise">旋转</button>
|
<button style="margin-top: 20rpx;" type="primary" @tap="mirrorImage">镜像</button>
|
<button style="margin-top: 20rpx;" type="primary" @click="ok">保存图片到相册</button>
|
</view>
|
</view> -->
|
<view class="page-my-cropper-image">
|
<view ref="test" class="cropper-wrap">
|
<ImageCropper id="image-cropper" ref="refImageCropper" :zoom="1" :angle="angle" :src="imageSrc"
|
canvasBackground="red" @cropped="cropped" @afterDraw="afterDraw" @beforeDraw="beforeDraw" />
|
</view>
|
<view class="cropper-button">
|
<button class="btn_default" @click="cancel">取消</button>
|
<text class="ico fs-time" @click="onAngle"></text>
|
<button type="primary" class="btn" @click="ok">确定</button>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import ImageCropper from '@/components/nice-cropper/cropper.vue'
|
//import csImageEditor from '@/components/csImageEditor/index.vue'
|
|
//import csImageEditor from '@/uni_modules/cs-ImageEditor/components/cs-ImageEditor/cs-ImageEditor.vue'
|
import {
|
showModal,
|
showToast
|
} from "@/common/Page.js"
|
import TaskInit from "@/common/extend.js"
|
export default {
|
name: "pagesMyCropperImage",
|
components: {
|
ImageCropper,
|
//csImageEditor
|
},
|
|
data() {
|
return {
|
imageSrc: '/static/logo.png',
|
angle: 0,
|
croppedPath: "",
|
maxSize: 100 * 1024,
|
tempFilePath: "",
|
cropperOk:false,
|
}
|
},
|
methods: {
|
setData(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
beforeDraw(context, transform) {
|
context.setFillStyle('yellow')
|
transform.zoom = 2
|
},
|
afterDraw(ctx, info) {
|
console.log(`当前画布大小：${info.width}*${info.height}`)
|
},
|
cropped(imagePath, imageInfo) {
|
console.log("cropped", imagePath, imageInfo)
|
this.croppedPath = imagePath
|
|
this.checkCroppedImage()
|
},
|
|
onAngle() {
|
|
this.setData({
|
angle: (this.angle + 90) % 360
|
})
|
this.$refs.refImageCropper.setRotate(this.angle)
|
|
},
|
ok() {
|
this.cropperOk = true
|
if(this.$refs.csImageEditor)
|
this.$refs.csImageEditor.drawImage()
|
if(this.$refs.refImageCropper)
|
{
|
|
this.$refs.refImageCropper.draw()
|
}
|
},
|
checkCroppedImage() {
|
const _this = this
|
if( !this.cropperOk )return
|
// #ifdef MP-WEIXIN
|
uni.getFileSystemManager().getFileInfo({
|
filePath: _this.croppedPath,
|
success: function(res) {
|
if (_this.maxSize > 0) {
|
if (res.size > _this.maxSize) {
|
const limitSize = TaskInit.fileUtils.getFileSizeStr(_this.maxSize)
|
showModal(`图片大小超出限制，请限制在 ${limitSize} 以内`, "提示", false)
|
return
|
}
|
|
}
|
|
_this.corppedSuccess(_this.croppedPath)
|
},
|
fail: function(res) {
|
console.error(res)
|
}
|
})
|
// #endif
|
// #ifndef MP-WEIXIN
|
uni.getFileInfo({
|
filePath: _this.croppedPath,
|
success: (res) => {
|
if (_this.maxSize > 0) {
|
if (res.size > _this.maxSize) {
|
const limitSize = TaskInit.fileUtils.getFileSizeStr(_this.maxSize)
|
showModal(`图片大小超出限制，请限制在 ${limitSize} 以内`, "提示", false)
|
return
|
}
|
|
}
|
_this.corppedSuccess(_this.croppedPath)
|
},
|
fail: (res) => {
|
console.error(res)
|
}
|
})
|
// #endif
|
|
},
|
cancel() {
|
uni.navigateBack({
|
delta: 1
|
});
|
},
|
updateImage(obj) {
|
console.log('updateImage', obj)
|
this.cropperOk = true
|
this.croppedPath = obj.filePath
|
this.checkCroppedImage()
|
},
|
rotateCounterClockwise() {
|
if(this.$refs.csImageEditor)
|
this.$refs.csImageEditor.rotateCounterClockwise()
|
},
|
mirrorImage() {
|
if(this.$refs.csImageEditor)
|
this.$refs.csImageEditor.mirrorImage()
|
},
|
corppedSuccess(path) {
|
const eventChannel = this.getOpenerEventChannel();
|
eventChannel.emit('imageCorpped', {
|
path: path
|
});
|
uni.navigateBack({
|
delta: 1
|
});
|
},
|
clickCamera() {
|
const _this = this
|
let sizeType = ['original', 'compressed']
|
//#ifdef MP-DINGTALK
|
sizeType = ['compressed']
|
// #endif
|
uni.chooseImage({
|
count: 1,
|
sizeType: sizeType, //original 原图，compressed 压缩图，默认二者都有
|
sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。
|
success: (res) => {
|
if (res.tempFilePaths) {
|
_this.setData({imageSrc: res.tempFilePaths[0]})
|
console.log('chooseImage ', _this.imageSrc,res)
|
if(_this.$refs.csImageEditor)
|
_this.$refs.csImageEditor.init()
|
}
|
},
|
fail: (err) => {
|
console.log('chooseImage fail', err)
|
if (this.isMobilePlatform && err.errMsg.indexOf('cancel') < 0 && err.errMsg.indexOf(
|
'取消') < 0) {
|
console.log('chooseImage 取消')
|
uni.getSetting({
|
success: (res) => {
|
let authStatus = res.authSetting['scope.album'];
|
if (!authStatus) {
|
showModal("需要从您的相册获取图片，请在设置界面打开相关权限", "授权失败").then((
|
res) => {
|
if (res) {
|
uni.openSetting()
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
},
|
fail: (res) => {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
} else {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
}
|
})
|
|
}
|
|
},
|
onLoad(option) {
|
// #ifdef MP-DINGTALK
|
|
my.setNavigationBar({
|
backgroundColor: "#007AFF",
|
frontColor: "#ffffff"
|
})
|
// #endif
|
this.setData({
|
// imageSrc: option.imageSrc,
|
maxSize: option.maxSize || 100 * 1024,
|
})
|
this.clickCamera()
|
|
|
},
|
|
}
|
</script>
|
|
<style lang="less">
|
page {
|
/* #ifdef MP-ALIPAY */
|
position: absolute;
|
width: 100%;
|
/* #endif */
|
height: 100%;
|
box-sizing: border-box;
|
}
|
|
.page-my-cropper-image {
|
height: 100%;
|
|
.cropper-wrap {
|
height: 100%;
|
}
|
|
.cropper-button {
|
display: flex;
|
flex-direction: row;
|
position: absolute;
|
bottom: 30rpx;
|
left: 0;
|
right: 0;
|
height: 50px;
|
padding: 0 10px;
|
justify-content: space-between;
|
color: #fff;
|
|
.ico {
|
font-size: 32px;
|
padding: 5px;
|
margin-top: 5px;
|
}
|
|
.btn_default {
|
padding: 0 8px;
|
border: 0;
|
background: transparent;
|
color: #fff;
|
}
|
|
.btn {
|
padding: 0 8px;
|
border-radius: 5px;
|
|
}
|
|
}
|
}
|
</style>
|
