uniapp两张图片合成一张左右对比图
时间: 2023-06-24 12:07:44 浏览: 211
两张图片合成一张
5星 · 资源好评率100%
你可以使用uniapp中的canvas来实现两张图片的合并,以下是一个示例代码:
```html
<template>
<canvas canvas-id="canvas" style="width: 100%; height: 100%;"></canvas>
</template>
<script>
export default {
onReady() {
// 获取canvas上下文
const ctx = uni.createCanvasContext('canvas', this);
// 加载两张图片
uni.getImageInfo({
src: 'https://example.com/image1.png',
success: (res1) => {
uni.getImageInfo({
src: 'https://example.com/image2.png',
success: (res2) => {
// 绘制第一张图片
ctx.drawImage(res1.path, 0, 0, res1.width, res1.height);
// 绘制第二张图片
ctx.drawImage(res2.path, res1.width, 0, res2.width, res2.height);
// 绘制对比线
ctx.beginPath();
ctx.moveTo(res1.width, 0);
ctx.lineTo(res1.width, res1.height);
ctx.strokeStyle = '#ffffff';
ctx.stroke();
// 绘制完成,保存图片
ctx.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: 'canvas',
success: (res) => {
console.log(res.tempFilePath);
},
}, this);
});
},
});
},
});
},
};
</script>
```
该代码将两张图片绘制在canvas上,并在中间绘制一条对比线,最终将合成的图片保存到本地。你可以根据自己的需求修改代码。
阅读全文