收藏
回答

canvas真机下scale不起作用,无法缩放显示的问题

transform: scale(0.2);

在真机下不起作用,在图片和小程序码合成应用中,需要实现在页面上显示320*640导出尺寸720*1280,测试发现导出是根据画布大小决定的,canvas如果按实际导出尺寸设置就会超过屏幕体验非常不好。


尝试决绝方法1:

js里设置ctx.scale(0.2, 0.2)

结果只是吧画布里的内容缩放了图片导出还是画布大小,而且因为缩小了内容导致画布很大地方空白。


尝试方法2:

设置实际导出大小*2,但是这样图片会模糊

wx.canvasToTempFilePath({
  width: w,
  height: h,
  destWidth: w * 2,
  destHeight: h * 2,
  canvasId: 'canvas_course',
  success: (res) => {
    this.data.canvas = res.tempFilePath
    wx.hideLoading()
  }
})


尝试方法3:

设置画布的transform: scale属性,在开发工具上测试是可以达到预期效果,但是在真机上scale不起作用

canvas {
  width: 720px;
  height: 1280px;
  transform: scale(0.2);
  transform-origin: left top;
}


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

3 个回答

  • lender
    lender
    2021-03-02

    创建2个canvas,一个使用ctx.scale(0.5,0.5)缩放用于展示,一个不缩放透明隐藏,保存图片的用隐藏的canvas就可以,如下代码:

    <view class="canvas-wrap"><canvas canvas-id="canvasScale" class="banner-img" style="width:750px;height:1000px;"></canvas><canvas canvas-id="canvas_hd" class="banner-img" style="width:750px;height:1000px;opacity: 0;"></canvas></view>



    2021-03-02
    有用
    回复 1
    • 王瑞鹏
      王瑞鹏
      2022-08-25
      opacity:0;无效
      2022-08-25
      1
      回复
  • 2019-01-04

    我不知道你的目的和我一样,为了放大图片,让保存的图片能更清晰一点,然后尝试各种缩放,但是我后面发现,canvas保存的图片在开发者工具里面确实会模糊,就按照canvas的宽高保存的,但是手机上还算清晰,我电脑上就设置canvas的宽高是300 * 400,电脑上保存出来的图片就是300 * 400,但是手机上保存下来是866 * 1152,还可以接受

    2019-01-04
    有用
    回复 1
    • 2019-01-11

      不能接受 改用在服务器合成了

      2019-01-11
      回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-11-05

    canvas是原生组件,

    • 无法对原生组件设置 CSS 动画

    https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

    2018-11-05
    有用
    回复 3
    • Hasaki
      Hasaki
      2019-03-04

      css动画和css样式一样吗????????????

      2019-03-04
      回复
    • Hasaki
      Hasaki
      2019-03-04

      建议文档改成:无法对原生组件设置 CSS和动画

      2019-03-04
      回复
    • Hasaki
      Hasaki
      2019-03-04

      连transform都不能用。

      2019-03-04
      回复
登录 后发表内容