收藏
回答

请问大神们,为什么canvas不能动态设置大小

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvas 客户端 7.0.3 1.9.91

您好!大神!!!

我想通过canvas生成缩略图,但是老是只生了图片的一部份 (客户端 IPHONE7有此问题  开发者工具不会出现这个问题)


WXML


<canvas canvas-id="shareCanvas" style=" top:-{{cavHeight}}px;left:-{{cavWidth}}px;   width:{{cavWidth}}px;height:{{cavHeight}}px;background:#ccc;"></canvas>




JS


1.设置默认大小

data: {

PicUrl: "",

cavWidth:100,

cavHeight:100,

pixelRatio: device.pixelRatio

},


2.选择图片后自动调整画布大小


wx.getImageInfo({

src: PicUrl,

success: function(res) {

console.log(res);

const ctx = wx.createCanvasContext('shareCanvas')

console.log("画布信息");

console.log(ctx);

var cavWidth = res.width;// / device.pixelRatio;

var cavHeight = res.height;// / device.pixelRatio;

console.log("画布宽度:"+ctx.width+"px 高度:"+ctx.height);

console.log("图片宽度:" + res.width + "px 高度:" + res.height);

console.log(ctx);

page.setData({

cavWidth: cavWidth,

cavHeight: cavHeight

})



最终客户端只显示 了图片的一部份


就是canvas的默认值  

cavWidth:100,

cavHeight:100,

而代码

page.setData({

cavWidth: cavWidth,

cavHeight: cavHeight

})

并没有生效  抓狂了,谢谢大神们指引一下

最后一次编辑于  03-11  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

3 个回答

  • 卢霄霄
    卢霄霄
    03-12

    在给canvas设置宽高的setData的回调方法里画图。。如果还需要直接存图,还要setTimeout一下

    03-12
    赞同 1
    回复 5
    • surpass
      surpass
      03-12

      我的确是在回调时画图的,可是还是不行,后来我在回调方法内 再加一个setTimeOUT 问题就解决了,不过只设置了一秒,具体要设置几秒呢?


      如果只设置一秒,会不会因为图片太大而无法正常保存呢?


      这算不算小程序的一个bug啊?

      03-12
      回复
    • 卢霄霄
      卢霄霄
      03-12回复surpass

      page.setData({

          cavWidth: cavWidth,

          cavHeight: cavHeight

      },()=>{

          ctx.drawImage...

          ctx.draw(false,()=>{

              setTimeout(()=>{

                  wx.canvasToTempFilePath...

              },200)

          })

      })


      03-12
      回复
    • surpass
      surpass
      03-12回复卢霄霄

      大神,你只设置了200毫秒,确定这样不会因为图片太大而产生问题?

      03-12
      回复
    • 卢霄霄
      卢霄霄
      03-12回复surpass

      不会 这里这是用的回调的方式 draw会保证画好了之后才进入回调

      03-12
      回复
    • surpass
      surpass
      03-12回复卢霄霄

      好的,谢谢你

      03-12
      回复
  • 杭州弧途科技有限公司
    杭州弧途科技有限公司
    03-11

    麻烦做个代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    如果不行可以看下这个文章:https://www.jianshu.com/p/fdfd8ca4bfec

    03-11
    赞同
    回复 1
    • surpass
      surpass
      03-11

      wxml  源码


      <!--pages/test/make_pic.wxml-->

      <view>

      Canvas宽度:{{cavWidth}} Canvas 高度:{{cavHeight}}

      </view>

      <view bindtap="ClickUploadPhoto" style='width:395rpx;height:100rpx;background:#ff6600;color:#fff;text-align:center;'>

      <!-- <image wx:if="{{PicUrl!=''}}" src='{{PicUrl}}' mode='widthFix'></image> -->

      上传

      </view>

      <image wx:if="{{TmpPic!=''}}" src='{{TmpPic}}' mode='widthFix' style='background:#ccc;border:#ff6600;'></image>

      <canvas bindtap="ClickUploadPhoto" canvas-id="shareCanvas" style=" top:0px;left:0px;   width:{{cavWidth}}px;height:{{cavHeight}}px;background:#ccc;"></canvas>




      js源码


      // pages/test/make_pic.js


      const device = wx.getSystemInfoSync();

      Page({


      /**

        * 页面的初始数据

        */

      data: {

      PicUrl: "",

      cavWidth: 100,

      cavHeight: 100,

      pixelRatio: device.pixelRatio

      },


      //上传图片

      ClickUploadPhoto: function(e) {

      var page = this;



      var index = e.currentTarget.dataset.index;

      var pictype = e.currentTarget.dataset.pictype;

      wx.chooseImage({

      // 设置最多可以选择的图片张数,默认9,如果我们设置了多张,那么接收时//就不在是单个变量了,

      count: 1,

      sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有

      sourceType: ['album'], // album 从相册选图,camera 使用相机,默认二者都有

      success: function(res) {

      // 获取成功,将获取到的地址赋值给临时变量

      var tempFilePaths = res.tempFilePaths;

      var PicUrl = tempFilePaths[0];

      page.setData({

      PicUrl: PicUrl

      })

      wx.getImageInfo({

      src: PicUrl,

      success: function(res) {

      console.log(res);

      const ctx = wx.createCanvasContext('shareCanvas')

      console.log("画布信息");

      console.log(ctx);


      var cavWidth = res.width; // device.pixelRatio;

      var cavHeight = res.height; // device.pixelRatio;

      console.log("画布宽度:" + cavWidth + "px 高度:" + cavHeight);

      console.log("图片宽度:" + res.width + "px 高度:" + res.height);

      console.log("缩放倍率" + device.pixelRatio);

      console.log(ctx);

      page.setData({

      cavWidth: cavWidth,

      cavHeight: cavHeight

      })


      ctx.drawImage(PicUrl, 0, 0, cavWidth, cavHeight)



      // // 作者名称

      // ctx.setTextAlign('left') // 文字居中

      // ctx.setFillStyle('#ffff00') // 文字颜色:黑色

      // ctx.setFontSize(22) // 文字字号:22px

      // ctx.fillText("this is pic txt", 50, 50)


      //ctx.stroke()

      ctx.draw(true, function(resObj) {

      console.log("绘画结果");

      console.log(resObj);

      wx.canvasToTempFilePath({

      x: 0,

      y: 0,

      //quality:1,

      fileType: "jpg",


      canvasId: 'shareCanvas',

      success: function(d_res) {

      wx.showToast({

      title: '成功把文件加入到临时文件夹',

      duration: 3000

      })

      console.log("成功写入到临时文件");

      console.log(d_res);

      var TmpPic = d_res.tempFilePath;


      console.log("临时图片");

      console.log(TmpPic);


      wx.saveImageToPhotosAlbum({

      filePath: TmpPic,

      })


      page.setData({

      TmpPic: TmpPic

      })


      }

      }, this)





      })

      }

      })




      },

      fail: function(res) {

      console.log(res);

      },

      complete: function(res) {

      console.log(res);

      }

      })

      },

      /**

        * 生命周期函数--监听页面加载

        */

      onLoad: function(options) {

      wx.getSetting({

      success(res) {

      console.log(res);

      console.log("是否打开相册写入权限:" + res.authSetting['scope.writePhotosAlbum']);

      if (!res.authSetting['scope.writePhotosAlbum']) {

      wx.authorize({

      scope: 'scope.writePhotosAlbum',

      success() {


      }

      })

      } else {


      wx.showToast({

      title: '打开了相册写入权限:',

      duration: 3000,

      icon: 'none'

      })



      }

      }

      })


      },


      /**

        * 生命周期函数--监听页面初次渲染完成

        */

      onReady: function() {


      },


      /**

        * 生命周期函数--监听页面显示

        */

      onShow: function() {


      },


      /**

        * 生命周期函数--监听页面隐藏

        */

      onHide: function() {


      },


      /**

        * 生命周期函数--监听页面卸载

        */

      onUnload: function() {


      },


      /**

        * 页面相关事件处理函数--监听用户下拉动作

        */

      onPullDownRefresh: function() {


      },


      /**

        * 页面上拉触底事件的处理函数

        */

      onReachBottom: function() {


      },


      /**

        * 用户点击右上角分享

        */

      onShareAppMessage: function() {


      }

      })


      03-11
      回复
  • Smile
    Smile
    03-12

    <canvas

        canvas-id="shareCanvas"

        width="{{cavWidth}}"

        height="{{cavHeight}}"

        style=" top:-{{cavHeight}}px;left:-{{cavWidth}}px;   width:{{cavWidth}}px;height:{{cavHeight}}px;background:#ccc;">

    </canvas>

    03-12
    赞同
    回复 2
    • surpass
      surpass
      03-12

      谢谢,但此方法无效

      03-12
      回复
    • Smile
      Smile
      03-12回复surpass

      可能因为创建canvasContext了,所以不能动态改变了,之前应该是可以的,你在setData设置了canvas长宽之后回调里wx.createCanvasContext('shareCanvas')试试可以不

      03-12
      回复