update: 自动裁切正方形
This commit is contained in:
mixtan
parent
7713cc1243
commit
9926c4b5cb
@ -88,6 +88,13 @@
|
||||
>
|
||||
{{ tipObj.prompt }}
|
||||
</view>
|
||||
|
||||
<!-- 用于裁剪的canvas，默认隐藏 -->
|
||||
<canvas
|
||||
canvas-id="cropperCanvas"
|
||||
class="cropper-canvas"
|
||||
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
||||
></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -167,7 +174,7 @@ export default {
|
||||
pressImg: {
|
||||
//压缩图片 H5暂不支持压缩api
|
||||
type: Number,
|
||||
default: -1,
|
||||
default: 75,
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
@ -207,6 +214,11 @@ export default {
|
||||
headers: {},
|
||||
curPlatform: "",
|
||||
currIndex: null,
|
||||
|
||||
croppedImageUrl: "", // 裁剪后的图片地址
|
||||
canvasWidth: 0, // canvas宽度
|
||||
canvasHeight: 0, // canvas高度
|
||||
tempImagePath: "", // 临时图片路径
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -251,6 +263,88 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 处理图片：获取信息并裁剪
|
||||
processImage(tempImagePath) {
|
||||
return new Promise((reolse, reject) => {
|
||||
uni.getImageInfo({
|
||||
src: tempImagePath,
|
||||
success: (imageInfo) => {
|
||||
// 计算裁剪参数
|
||||
const { width, height } = imageInfo;
|
||||
// 确定正方形的边长（取宽高中的较小值）
|
||||
const sideLength = Math.min(width, height);
|
||||
|
||||
// 计算裁剪的起始坐标，确保居中裁剪，完整显示商品
|
||||
const x = (width - sideLength) / 2;
|
||||
const y = (height - sideLength) / 2;
|
||||
|
||||
// 设置canvas尺寸为正方形边长
|
||||
this.canvasWidth = sideLength;
|
||||
this.canvasHeight = sideLength;
|
||||
|
||||
// 绘制到canvas进行裁剪
|
||||
const ctx = uni.createCanvasContext("cropperCanvas", this);
|
||||
|
||||
// 清除画布
|
||||
ctx.clearRect(0, 0, sideLength, sideLength);
|
||||
|
||||
// 绘制图片并裁剪
|
||||
ctx.drawImage(
|
||||
tempImagePath,
|
||||
x,
|
||||
y,
|
||||
sideLength,
|
||||
sideLength, // 源图像裁剪区域
|
||||
0,
|
||||
0,
|
||||
sideLength,
|
||||
sideLength // 目标画布绘制区域
|
||||
);
|
||||
|
||||
// 执行绘制
|
||||
ctx.draw(false, () => {
|
||||
// 从canvas获取裁剪后的图片
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
canvasId: "cropperCanvas",
|
||||
width: sideLength,
|
||||
height: sideLength,
|
||||
destWidth: sideLength,
|
||||
destHeight: sideLength,
|
||||
quality: 0.9,
|
||||
success: (res) => {
|
||||
// this.croppedImageUrl = res.tempFilePath;
|
||||
reolse(res.tempFilePath);
|
||||
// uni.showToast({
|
||||
// title: "图片处理完成",
|
||||
// icon: "success",
|
||||
// });
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
console.error("canvas转图片失败：", err);
|
||||
// uni.showToast({
|
||||
// title: "图片处理失败",
|
||||
// icon: "none",
|
||||
// });
|
||||
},
|
||||
},
|
||||
this
|
||||
);
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
console.error("获取图片信息失败：", err);
|
||||
// uni.showToast({
|
||||
// title: "获取图片信息失败",
|
||||
// icon: "none",
|
||||
// });
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
upPhoto() {
|
||||
let that = this;
|
||||
if (!that.url) {
|
||||
@ -275,8 +369,8 @@ export default {
|
||||
uni.chooseImage({
|
||||
count: Number(that.canUpCount),
|
||||
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ["camera"], //从相册选择
|
||||
success: function (res) {
|
||||
sourceType: ["camera"], //拍照上传
|
||||
success: async function (res) {
|
||||
if (res) {
|
||||
if (res.tempFiles) {
|
||||
for (let item of res.tempFiles) {
|
||||
@ -303,7 +397,13 @@ export default {
|
||||
}
|
||||
}
|
||||
that.currIndex = that.imgArray.length;
|
||||
that.imgArray = [...that.imgArray, ...res.tempFilePaths];
|
||||
//#ifdef H5
|
||||
let tempUrl = res.tempFilePaths[0];
|
||||
//#endif
|
||||
//#ifdef APP-PLUS
|
||||
let tempUrl = await that.processImage(res.tempFilePaths[0]);
|
||||
//#endif
|
||||
that.imgArray = [...that.imgArray, tempUrl];
|
||||
that.changeImgArr(false);
|
||||
if (that.pressImg >= 0) {
|
||||
//存在图片压缩 开启图片压缩
|
||||
@ -323,7 +423,7 @@ export default {
|
||||
count: Number(that.canUpCount),
|
||||
sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ["album"], //从相册选择
|
||||
success: function (res) {
|
||||
success: async function (res) {
|
||||
if (res) {
|
||||
if (res.tempFiles) {
|
||||
for (let item of res.tempFiles) {
|
||||
@ -350,7 +450,14 @@ export default {
|
||||
}
|
||||
}
|
||||
that.currIndex = that.imgArray.length;
|
||||
that.imgArray = [...that.imgArray, ...res.tempFilePaths];
|
||||
//#ifdef H5
|
||||
let tempUrl = res.tempFilePaths[0];
|
||||
//#endif
|
||||
//#ifdef APP-PLUS
|
||||
let tempUrl = await that.processImage(res.tempFilePaths[0]);
|
||||
//#endif
|
||||
|
||||
that.imgArray = [...that.imgArray, tempUrl];
|
||||
that.changeImgArr(false);
|
||||
if (that.pressImg >= 0) {
|
||||
//存在图片压缩 开启图片压缩
|
||||
@ -418,7 +525,7 @@ export default {
|
||||
uni.compressImage({
|
||||
src: item.url,
|
||||
quality: _this.pressImg,
|
||||
success: (res) => {
|
||||
success: async (res) => {
|
||||
++success;
|
||||
item.pressUrl = res.tempFilePath;
|
||||
},
|
||||
@ -498,8 +605,8 @@ export default {
|
||||
//成功情况下
|
||||
_this.imgArray[i].result = true;
|
||||
res.code = 0;
|
||||
_this.imgArray[i].url = res.data.url; //这里
|
||||
callback(res.data.url);
|
||||
_this.imgArray[i].url = res?.data?.url || ''; //这里
|
||||
callback(res?.data?.url || '');
|
||||
} else {
|
||||
_this.imgArray[i].result = false;
|
||||
_this.tipObj.prompt = "上传失败，请检查！";
|
||||
@ -947,4 +1054,12 @@ export default {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 隐藏canvas，仅用于后台处理 */
|
||||
.cropper-canvas {
|
||||
position: absolute;
|
||||
left: -999999px;
|
||||
top: -999999px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
java-mall-app-shop-admin/static/icon_app_1024.png
Normal file
BIN
java-mall-app-shop-admin/static/icon_app_1024.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Loading…
Reference in New Issue
Block a user