Skip to content

M
mayi-mp-shop
Commit 9076bbba by 李嘉林
Options

上传图片

parent ae5352f5
Showing with 310 additions and 119 deletions
src/components/mpvue-cropper.vue
<template>
<div>
<canvas
v-if="_canvasId"
:canvasId="_canvasId"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
disable-scroll
:style="{ width: _width + 'px', height: _height + 'px', background: 'rgba(0, 0, 0, .8)' }">
</canvas>
<canvas
v-if="_targetId"
:canvas-id="_targetId"
disable-scroll
:style="{
position: 'fixed',
top: -_width * _pixelRatio + 'px',
left: -_height * _pixelRatio + 'px',
width: _width * _pixelRatio + 'px',
height: _height * _pixelRatio + 'px'
}">
</canvas>
<div @click="selectImg">选择图片</div>
<image :src="selectImgUrl" alt="" mode="widthFix" style="width:100px;"></image>
</div>
<div class="mpvueCropper">
<div class="canvasBg">
<canvas
v-if="_canvasId"
:canvasId="_canvasId"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
disable-scroll
:style="{
width: _width + 'px',
height: _height + 'px',
background: 'rgba(0, 0, 0, .8)',
}"
>
</canvas>
<canvas
v-if="_targetId"
:canvas-id="_targetId"
disable-scroll
:style="{
position: 'fixed',
top: -_width * _pixelRatio + 'px',
left: -_height * _pixelRatio + 'px',
width: _width * _pixelRatio + 'px',
height: _height * _pixelRatio + 'px',
}"
>
</canvas>
</div>
<div class="btn flex">
<div class="btn-cont flex">
<div class="cancel" @click="cancelSelect">取消</div>
<div @click="selectImg">确定</div>
</div>
</div>
</div>
</template>
<script>
import WeCropper from 'we-cropper'
import WeCropper from "we-cropper";
export default {
name: 'mpvue-cropper',
props: {
option: {
type: Object
}
export default {
name: "mpvue-cropper",
props: {
option: {
type: Object,
},
data () {
return {
_wecropper: null,
selectImgUrl:'',
}
},
data() {
return {
_wecropper: null,
selectImgUrl: "",
};
},
computed: {
_canvasId() {
return this.option.id;
},
computed: {
_canvasId () {
return this.option.id
},
_targetId () {
return this.option.targetId
},
_width () {
return this.option.width
},
_height () {
return this.option.height
},
_pixelRatio () {
return this.option.pixelRatio
}
_targetId() {
return this.option.targetId;
},
_width() {
return this.option.width;
},
_height() {
return this.option.height;
},
_pixelRatio() {
return this.option.pixelRatio;
},
},
methods: {
touchstart($event) {
this._wecropper.touchStart($event.mp);
},
touchmove($event) {
this._wecropper.touchMove($event.mp);
},
touchend($event) {
this._wecropper.touchEnd($event.mp);
},
pushOrigin(src) {
this._wecropper.pushOrign(src);
},
methods: {
touchstart ($event) {
this._wecropper.touchStart($event.mp)
},
touchmove ($event) {
this._wecropper.touchMove($event.mp)
},
touchend ($event) {
this._wecropper.touchEnd($event.mp)
},
pushOrigin (src) {
this._wecropper.pushOrign(src)
},
updateCanvas () {
this._wecropper.updateCanvas()
},
getCropperBase64 (fn) {
return this._wecropper.getCropperBase64(fn)
},
getCropperImage (opt, fn) {
return this._wecropper.getCropperImage(opt, fn)
},
init () {
this._wecropper = new WeCropper(Object.assign(this.option, {
updateCanvas() {
this._wecropper.updateCanvas();
},
getCropperBase64(fn) {
return this._wecropper.getCropperBase64(fn);
},
getCropperImage(opt, fn) {
return this._wecropper.getCropperImage(opt, fn);
},
init() {
console.log(this.option.src,'-----------97')
this._wecropper = new WeCropper(
Object.assign(this.option, {
id: this._canvasId,
targetId: this._targetId,
pixelRatio: this._pixelRatio
}))
.on('ready', (...args) => {
this.$emit('ready', ...args)
pixelRatio: this._pixelRatio,
})
.on('beforeImageLoad', (...args) => {
this.$emit('beforeImageLoad', ...args)
)
.on("ready", (...args) => {
this.$emit("ready", ...args);
})
.on('imageLoad', (...args) => {
this.$emit('imageLoad', ...args)
.on("beforeImageLoad", (...args) => {
this.$emit("beforeImageLoad", ...args);
})
.on('beforeDraw', (...args) => {
this.$emit('beforeDraw', ...args)
.on("imageLoad", (...args) => {
this.$emit("imageLoad", ...args);
})
},
selectImg(){
let _this = this;
this._wecropper.getCropperImage().then(path=>{
console.log(path,'---path')
console.log(`${process.env.ADMIN_URL}/innerApi/baseService/upload/uploadFile.htm`,'-------url')
wx.uploadFile({
url: `${process.env.ADMIN_URL}/innerApi/baseService/upload/uploadFile.htm`, //仅为示例，非真实的接口地址
filePath: path,
name: 'file',
formData: {
'user': 'test'
},
success (res){
const data = res.data?JSON.parse(res.data):{};
console.log(data,'-----------118--success')
if(data.code == 200) {
_this.selectImgUrl = data.data.imgUrl;
}
//do something
},
})
})
}
.on("beforeDraw", (...args) => {
this.$emit("beforeDraw", ...args);
});
},
onLoad () {
if (!this.option) {
return console.warn('[mpvue-cropper] 请传入option参数\n参数配置见文档：https://we-plugin.github.io/we-cropper/#/api')
selectImg() {
let _this = this;
this._wecropper.getCropperImage().then((path) => {
console.log(path, "---path");
console.log(
`${process.env.ADMIN_URL}/innerApi/baseService/upload/uploadFile.htm`,
"-------url"
);
wx.showLoading({
title: "生成中...",
});
wx.uploadFile({
url: `${process.env.ADMIN_URL}/innerApi/baseService/upload/uploadFile.htm`, //仅为示例，非真实的接口地址
filePath: path,
name: "file",
formData: {
user: "test",
},
success(res) {
const data = res.data ? JSON.parse(res.data) : {};
console.log(data, "-----------118--success");
if (data.code == 200) {
_this.selectImgUrl = data.data.imgUrl;
wx.setStorageSync("wo-selectImgUrl", _this.selectImgUrl);
wx.hideLoading();
wx.showToast({
title: "成功",
icon: "success",
duration: 1000,
});
setTimeout(() => {
wx.navigateBack();
}, 1000);
}
//do something
},
fail(res) {
wx.showToast({
title: "生成失败",
icon: "error",
duration: 1000,
});
},
});
});
},
cancelSelect() {
this.$emit("cancelSelect");
},
},
onLoad() {
if (!this.option) {
return console.warn(
"[mpvue-cropper] 请传入option参数\n参数配置见文档：https://we-plugin.github.io/we-cropper/#/api"
);
}
this.init();
},
};
</script>
<style lang="scss" scoped>
.mpvueCropper {
width: 100vw;
height: 100vh;
background: #000;
}
.btn {
position: fixed;
bottom: 0;
padding: 20px 0;
width: 100%;
justify-content: center;
.btn-cont {
width: 90%;
height: 46px;
border: 1px solid #fff;
border-radius: 46px;
align-items: center;
justify-content: space-around;
overflow: hidden;
.cancel {
border-right: 1px solid #fff;
}
& > div {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
width: 50%;
height: 46px;
&:active {
background: #229df1;
}
this.init()
}
}
</script>
\ No newline at end of file
}
</style>
\ No newline at end of file
src/pages/wo/editPicture/index.vue 0 → 100644
<template>
<!-- 编辑图片 -->
<div class="editPicture">
<mpvue-cropper v-if="showCropper" :option="cropperOptions"></mpvue-cropper>
</div>
</template>
<script>
import mpvueCropper from "@/components/mpvue-cropper";
export default {
name: "editPicture",
data() {
return {
cropperOptions: {},
showCropper: false,
};
},
components: {
mpvueCropper,
},
computed: {},
onLoad(options) {
console.log(options.src, "----------22");
const device = wx.getSystemInfoSync(); // 获取设备信息
const width = device.windowWidth; // 示例为一个与屏幕等宽的正方形裁剪框
const height = device.windowHeight-120;
let cropperOptions = {
src: "",
id: "canvasId",
targetId: "targetId",
pixelRatio: device.pixelRatio,
width, // 画布宽度
height, // 画布高度
scale: 2.5, // 最大缩放倍数
zoom: 8, // 缩放系数
cut: {
x: (width - 260) / 2, // 裁剪框x轴起点
y: (height - 320) / 2, // 裁剪框y轴期起点
width: 260, // 裁剪框宽度
height: 320, // 裁剪框高度
},
};
cropperOptions.src = options.src;
this.cropperOptions = JSON.parse(JSON.stringify(cropperOptions))
this.showCropper = true;
},
onReady() {
wx.setNavigationBarTitle({ title: "头像编辑" });
},
methods: {
cReady() {},
},
onHide(){
console.log('--onHide')
},
onUnload(){
console.log('--onUnload')
this.showCropper = false;
}
};
</script>
<style lang="scss" scoped>
.editPicture {
}
</style>
src/pages/wo/editPicture/main.js 0 → 100644
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
src/pages/wo/editPicture/main.json 0 → 100644
{
}
\ No newline at end of file
src/pages/wo/writeInformation/index.vue
......@@ -10,7 +10,7 @@
<div class="label">
<p>证件照</p>
</div>
<div class="img">
<div class="img" @click="upLoadImg">
<image v-if="idPhoto" mode="widthFix" :src="idPhoto" alt=""></image>
<image
v-else
......@@ -76,9 +76,46 @@ export default {
}
},
onReady() {
console.log('---onready')
wx.setNavigationBarTitle({ title: "填报资料" });
},
onLoad(){
console.log('---onLoad')
},
onShow(){
let idPhoto = wx.getStorageSync('wo-selectImgUrl');
if(idPhoto) {
this.idPhoto = idPhoto;
wx.removeStorageSync('wo-selectImgUrl');
}
console.log('---onShow')
},
methods: {
// 上传图片
upLoadImg(){
let self = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success(res) {
const src = res.tempFilePaths[0]
console.log(src,'---------------chooseImage')
if (src) {
// 将图片参数传递给插件
self.chooseImg = true;
wx.navigateTo({
url: `/pages/wo/editPicture/main?src=${src}` // 指定页面的url
});
};
wx.hideToast()
},
fail(res) {
wx.hideToast();
wx.navigateBack()
}
})
},
// 下一步
next(){
this.check_id_number();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment