小程序
小游戏
企业微信
微信支付
扫描小程序码分享
业务需求,有一张图片本地图片,需要进行旋转生成新的图片
使用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 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你好,麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
<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>
图片太大?
贴代码
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你好,麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
<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>
图片太大?
贴代码
每次旋转之后都会自动保存一次图片?
输出的图片 url 会赋值给调用页面的变量,在调用界面上使用image标签进行展示,尝试中发现如果不进行赋值,一直点旋转也不会报错
2. 你这何必多此一举用image展示,你canvas不都画好了吗?用canvas展示啊