html52.com
我爱小程序-开发者交流社区

小程序绘制 canvas 在手机端过大

问题模块 框架类型 问题类型 操作系统版本 手机型号 微信版本
客户端 小程序 Bug ios 12,安卓不清楚 iphonex 华为 7.0.4

- 主要问题

    今天做了一个图片,发现有点模糊,后来查看后才发现这个图片的长居然高达8000多px,原图更是30多M,恐怖如斯,找了好久问题,还以为是我用的绘制插件的问题,这里可以很明显的看出来了,我绘制了一张图片以后,原本的大小应该是和开发者工具差不多大的,结果再手机上就特别大,我的那个大图也是,在开发者工具上面只有3M,到手机上面就30多M了。望尽快解决。

- 当前 Bug 的表现(可附上截图)

图片的宽度和高度居然是 915

图片的宽度和高度居然是 915- 预期表现

- 预期表现

- 预期表现- 复现路径


- 复现路径


直接复制我的代码,然后在开发者工具或是手机上对比即可

- 提供一个最简复现 Demo

<view class="page-body">
  <view class="page-body-wrapper">
    <canvas canvas-id="canvas" class="canvas"></canvas>
  </view>
</view>
Page({
  onLoad() {
    this.createNewImg();
  },
  createNewImg() {
    let that = this;
    const ctx = wx.createCanvasContext('canvas')
 
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 100)
    ctx.draw(false, function () {
      //绘制图片
      wx.canvasToTempFilePath({
        canvasId: 'canvas',
        quality: '1',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          wx.getImageInfo({
            src: tempFilePath,
            success(res) {
              console.log(res)
            }
          })
        },
        fail: function (res) {
          console.log(res);
        }
      }, that)
    })
 
 
  },
  onUnload: function () {
 
  }
})


评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付