<template>
<view>
<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
</view>
</template>
<script>
export default {
data() {
return {
imagePath: ''
};
},
methods: {
getImageInfo() {
uni.getImageInfo({
src: 'https://aiapi.vip/1.jpg',
success: (res) => {
this.imagePath = res.path;
this.drawCanvas();
},
fail: (err) => {
console.log(err);
}
});
},
drawCanvas() {
const ctx = uni.createCanvasContext('myCanvas', this);
ctx.drawImage(this.imagePath, 0, 0, 300, 300);
ctx.draw();
}
},
mounted() {
this.getImageInfo();
}
}
</script>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
</style>
