小程序
小游戏
企业微信
微信支付
扫描小程序码分享
原本使用 var context = wx.createCanvasContext('firstCanvas') 这种方式来使用canvas,并且制作成分享图,得到的图片没有问题。后来优化成使用 2d 的方式来制作图片,ctx.drawImage 画出的图片却有问题
期望的结果:
得到的结果:
参数都是一样的,只是原先用的是图片本地路径,2d 用的是一个image, canvas的宽高为375*667:
ctx.drawImage(path, 0, 0, 375, 375)
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
设置dpr也没解决我的问题
动态给canvas赋值 宽高时再获取canvasContext, 并导出临时图片,可利用image标签装图片
onReady: function () { const query = wx.createSelectorQuery() query.select('#resize') .fields({ node: true, size: true }) .exec((res) => { this.canvas = res[0].node }) }, this.setData({ width, height }, function () { canvas.width = width canvas.height = height let canvasContext = this.canvas.getContext('2d') })
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
设置dpr也没解决我的问题
动态给canvas赋值 宽高时再获取canvasContext, 并导出临时图片,可利用image标签装图片
onReady: function () { const query = wx.createSelectorQuery() query.select('#resize') .fields({ node: true, size: true }) .exec((res) => { this.canvas = res[0].node }) }, this.setData({ width, height }, function () { canvas.width = width canvas.height = height let canvasContext = this.canvas.getContext('2d') })
遇到drawImage,坐标、大小、模糊等问题,多半是没有给canvas根据dpr缩放
麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)