收藏
回答

求助:canvas保存图片,就保存下来上边一半,下边的没有了

这是在手机上我想要保存的:


这是我手机保存下来的样子:

在模拟器上,保存到电脑本地,正常,但是在手机上保存就只保存一半。

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

2 个回答

  • 卢霄霄
    卢霄霄
    2018-11-28

    能做个代码片段吗?

    可能是你存图不是在 ctx.draw(false,callback)的callback里,也可能是你尺寸算错了

    2018-11-28
    赞同
    回复 12
    • Vawter
      Vawter
      2018-11-28

      我能用canvas画出来,尺寸应该就是没错的吧

      2018-11-28
      回复
    • Vawter
      Vawter
      2018-11-28

      代码贴下边了

      2018-11-28
      回复
    • 卢霄霄
      卢霄霄
      2018-11-28回复Vawter

      cts.drawImage 这些API里的尺寸的单位是px,不是rpx,看起来可能是这个缘故

      代码片段是下面链接这个哈,我能跑起来,才看得出来问题哦。。

      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      2018-11-28
      回复
    • Vawter
      Vawter
      2018-11-28回复卢霄霄

      https://developers.weixin.qq.com/s/y3mx7gms7A4d

      2018-11-28
      回复
    • Vawter
      Vawter
      2018-11-28回复卢霄霄

      应该可以用吧,第一次做代码片段


      2018-11-28
      回复
    查看更多(7)
  • Vawter
    Vawter
    2018-11-28

    wxml://////////////

    <canvas wx:if="{{d_c}}" style="z-index:20;border: 1px solid black;position:absolute;left:43rpx;top:80rpx;background-color:white;width:660rpx;height:{{c_height}}rpx;" canvas-id="myCanvas"/>

    <button wx:if="{{d_c}}" style='z-index:20;position:absolute;left:250rpx;top:{{c_height+100}}rpx;' bindtap='share'>分享到朋友圈</button>

    js://////////////

    c_canvas:function(){

        var that=this;

        that.setData({d_c:true})

        getApp().loading("请稍等……",30000)

        wx.getImageInfo({

          src: 'https://bmob-cdn-22087.bmobcloud.com/2018/11/28/98a3a696407c069080eabb219515a088.jpg',

          success(res0){

            wx.getImageInfo({

              src: that.data.img,

              success(res) {

                console.log(res)

                const cts = wx.createCanvasContext('myCanvas')

                cts.setFillStyle('white');

                cts.fillRect(0, 0, 200, 323.6);

                //上面是画背景

                cts.drawImage(res.path,6, 5, 350, res.height / res.width * 350)

                //画图片

                cts.drawImage(res0.path, 5, res.height / res.width * 350+15, 100, 100)

                //画二维码

                cts.setFillStyle('black')

                cts.setFontSize(20);

                cts.setTextAlign('left');

                cts.fillText(that.data.title, 130, res.height / res.width * 350 + 50);

                cts.fillText("--" + that.data.userNickName, 350 - that.data.userNickName.length * 15, res.height / res.width * 350 + 110);

                //画标题和名字

                that.setData({ c_height: (res.height / res.width * 350 + 130)*1.8})

                cts.draw(false, function (e) {

                  wx.canvasToTempFilePath({

                    canvasId: 'myCanvas',

                    success: function (res) {

                      // 获得图片临时路径

                      that.data.canvasimg = res.tempFilePath;

                    }

                  })

                });

                wx.hideToast()

                console.log(res.height)

              }

            })

          }

        })

      },

      share:function(){

        wx.saveImageToPhotosAlbum({

          filePath: this.data.canvasimg,

          success(res) {

            console.log(res.errMsg)

          },

          fail(res) {

            console.log(res.errMsg)

          }

        })

      },


    2018-11-28
    赞同
    回复