需求:APP上传手机原有的图片,进行覆盖指定的部分,覆盖完成后,唤起原生系统的分享面板,面板上有分享给其他人,还有打印选项
准备一个canvas和button标签
<canvas canvas-id="myCanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"/>
<button type="default" @click="clipImg">选择图片</button>
这个canvas主要是把选择的图片画上去,所以不知道选的是哪张图片,当然也不知道宽高是多少,所以用的是动态的宽高,这个宽高一定要设置!!!
完成事件
// 选择图片进行裁剪
clipImg() {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (success) => {
console.log("选择成功后==", success)
// this.bgImg = success.tempFilePaths[0]
uni.getImageInfo({
src: success.tempFilePaths[0],
success: info => {
console.log("图片信息==", info)
const {
width,
height
} = info
// 给画布设置宽高
this.canvasW = width;
this.canvasH = height;
// 创建画布
const ctx = uni.createCanvasContext('myCanvas');
console.log("宽高===", this.canvasW, this.canvasH)
// 绘制上传的图片
ctx.drawImage(success.tempFilePaths[0], 0, 0, width, height, 0, 0, width, height)
// 绘制覆盖层
ctx.setFillStyle('white');
// 这个是我随便写的一个位置和覆盖的宽高,根据自己的需求来定
ctx.fillRect(75,147, width-150, 160)
ctx.draw(false, () => {
// 将画布内容导出为图片
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
x: 0,
y: 0,
width: width,
height: height,
destWidth: width,
destHeight: height,
success: toTempFilePathRes => {
console.log('裁剪后的图片路径:',
toTempFilePathRes.tempFilePath);
// 处理裁剪后的图片,例如上传或显示
// 分享图片
plus.share.sendWithSystem({
pictures: [toTempFilePathRes.tempFilePath], // 图片路径
shareWithSystem: true // 使用系统分享,是因为不仅可以分享给其他人,也可以选择系统自带的打印功能
}, function() {
console.log("图片分享成功");
uni.showToast({
title: "图片分享成功!",
duration: 1000
});
}, function(error) {
console.error("图片分享失败: " + JSON.stringify(error));
uni.showToast({
icon: 'none',
title: JSON.stringify(error),
duration: 1000
})
});
},
fail: err => {
console.error('导出图片失败:', err);
}
})
})
},
fail: err => {
console.error('获取图片信息失败:', err);
}
})
}
});
},