332 lines
9.6 KiB
Vue
332 lines
9.6 KiB
Vue
|
<template xlang="wxml" minapp="mpvue">
|
|||
|
|
<view class="_imageCompress">
|
|||
|
|
<canvas id="_myCanvas" canvas-id="_myCanvas" :style="{width:cWidth+'px',height:cHeight+'px'}" />
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
let _rtArr = [], _cgFile = '', _index = 0;
|
|||
|
|
export default {
|
|||
|
|
name: "imageCompress",
|
|||
|
|
props: {
|
|||
|
|
maxWidth: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 750
|
|||
|
|
},
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'url'
|
|||
|
|
},
|
|||
|
|
ql: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0.92
|
|||
|
|
},
|
|||
|
|
src: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
number: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 1
|
|||
|
|
},
|
|||
|
|
fixOrientation: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
size: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 500000
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
cWidth: 750,
|
|||
|
|
cHeight: 750,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onUnload: function () {
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 选择照片
|
|||
|
|
_changImg() {
|
|||
|
|
let that = this;
|
|||
|
|
if (that.src == '') {
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: that.number, //默认9
|
|||
|
|
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|||
|
|
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|||
|
|
success: function (res) {
|
|||
|
|
_rtArr = [];
|
|||
|
|
_cgFile = res.tempFilePaths;
|
|||
|
|
_index = 0;
|
|||
|
|
that._imageCompress()
|
|||
|
|
},
|
|||
|
|
fail: function (e) {
|
|||
|
|
that._err(e)
|
|||
|
|
// console.log(JSON.stringify(res.tempFilePaths));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
_imageCompress(that.src)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 压缩图片
|
|||
|
|
_imageCompress() {
|
|||
|
|
let that = this, resPath = _cgFile[_index];
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
uni.hideLoading();
|
|||
|
|
// #endif
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: `图片压缩中 ${_index + 1}/${_cgFile.length}`,
|
|||
|
|
mask: true
|
|||
|
|
});
|
|||
|
|
// 获取图片信息
|
|||
|
|
// #ifndef H5
|
|||
|
|
uni.getImageInfo({
|
|||
|
|
src: resPath,
|
|||
|
|
success: function (image) {
|
|||
|
|
// 如果图片的大小大于设定值才压缩
|
|||
|
|
uni.getFileInfo({
|
|||
|
|
filePath: resPath,
|
|||
|
|
success: function (res) {
|
|||
|
|
_imageCompress(image, res.size)
|
|||
|
|
},
|
|||
|
|
fail: function (e) {
|
|||
|
|
that._err(e)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: function (e) {
|
|||
|
|
that._err(e)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef H5
|
|||
|
|
that._getH5ImageInfo(resPath, d => {
|
|||
|
|
_imageCompress(d, d.size)
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
// 处理图片
|
|||
|
|
function _imageCompress(image, size) {
|
|||
|
|
// #ifndef APP-PLUS
|
|||
|
|
if (image.type.indexOf('png') >= 0) {
|
|||
|
|
that._result(resPath)
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
let oW = image.width, oH = image.height, scaleWidth = 1, scaleHeight = 1, ctxWidth, ctxHeight;
|
|||
|
|
if (size / 1024 >= that.size || image.width >= that.maxWidth) {
|
|||
|
|
// 控制上传图片的宽高
|
|||
|
|
if (image.width >= image.height && image.width >= that.maxWidth) {
|
|||
|
|
image.height = that.maxWidth * image.height / image.width;
|
|||
|
|
image.width = that.maxWidth;
|
|||
|
|
} else if (image.width < image.height && image.height >= that.maxWidth) {
|
|||
|
|
image.width = that.maxWidth * image.width / image.height;
|
|||
|
|
image.height = that.maxWidth;
|
|||
|
|
}
|
|||
|
|
scaleWidth = image.width / oW
|
|||
|
|
scaleHeight = image.height / oH
|
|||
|
|
}
|
|||
|
|
ctxWidth = oW * scaleWidth
|
|||
|
|
ctxHeight = oH * scaleHeight
|
|||
|
|
const ctx = uni.createCanvasContext('_myCanvas', that);
|
|||
|
|
that.cWidth = image.width;
|
|||
|
|
that.cHeight = image.height;
|
|||
|
|
// 图片旋转修正，只有H5有效
|
|||
|
|
if (that.fixOrientation) {
|
|||
|
|
// 旋转图片
|
|||
|
|
let ot = image.orientation
|
|||
|
|
if ([5, 6, 7, 8, 'right', 'left', 'right-mirrored', 'left-mirrored'].indexOf(ot) > -1) {
|
|||
|
|
that.cWidth = image.height;
|
|||
|
|
that.cHeight = image.width;
|
|||
|
|
}
|
|||
|
|
// 代码参考 https://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin
|
|||
|
|
if (ot == 2 || ot == "up-mirrored") {
|
|||
|
|
ctx.translate(ctxWidth, 0);
|
|||
|
|
ctx.scale(-1, 1);
|
|||
|
|
} else if (ot == 3 || ot == "down") {
|
|||
|
|
ctx.translate(ctxWidth, ctxHeight);
|
|||
|
|
ctx.rotate(Math.PI);
|
|||
|
|
} else if (ot == 4 || ot == "down-mirrored") {
|
|||
|
|
ctx.translate(0, ctxHeight);
|
|||
|
|
ctx.scale(1, -1);
|
|||
|
|
} else if (ot == 5 || ot == "right-mirrored") {
|
|||
|
|
ctx.rotate(0.5 * Math.PI);
|
|||
|
|
ctx.scale(1, -1);
|
|||
|
|
} else if (ot == 6 || ot == "right") {
|
|||
|
|
ctx.rotate(0.5 * Math.PI);
|
|||
|
|
ctx.translate(0, -ctxHeight);
|
|||
|
|
} else if (ot == 7 || ot == "left-mirrored") {
|
|||
|
|
ctx.rotate(0.5 * Math.PI);
|
|||
|
|
ctx.translate(ctxWidth, -ctxHeight);
|
|||
|
|
ctx.scale(-1, 1);
|
|||
|
|
} else if (ot == 8 || ot == "left") {
|
|||
|
|
ctx.rotate(-0.5 * Math.PI);
|
|||
|
|
ctx.translate(-ctxWidth, 0);
|
|||
|
|
} else {
|
|||
|
|
ctx.translate(0, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
let ctxTime = 0;
|
|||
|
|
// #ifndef H5
|
|||
|
|
ctxTime = 10;
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef H5
|
|||
|
|
ctxTime = cTime();
|
|||
|
|
// #endif
|
|||
|
|
setTimeout(() => {
|
|||
|
|
ctx.drawImage(resPath, 0, 0, ctxWidth, ctxHeight)
|
|||
|
|
ctx.draw(false, () => {
|
|||
|
|
let time = 0;
|
|||
|
|
// #ifndef MP-WEIXIN
|
|||
|
|
time = 10;
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
time = cTime();
|
|||
|
|
// #endif
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.canvasToTempFilePath({
|
|||
|
|
width: Number(that.cWidth),
|
|||
|
|
height: Number(that.cHeight),
|
|||
|
|
destWidth: Number(that.cWidth),
|
|||
|
|
destHeight: Number(that.cHeight),
|
|||
|
|
canvasId: '_myCanvas',
|
|||
|
|
fileType: 'jpg',
|
|||
|
|
quality: Number(that.ql),
|
|||
|
|
success: function (res) {
|
|||
|
|
if (that.type == 'base64') {
|
|||
|
|
let img = '';
|
|||
|
|
//#ifdef MP-WEIXIN
|
|||
|
|
img = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(res.tempFilePath, "base64")
|
|||
|
|
that._result(img)
|
|||
|
|
//#endif
|
|||
|
|
//#ifdef APP-PLUS
|
|||
|
|
// console.log(JSON.stringify(res))
|
|||
|
|
plus.io.resolveLocalFileSystemURL(res.tempFilePath, function (entry) {
|
|||
|
|
entry.file(function (file) {
|
|||
|
|
let fileReader = new plus.io.FileReader();
|
|||
|
|
// console.log("getFile:" + JSON.stringify(file));
|
|||
|
|
fileReader.readAsDataURL(file);
|
|||
|
|
fileReader.onloadend = function (evt) {
|
|||
|
|
// console.log(JSON.stringify(evt))
|
|||
|
|
if (evt.target.readyState == 2) {
|
|||
|
|
that._result(evt.target.result)
|
|||
|
|
} else {
|
|||
|
|
that._err(evt)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, function (e) {
|
|||
|
|
that._err(e)
|
|||
|
|
});
|
|||
|
|
//#endif
|
|||
|
|
//#ifdef H5
|
|||
|
|
that._result(res.tempFilePath)
|
|||
|
|
//#endif
|
|||
|
|
} else {
|
|||
|
|
that._result(res.tempFilePath)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: function (e) {
|
|||
|
|
that._err(e)
|
|||
|
|
}
|
|||
|
|
}, that)
|
|||
|
|
|
|||
|
|
}, time);
|
|||
|
|
});
|
|||
|
|
}, ctxTime);
|
|||
|
|
function cTime() {
|
|||
|
|
let time = that.maxWidth / 5
|
|||
|
|
if (time >= 600) {
|
|||
|
|
return 600
|
|||
|
|
} else if (time <= 100) {
|
|||
|
|
return 100
|
|||
|
|
} else {
|
|||
|
|
return time
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// ios翻转图片
|
|||
|
|
_reverseImgData(res) {
|
|||
|
|
let w = res.width
|
|||
|
|
let h = res.height
|
|||
|
|
let con = 0
|
|||
|
|
for (let i = 0; i < h / 2; i++) {
|
|||
|
|
for (let j = 0; j < w * 4; j++) {
|
|||
|
|
con = res.data[i * w * 4 + j]
|
|||
|
|
res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]
|
|||
|
|
res.data[(h - i - 1) * w * 4 + j] = con
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return res
|
|||
|
|
},
|
|||
|
|
_getH5ImageInfo(url, callback) {
|
|||
|
|
let image = new Image()
|
|||
|
|
image.src = url
|
|||
|
|
image.onload = function (d) {
|
|||
|
|
let imgSelf = this
|
|||
|
|
let http = new XMLHttpRequest();
|
|||
|
|
http.open("GET", url, true);
|
|||
|
|
http.responseType = "blob";
|
|||
|
|
http.onload = function (e) {
|
|||
|
|
let httpSelf = this
|
|||
|
|
if (httpSelf.status == 200 || httpSelf.status === 0) {
|
|||
|
|
let reader = new FileReader();
|
|||
|
|
reader.onload = function (e) {
|
|||
|
|
// 代码参考 https://www.jianshu.com/p/eb855b580780
|
|||
|
|
let view = new DataView(this.result);
|
|||
|
|
if (view.getUint16(0, false) != 0xFFD8) return callback({ size: httpSelf.response.size, type: httpSelf.response.type, width: imgSelf.width, height: imgSelf.height, orientation: -1 });
|
|||
|
|
let length = view.byteLength, offset = 2;
|
|||
|
|
while (offset < length) {
|
|||
|
|
let marker = view.getUint16(offset, false);
|
|||
|
|
offset += 2;
|
|||
|
|
if (marker == 0xFFE1) {
|
|||
|
|
if (view.getUint32(offset += 2, false) != 0x45786966) return callback({ size: httpSelf.response.size, type: httpSelf.response.type, width: imgSelf.width, height: imgSelf.height, orientation: -1 });
|
|||
|
|
let little = view.getUint16(offset += 6, false) == 0x4949;
|
|||
|
|
offset += view.getUint32(offset + 4, little);
|
|||
|
|
let tags = view.getUint16(offset, little);
|
|||
|
|
offset += 2;
|
|||
|
|
for (let i = 0; i < tags; i++)
|
|||
|
|
if (view.getUint16(offset + (i * 12), little) == 0x0112)
|
|||
|
|
return callback({ size: httpSelf.response.size, type: httpSelf.response.type, width: imgSelf.width, height: imgSelf.height, orientation: view.getUint16(offset + (i * 12) + 8, little) });
|
|||
|
|
}
|
|||
|
|
else if ((marker & 0xFF00) != 0xFF00) break;
|
|||
|
|
else offset += view.getUint16(offset, false);
|
|||
|
|
}
|
|||
|
|
return callback({ size: httpSelf.response.size, type: httpSelf.response.type, width: imgSelf.width, height: imgSelf.height, orientation: -1 });
|
|||
|
|
};
|
|||
|
|
reader.readAsArrayBuffer(httpSelf.response);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
http.send();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 返回图片数据
|
|||
|
|
_result(src, index) {
|
|||
|
|
_rtArr.push(src)
|
|||
|
|
_index = _index + 1;
|
|||
|
|
if (_cgFile.length - 1 >= _index) {
|
|||
|
|
this._imageCompress()
|
|||
|
|
} else {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
this.$emit("result", _rtArr);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
_err(src) {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
this.$emit("err", src);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
._imageCompress {
|
|||
|
|
position: fixed;
|
|||
|
|
top: -99999upx;
|
|||
|
|
left: -99999upx;
|
|||
|
|
z-index: -99999;
|
|||
|
|
}
|
|||
|
|
</style>
|