直接上代码(可扫码体验)
HTML
<template>
<view class="canvas-content">
<!-- 画布 -->
<canvas
class="mycanvas"
canvas-id="Canvas"
id="Canvas"
>
</canvas>
</view>
</template>```
js
<script>
export default {
data() {
return {
ctx: null,
windowWidth: 0,
windowHeight: 0,
}
},
onLoad() {
this.ctx = uni.createCanvasContext("Canvas")
},
onShow () {
let systemInfo = uni.getSystemInfoSync()
this.windowWidth = systemInfo.windowWidth
this.windowHeight = systemInfo.windowHeight
this.drawImage()
},
methods: {
drawImage () {
let _this = this
let imgUrl = '图片地址'
uni.getImageInfo({
src: imgUrl,
success (data) {
let width = _this.windowWidth
let height = _this.windowHeight
let top = 0
let left = 0
// 按比例缩放图片
if (height / width >= data.height / data.width) {
height = parseInt(width * data.height / data.width)
} else {
width = parseInt(height * data.width / data.height)
}
left = (_this.windowWidth - width) / 2
top = (_this.windowHeight - height) / 2
_this.ctx.drawImage(imgUrl, left, top, width, height)
_this.ctx.draw(false, function () {
setTimeout(() => {
// 将画布导出为临时图片文件
uni.canvasToTempFilePath({
canvasId: 'Canvas',
success: (canRes) => {
console.log(canRes.tempFilePath)
},
fail (err) {
console.log(err)
}
})
}, 200)
})
}
})
},
}
}
</script>
css
<style lang="scss" scoped>
.mycanvas {
width: 100%;
height: 100vh;
}
</style>