mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2026-02-05 00:49:49 +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>
|
</view>
|
||||||
<u-action-sheet :actions="actionSheetList" :show="actionSheetShow" @close="actionSheetShow = false" @select="actionSheetCallback"></u-action-sheet>
|
<u-action-sheet :actions="actionSheetList" :show="actionSheetShow" @close="actionSheetShow = false" @select="actionSheetCallback"></u-action-sheet>
|
||||||
|
|
||||||
<w-compress ref='wCompress' />
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import WCompress from '@/pages/member/components/w-compress/w-compress.vue'
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
|
||||||
WCompress
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
model: {
|
model: {
|
||||||
@@ -163,50 +157,28 @@
|
|||||||
// 用户上传头像
|
// 用户上传头像
|
||||||
uploadAvatar() {
|
uploadAvatar() {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
uni.chooseImage({
|
this.$upload.uploadFiles(null, res => {
|
||||||
count: 1,
|
if (res.status) {
|
||||||
success: res => {
|
// 上传成功的图片地址
|
||||||
uni.showLoading({ title: '图片压缩中...', mask: true })
|
let avatar = res.data.src;
|
||||||
this.$refs.wCompress.start(res.tempFilePaths[0], {
|
// 执行头像修改
|
||||||
pixels: 90000, // 最大分辨率，默认二百万
|
_this.$u.api.changeAvatar({
|
||||||
quality: 0.6, // 压缩质量，默认0.8
|
id: avatar
|
||||||
type: 'jpg', // 图片类型，默认jpg
|
}).then(res => {
|
||||||
base64: true, // 是否返回base64，默认false，非H5有效
|
if (res.status) {
|
||||||
})
|
_this.$refs.uToast.show({
|
||||||
.then(res => {
|
message: '上传成功', type: 'success', complete: function () {
|
||||||
let data = {
|
_this.model.avatar = res.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);
|
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
uni.hideLoading()
|
} else {
|
||||||
})
|
_this.$u.toast(res.msg)
|
||||||
.catch(e => {
|
}
|
||||||
console.log(e)
|
})
|
||||||
uni.hideLoading()
|
} else {
|
||||||
})
|
_this.$u.toast(res.msg)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
// 保存资料
|
// 保存资料
|
||||||
submitHandler() {
|
submitHandler() {
|
||||||
|
|||||||
Reference in New Issue
Block a user