收藏
回答

小程序使用canvas旋转图片,内存不足的问题?

业务需求,有一张图片本地图片,需要进行旋转生成新的图片

使用canvas实现,第1次点击正常,第2次点击会提示内存不足,或者直接闪退

调试基础库3.1.0

ios真机微信版本8.0.41

操作视频可点击链接查看:

https://pan.baidu.com/s/15F1HFzpfSZxPlX1vL4DuGw?pwd=1234 

手机微信日志11:00-12:00日志已上传,崩溃触发时间是11:23,微信号是lifei8241102



回答关注问题邀请回答
收藏

4 个回答

  • 社区技术运营专员--许涛
    社区技术运营专员--许涛
    2023-09-20

    你好,麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2023-09-20
    有用
    回复
  • 欣之所在心所往
    欣之所在心所往
    2023-09-20
    <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>
    
    2023-09-20
    有用
    回复 1
    • 欣之所在心所往
      欣之所在心所往
      2023-09-20
      开发者工具中点击旋转非常丝滑,真机才会出问题,不知道是否是因为开发者工具预设内存比较大导致的
      2023-09-20
      回复
  • bishang
    bishang
    2023-09-20

    图片太大?

    2023-09-20
    有用
    回复 1
  • Jerry
    Jerry
    2023-09-20

    贴代码

    2023-09-20
    有用
    回复 4
    • 欣之所在心所往
      欣之所在心所往
      2023-09-20
      代码已贴,求大神指点
      2023-09-20
      回复
    • Jerry
      Jerry
      2023-09-20回复欣之所在心所往
      每次旋转之前都要获取宽高?
      每次旋转之后都会自动保存一次图片?
      2023-09-20
      回复
    • 欣之所在心所往
      欣之所在心所往
      2023-09-20回复Jerry
      是的,相当于是一个图片旋转的逻辑组件,输入是图片,输出也是图片
      输出的图片 url 会赋值给调用页面的变量,在调用界面上使用image标签进行展示,尝试中发现如果不进行赋值,一直点旋转也不会报错
      2023-09-20
      回复
    • Jerry
      Jerry
      2023-09-20回复欣之所在心所往
      1.反正就是那一张图片转来转去,为什么不只获取一次宽高?后面无论怎么转宽高又不会变
      2. 你这何必多此一举用image展示,你canvas不都画好了吗?用canvas展示啊
      2023-09-20
      回复
登录 后发表内容