求助:canvas保存图片,就保存下来上边一半,下边的没有了
发布于 5 年前 作者 liulei 10186 次浏览 来自 问答

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

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

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

2 回复

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)

      }

    })

  },

能做个代码片段吗?

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

回到顶部