uniapp实现将图片按比例画在canvas上

直接上代码（可扫码体验）

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>