<template> <view> <canvas :canvas-id="canvasId" class="my-canvas" :style="{ width: canvasWidth+'px', height: canvasHeight+'px' }"></canvas> </view> </template> <script> export default { data() { return { ctx: null, canvasId: 'canvas_id', canvasWidth: 0, canvasHeight: 0 }; }, created() { this.ctx = uni.createCanvasContext(this.canvasId, this); }, methods: { // 旋转图片 rotateImage(src, angle) { uni.getImageInfo({ src }).then(res => { const { width, height } = res this.canvasWidth = height this.canvasHeight = width setTimeout(() => { this.ctx.clearRect(0, 0, width, height) this.ctx.rotate(angle * Math.PI / 180) this.ctx.translate(0, -height) this.ctx.drawImage(src, 0, 0, width, height) this.ctx.draw() uni.canvasToTempFilePath({ canvasId: this.canvasId, quality: 1, success: res => { this.$emit('success', res.tempFilePath) }, fail: err => { console.error(err) this.$emit('fail', err) } }, this) }, 200) }) } } } </script> <style scoped> .my-canvas { overflow: hidden !important; position: fixed !important; z-index: -100000 !important; visibility: hidden !important; top: 400% !important; left: 400% !important; } </style>