这种压缩是通过canvas来完成的,所以需要在wxml里面增加canvas标签来完成。
本段代码支持两种压缩:
1、手机端微信小程序压缩
2、pc端小程序压缩(解决了pc端部分机型压缩失效的问题)
3、批量压缩的图片结果按照原始顺序排列
js部分:
var c = require("./common.js");
var toConsumableArray = require("./toConsumableArray.js");
function acquireImageList(e,self,callbackFunction) {
var o = self.data.photos.length,
e = self.data.maxCount;
wx.chooseImage({
count: e - o,
sizeType: ["compressed"],
sourceType: ["album"],
success: function (o) {
c.showLoading("图片压缩中");
var tempFiles = o.tempFiles;
// 超过2M的图片压缩后保存在这
var compressArray = new Array();
// 不压缩图
var noCompressArray = new Array();
var maxFilesCount = -1;
for (var i = 0; i < tempFiles.length; i++) {
if (tempFiles[i].size > 2024000) {
if (maxFilesCount == -1) {
maxFilesCount = 1;
} else {
maxFilesCount++;
}
} else {
noCompressArray.splice(i, 0, tempFiles[i].path);
}
}
self.setData({
maxFilesCount: maxFilesCount
});
for (var i = 0; i < tempFiles.length; i++) {
if (tempFiles[i].size > 2024000) {
//进行二次压缩
getImageInfoWH(tempFiles, i, compressArray, self,callbackFunction);
}
}
if (noCompressArray.length > 0) {
self.data.photos = [].concat(toConsumableArray(self.data.photos), toConsumableArray(noCompressArray)), self.setData({
photos: self.data.photos
});
if(callbackFunction!=null){
callbackFunction();
}
c.hideLoading();
}
},
fail: function (e) {
c.hideLoading();
}
});
return e;
}
function getImageInfoWH(tempFiles, i, map, s,callbackFunction) {
wx.getImageInfo({
src: tempFiles[i].path,
success(res) {
var fileIndex = i;
//---------利用canvas压缩图片--------------
var ratio = getApp().globalData.pixelRatio;
var canvasWidth = res.width; //图片原始长宽
var canvasHeight = res.height;
while (canvasWidth > 1200 || canvasHeight > 1200) { // 保证宽高在850以内
canvasWidth = Math.trunc(res.width / ratio);
canvasHeight = Math.trunc(res.height / ratio);
}
switch (fileIndex) {
case 0:
s.setData({
canvasWidth0: canvasWidth,
canvasHeight0: canvasHeight
})
break;
case 1:
s.setData({
canvasWidth1: canvasWidth,
canvasHeight1: canvasHeight
})
break;
case 2:
s.setData({
canvasWidth2: canvasWidth,
canvasHeight2: canvasHeight
})
break;
case 3:
s.setData({
canvasWidth3: canvasWidth,
canvasHeight3: canvasHeight
})
break;
case 4:
s.setData({
canvasWidth4: canvasWidth,
canvasHeight4: canvasHeight
})
break;
case 5:
s.setData({
canvasWidth5: canvasWidth,
canvasHeight5: canvasHeight
})
break;
case 6:
s.setData({
canvasWidth6: canvasWidth,
canvasHeight6: canvasHeight
})
break;
case 7:
s.setData({
canvasWidth7: canvasWidth,
canvasHeight7: canvasHeight
})
break;
case 8:
s.setData({
canvasWidth8: canvasWidth,
canvasHeight8: canvasHeight
})
break;
}
setTimeout(() => {
//----------绘制图形并取出图片路径--------------
canvasFunction(res, canvasWidth, canvasHeight, fileIndex, map, s,callbackFunction);
}, 200);
}
});
}
function canvasFunction(res, canvasWidth, canvasHeight, fileIndex, map, s,callbackFunction) {
var ctx = wx.createCanvasContext('canvas' + fileIndex);
ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight);
ctx.draw(false, setTimeout(function () {
var drawIndex = fileIndex;
wx.canvasToTempFilePath({
destWidth: canvasWidth,
destHeight: canvasHeight,
canvasId: "canvas" + drawIndex,
success: function (res) {
var lastIndex = drawIndex;
map.splice(lastIndex, 0, res.tempFilePath);
console.log('绘制完成', map.length, s.data.maxFilesCount);
if (map.length == s.data.maxFilesCount) {
s.data.photos = [].concat(toConsumableArray(s.data.photos), toConsumableArray(map)), s.setData({
photos: s.data.photos
});
if(callbackFunction != null){
callbackFunction();
}
c.hideLoading();
}
},
fail: function (res) {
console.log(res.errMsg);
}
});
}, getApp().globalData.canvasContextDrawDelay));
}
/**
* 单图压缩上传
* @param {} tempFiles
* @param {*} type
* @param {*} map
* @param {*} self
* @param {*} assignmentUrlFunction
*/
function compressOneThenCanvas(self, type, tempFile, canvasName, assignmentUrl) {
wx.getImageInfo({
src: tempFile,
success(res) {
//---------利用canvas压缩图片--------------
var ratio = getApp().globalData.pixelRatio;
var canvasWidth = res.width; //图片原始长宽
var canvasHeight = res.height;
while (canvasWidth > 900 || canvasHeight > 900) { // 保证宽高在850以内
canvasWidth = Math.trunc(res.width / ratio);
canvasHeight = Math.trunc(res.height / ratio);
ratio += 0.1;
}
canvasAssignmentFunction(self, type, canvasWidth, canvasHeight);
setTimeout(() => {
//----------绘制图形并取出图片路径--------------
canvasCompressImage(res, canvasName, canvasWidth, canvasHeight, self, type, assignmentUrl);
}, 200);
}
});
}
function canvasAssignmentFunction(self, type, width, height) {
if (type == 0) {
self.setData({
canvasCardFrontWidth: width,
canvasCardFrontHeight: height
})
} else if (type == 1) {
self.setData({
canvasCardBackWidth: width,
canvasCardBackHeight: height
})
} else if (type == 2) {
self.setData({
canvasCardHandWidth: width,
canvasCardHandHeight: height
})
} else {
self.setData({
canvasNoteHandWidth: width,
canvasNoteHandHeight: height
})
};
}
function canvasCompressImage(res, canvasName, canvasWidth, canvasHeight, self, type, assignmentUrl) {
var ctx = wx.createCanvasContext(canvasName);
ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight);
ctx.draw(false, setTimeout(function () {
wx.canvasToTempFilePath({
destWidth: canvasWidth,
destHeight: canvasHeight,
canvasId: canvasName,
success: function (res) {
uploadSmrz(res.tempFilePath, assignmentUrl, self, type);
},
fail: function (res) {
console.log(res.errMsg);
}
});
}, getApp().globalData.canvasContextDrawDelay));
}
toConsumableArray.js的代码:
下面展示一些 内联代码片
。
function _toConsumableArray(r) {
return arrayWithoutHoles(r) || iterableToArray(r) || unsupportedIterableToArray(r) || nonIterableSpread();
}
function arrayWithoutHoles(r) {
if (Array.isArray(r)) return arrayLikeToArray(r);
}
function iterableToArray(r) {
if ("undefined" != typeof Symbol && Symbol.iterator in Object(r)) return Array.from(r);
}
function unsupportedIterableToArray(r, e) {
if (r) {
if ("string" == typeof r) return arrayLikeToArray(r, e);
var t = Object.prototype.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? arrayLikeToArray(r, e) : void 0;
}
}
function arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = new Array(a); e < a; e++) n[e] = r[e];
return n;
}
function nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
module.exports = _toConsumableArray;
module.exports = arrayWithoutHoles;
module.exports = iterableToArray;
module.exports = unsupportedIterableToArray;
module.exports = arrayLikeToArray;
wxml部分:
下面展示一些 内联代码片
。
<canvas canvas-id="canvas0" style="width:{{canvasWidth0}}px; height: {{canvasHeight0}}px;position: absolute;left:-1000px;top:-1000px; "></canvas>
<canvas canvas-id="canvas1" style="width:{{canvasWidth1}}px; height: {{canvasHeight1}}px;position: absolute;left:-1000px;top:-1000px; "></canvas>
<canvas canvas-id="canvas2" style="width:{{canvasWidth2}}px; height: {{canvasHeight2}}px;position: absolute;left:-1000px;top:-1000px; "></canvas>
<canvas canvas-id="canvas3" style="width:{{canvasWidth3}}px; height: {{canvasHeight3}}px;position: absolute;left:-1000px;top:-1000px; "></canvas>
<canvas canvas-id="canvas4" style="width:{{canvasWidth4}}px; height: {{canvasHeight4}}px;position: absolute;left:-1000px;top:-1000px; "></canvas>
<canvas canvas-id="canvas5" style="width:{{canvasWidth5}}px; height: {{canvasHeight5}}px;position: absolute;left:-1000px;top:-1000px; "></canvas>
<canvas canvas-id="canvas6" style="width:{{canvasWidth6}}px; height: {{canvasHeight6}}px;position: absolute;left:-1000px;top:-1000px; "></canvas>
<canvas canvas-id="canvas7" style="width:{{canvasWidth7}}px; height: {{canvasHeight7}}px;position: absolute;left:-1000px;top:-1000px; "></canvas>
<canvas canvas-id="canvas8" style="width:{{canvasWidth8}}px; height: {{canvasHeight8}}px;position: absolute;left:-1000px;top:-1000px; "></canvas>