mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 18:03:27 +08:00
【优化】移除头像上传压缩功能，此组件兼容性有问题。
This commit is contained in:
jianweie
@@ -1,159 +0,0 @@
|
||||
/**
|
||||
* 图片压缩
|
||||
* @param {String} imgUrl 需要压缩的图片路径
|
||||
* @param {Object} self 必传，当前组件对象
|
||||
* @param {Object} options 压缩参数
|
||||
* width: 压缩到多宽，默认图片宽度(待优化，传入宽度，应计算高度)
|
||||
* height: 压缩到多高，默认图片高度
|
||||
* pixels: 压缩图片的最大分辨率，默认二百万
|
||||
* quality: 压缩质量，默认0.8
|
||||
* type: 获取的base64类型，默认jpg
|
||||
* base64: 是否返回base64，默认true(非H5有效)
|
||||
* @return {Promise}
|
||||
* reject
|
||||
* code
|
||||
* -1: 获取图片信息错误
|
||||
* -2: 极大可能创建图片对象出错(h5会出现，出现概率无限接近0)
|
||||
* -3: canvas转图片错误(小程序会出现)
|
||||
* -4: 图片转base64错误(小程序会出现)
|
||||
*/
|
||||
|
||||
// 图片分辨率压缩
|
||||
const calcImageSize = (res, pixels) => {
|
||||
let imgW, imgH
|
||||
imgW = res.width
|
||||
imgH = res.height
|
||||
|
||||
let ratio
|
||||
if((ratio = imgW * imgH / pixels) > 1) {
|
||||
ratio = Math.sqrt(ratio)
|
||||
imgW = parseInt(imgW / ratio)
|
||||
imgH = parseInt(imgH / ratio)
|
||||
} else {
|
||||
ratio = 1
|
||||
}
|
||||
|
||||
return { imgW, imgH }
|
||||
}
|
||||
|
||||
const urlTobase64 = (url, type) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getFileSystemManager().readFile({
|
||||
filePath: url,
|
||||
encoding: 'base64',
|
||||
success: res => {
|
||||
let base64 = res.data
|
||||
base64 = `data:image/${type};base64,${base64}`
|
||||
resolve(base64)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const compress = (imgUrl, slef, options={}) => {
|
||||
/*************** 参数默认值 ***************/
|
||||
const MAX_PIXELS = 2000000 // 最大分辨率，宽 * 高 的值
|
||||
const MAX_QUALITY = 0.8 // 压缩质量
|
||||
const IMG_TYPE = 'jpg'
|
||||
const CANVAS_ID = 'compress_canvas'
|
||||
const BASE_64 = false
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getImageInfo({
|
||||
src: imgUrl,
|
||||
success: res => {
|
||||
let pixels = options.pixels || MAX_PIXELS
|
||||
let quality = options.quality || MAX_QUALITY
|
||||
let type = options.type || IMG_TYPE
|
||||
let canvasId = options.canvasId || CANVAS_ID
|
||||
let isBase64 = options.base64 || BASE_64
|
||||
|
||||
let { imgW, imgH } = calcImageSize(res, pixels)
|
||||
let w = options.width || imgW
|
||||
let h = options.height || imgH
|
||||
// #ifdef H5
|
||||
type = type == 'jpg' ? 'jpeg' : type,
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
type = type == 'png' ? 'png' : 'jpg',
|
||||
// #endif
|
||||
console.log(`%c 宽: ${w} %c 高: ${h} %c 分辨率: ${w * h} %c 质量: ${quality} %c 类型: ${type}`, 'color:#f00', 'background-color:#f60;color:#fff', 'color:#F00', 'background-color:#f60;color:#fff', 'color:#F00')
|
||||
|
||||
// #ifdef H5
|
||||
let img = new Image()
|
||||
img.src = res.path
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
canvas.width = w
|
||||
canvas.height = h
|
||||
let drawW = w, drawH = h
|
||||
|
||||
ctx.drawImage(img, 0, 0, drawW, drawH)
|
||||
|
||||
let base64 = canvas.toDataURL(`image/${type}`, quality)
|
||||
|
||||
resolve(base64)
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
||||
// 非h5
|
||||
// #ifndef H5
|
||||
slef.height = h
|
||||
slef.width = w
|
||||
|
||||
slef.$nextTick(function() {
|
||||
let canvas = null
|
||||
if(!canvas) {
|
||||
canvas = uni.createCanvasContext(canvasId, slef)
|
||||
}
|
||||
canvas.drawImage(res.path, 0, 0, w, h)
|
||||
canvas.draw()
|
||||
setTimeout(() => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: canvasId,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: w,
|
||||
height: h,
|
||||
destWidth: w,
|
||||
destHeight: h,
|
||||
fileType: type,
|
||||
quality: quality,
|
||||
success: file => {
|
||||
if(isBase64) {
|
||||
urlTobase64(file.tempFilePath, type)
|
||||
.then(res => {
|
||||
canvas = null
|
||||
resolve(res)
|
||||
})
|
||||
.catch(e => {
|
||||
reject({
|
||||
code: -4,
|
||||
msg: '图片转base64错误',
|
||||
data: e
|
||||
})
|
||||
})
|
||||
} else {
|
||||
resolve(file.tempFilePath)
|
||||
}
|
||||
},
|
||||
fail: e => {
|
||||
reject({
|
||||
code: -3,
|
||||
msg: 'canvas转图片错误',
|
||||
data: e
|
||||
})
|
||||
}
|
||||
}, slef)
|
||||
}, 500)
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default compress
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<view class="compress__canvas">
|
||||
<!-- #ifndef H5 -->
|
||||
<canvas canvas-id="compress_canvas" :style="{width: width + 'px', height: height + 'px'}"></canvas>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 使用方法
|
||||
* import WCompress from '@/components/w-compress/compress.js'
|
||||
* components: { WCompress }
|
||||
* <w-compress ref='wCompress' />
|
||||
* this.$refs.wCompress.start(res.tempFilePaths[0]).then().catch()
|
||||
* this.$refs.wCompress.start(res.tempFilePaths).then().catch()
|
||||
*/
|
||||
import compress from './compress.js'
|
||||
export default {
|
||||
name: 'wCompress',
|
||||
data() {
|
||||
return {
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
start(imgUrl, options={}) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
if(imgUrl instanceof Array) {
|
||||
try{
|
||||
let arr = []
|
||||
for(let i=0; i<imgUrl.length; i++) {
|
||||
let url = await compress(imgUrl[i], this, options)
|
||||
arr.push(url)
|
||||
}
|
||||
|
||||
resolve(arr)
|
||||
}catch(e){
|
||||
reject(e)
|
||||
}
|
||||
|
||||
/* let arr = []
|
||||
arr = imgUrl.map(async c => {
|
||||
return await compress(c, this, options)
|
||||
})
|
||||
resolve(arr) */
|
||||
|
||||
/* let arr = imgUrl.map(c => {
|
||||
return compress(c, this, options)
|
||||
})
|
||||
|
||||
Promise.all(arr)
|
||||
.then(resolve)
|
||||
.catch(reject) */
|
||||
} else {
|
||||
compress(imgUrl, this, options)
|
||||
.then(resolve)
|
||||
.catch(reject)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.compress__canvas {
|
||||
position: absolute;
|
||||
left: 10000px;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -44,17 +44,11 @@
|
||||
</view>
|
||||
<u-action-sheet :actions="actionSheetList" :show="actionSheetShow" @close="actionSheetShow = false" @select="actionSheetCallback"></u-action-sheet>
|
||||
|
||||
<w-compress ref='wCompress' />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WCompress from '@/pages/member/components/w-compress/w-compress.vue'
|
||||
export default {
|
||||
components: {
|
||||
WCompress
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
model: {
|
||||
@@ -163,50 +157,28 @@
|
||||
// 用户上传头像
|
||||
uploadAvatar() {
|
||||
var _this = this;
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: res => {
|
||||
uni.showLoading({ title: '图片压缩中...', mask: true })
|
||||
this.$refs.wCompress.start(res.tempFilePaths[0], {
|
||||
pixels: 90000, // 最大分辨率，默认二百万
|
||||
quality: 0.6, // 压缩质量，默认0.8
|
||||
type: 'jpg', // 图片类型，默认jpg
|
||||
base64: true, // 是否返回base64，默认false，非H5有效
|
||||
})
|
||||
.then(res => {
|
||||
let data = {
|
||||
base64: res,
|
||||
}
|
||||
_this.$u.api.uploadFilesFByBase64(data).then(resUrl => {
|
||||
if (resUrl.code == 0) {
|
||||
let avatar = resUrl.data.src;
|
||||
//执行头像修改
|
||||
_this.$u.api.changeAvatar({
|
||||
id: avatar
|
||||
}).then(resOut => {
|
||||
if (resOut.status) {
|
||||
_this.$refs.uToast.show({
|
||||
message: '上传成功', type: 'success', complete: function () {
|
||||
_this.model.avatar = resOut.data
|
||||
}
|
||||
})
|
||||
} else {
|
||||
_this.$u.toast(resOut.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
_this.$u.toast(resUrl.msg);
|
||||
this.$upload.uploadFiles(null, res => {
|
||||
if (res.status) {
|
||||
// 上传成功的图片地址
|
||||
let avatar = res.data.src;
|
||||
// 执行头像修改
|
||||
_this.$u.api.changeAvatar({
|
||||
id: avatar
|
||||
}).then(res => {
|
||||
if (res.status) {
|
||||
_this.$refs.uToast.show({
|
||||
message: '上传成功', type: 'success', complete: function () {
|
||||
_this.model.avatar = res.data
|
||||
}
|
||||
});
|
||||
uni.hideLoading()
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
uni.hideLoading()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
_this.$u.toast(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
_this.$u.toast(res.msg)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 保存资料
|
||||
submitHandler() {
|
||||
|
||||
Reference in New Issue
Block a user