【亲测可用网上的不靠谱居多】一个完整的用canvas画内容然后保存到本地的例子

涉及好多个问题

比如保存到本地有黑色背景

怎么用把文字和图 画到画布上

腾讯的东西就是坑多了 直接上代码吧 啥也不说额

pic.wxml

<view class='container'>
<canvas bindtap='clickMe' canvas-id='testCanvas' class='testCanvas' style="height:{{height}}px;width:{{width}}px;background-color:white;" ></canvas>
</view>

 

pic.js

Page({

  data: {
    website: '123.com',
    username: '123', 
    password: "1234",
    width:300,
    height:560,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let rpx = 1;

    wx.getSystemInfo({
      success(res) {
        rpx = res.windowWidth / 375;
      },
    })

   
    var that = this;

    const ctx = wx.createCanvasContext('testCanvas');//这个代码要放onload里面   腾讯真坑 啥都不说
    ctx.setFillStyle('#FFFFFF')
    ctx.fillRect(0, 0, that.data.width, that.data.height);//这个是防止截图黑屏的 先进行填充
    ctx.drawImage("../images/cat_msg.png", 120, 30, 50, 50);//图片的路径注意细节，这个名字是放在和JS相同目录的 用的这个名字
    ctx.setFontSize(16) //字体大小
    ctx.textAlign = "center"; //文字居中
    ctx.setFillStyle('#242424')
    ctx.fillText('使用说明', 60, 130)
    ctx.fillText('1.打开电脑浏览器，在浏览器中输入', 150, 160)
    ctx.setFillStyle('#FF3030')
    ctx.fillText(that.data.website, 110, 180)
    ctx.setFillStyle('#242424')
    ctx.fillText('2.填写用户名:', 70, 205)
    ctx.setFillStyle('#FF3030')
    ctx.fillText(that.data.username, 170, 205)
    ctx.setFillStyle('#242424')
    ctx.fillText('3.填写验证码:', 70, 230)
    ctx.setFillStyle('#FF3030')
    ctx.fillText(that.data.password, 140, 230)
    ctx.setFillStyle('#242424')
    ctx.fillText('4.进入页面,找到文件进行下载使用', 140, 255)
    ctx.fillText('注：可以点击右上角“修改”，进行修', 150, 320)
    ctx.fillText('改用户名和提取码操作', 100, 340)
    ctx.drawImage("../images/button_printscreen.png", 0, 400, 300, 100);
    ctx.setFillStyle('#ffffff');
    ctx.draw();
  },
    clickMe() {
      var that = this;
      wx.canvasToTempFilePath({
        width: that.data.width,
        height: that.data.height,
        destWidth: that.data.width,
        destHeight: that.data.height,
        canvasId: 'testCanvas',
        success: function (res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              console.log(res)
              wx.hideLoading();
              wx.showToast({
                title: '保存成功',
              });
            },
            fail() {
              wx.hideLoading()
            }
          })
        }
      })
    }

  
 
})

说多了 都是泪