From 9d5803a79aad859e201b94040e369298c7c348b0 Mon Sep 17 00:00:00 2001
From: chensiAb <chenchenco03@163.com>
Date: Fri, 23 Aug 2024 10:59:53 +0800
Subject: [PATCH] fix:兼容加载失败时&没数据时，页面显示暂无数据
---
forms/imagePicker/CImageCompressor.vue | 82 ++++++++++++++++++++++++++++++++---------
1 files changed, 64 insertions(+), 18 deletions(-)
diff --git a/forms/imagePicker/CImageCompressor.vue b/forms/imagePicker/CImageCompressor.vue
index 4bd1862..55ab730 100644
--- a/forms/imagePicker/CImageCompressor.vue
+++ b/forms/imagePicker/CImageCompressor.vue
@@ -20,6 +20,12 @@
export default {
name: 'CImageCompressor',
+ props: {
+ maxSize: {
+ type: Number,
+ default: 1600,
+ },
+ },
data() {
return {
// canvas id
@@ -33,6 +39,7 @@
},
methods: {
$compress(tempPaths, callback) {
+ this.imgBlobs = []; // 重置已转图片
if (typeof this.canvasContext === 'undefined') {
this.canvasContext = Taro.createCanvasContext(this.cavId, this);
}
@@ -46,7 +53,7 @@
}
// 完成图片压缩
else {
- console.log(this.imgBlobs);
+ callback(this.imgBlobs);
}
});
};
@@ -57,14 +64,40 @@
src: tempPath,
success: res => {
const size = this._limitSize(res);
- const drawSet = this._creatDrawSet(res, size);
- this._drawImage(tempPath, drawSet, compress => {
- this.imgBlobs.push({
- source: tempPath,
- compress,
+ // 网页图片压缩
+ if (process.env.TARO_ENV === 'h5') {
+ const drawSet = this._creatDrawSet(res, size);
+ this._drawImage(tempPath, drawSet, compress => {
+ this.imgBlobs.push({
+ source: tempPath,
+ compress,
+ });
+ callback();
});
- callback();
- });
+ }
+ // 小程序图片压缩
+ else if (process.env.TARO_ENV === 'weapp') {
+ Taro.compressImage({
+ src: tempPath,
+ quality: 60,
+ compressedWidth: size[0],
+ compressHeight: size[1],
+ success: cps => {
+ this.imgBlobs.push({
+ source: tempPath,
+ compress: cps.tempFilePath,
+ });
+ callback();
+ },
+ fail: err => {
+ this.imgBlobs.push({
+ source: tempPath,
+ compress: tempPath,
+ });
+ callback();
+ },
+ });
+ }
},
});
},
@@ -73,12 +106,12 @@
let width, height;
// 宽大于高，按宽算
if (res.width >= res.height) {
- width = Math.min(res.width, 1600);
+ width = Math.min(res.width, this.maxSize);
height = Math.round(width / rate);
}
// 按高算
else {
- height = Math.min(res.height, 1600);
+ height = Math.min(res.height, this.maxSize);
width = Math.round(height * rate);
}
return [width, height];
@@ -86,13 +119,10 @@
_setCanvasSize(width, height) {
this.cavWidth = width;
this.cavHeight = height;
- if (process.env.TARO_ENV === 'h5') {
- $(this.$refs.canvas.$el)
- .find('canvas')
- .attr('width', width)
- .attr('height', height);
- }
- // TODO: 小程序中的 canvas 重设
+ $(this.$refs.canvas.$el)
+ .find('canvas')
+ .attr('width', width)
+ .attr('height', height);
},
_creatDrawSet(res, [width, height]) {
const orientation = res.orientation || 'up';
@@ -133,7 +163,23 @@
const [key, params] = step;
if (key === 'drawImage') {
// 使用图片
- const img = new Image();
+ const img = (() => {
+ if (typeof Image === 'undefined') {
+ console.log(this.$refs.canvas);
+ console.log($('canvas[canvas-id=' + this.cavId + ']'));
+
+ const query = Taro.createSelectorQuery();
+ query
+ .select('canvas[canvas-id=' + this.cavId + ']')
+ .boundingClientRect()
+ .exec(res => {
+ console.log(res);
+ });
+ return this.$refs.canvas.createImage();
+ } else {
+ return new Image();
+ }
+ })();
img.src = tempPath;
this.canvasContext.drawImage(img, ...params);
} else {
--
Gitblit v1.9.1