首页技术正文

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

程序员建行技术 2022年11月14日

0 收藏 492 点赞 3,406 浏览 1677 个字

涉及好多个问题

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

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

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

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: '',
    password: "",
    width:,
    height:,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let rpx = ;    wx.getSystemInfo({
      success(res) {
        rpx = res.windowWidth / ;
      },
    })    var that = this;    const ctx = wx.createCanvasContext('testCanvas');//这个代码要放onload里面   腾讯真坑 啥都不说
    ctx.setFillStyle('#FFFFFF')
    ctx.fillRect(, , that.data.width, that.data.height);//这个是防止截图黑屏的 先进行填充
    ctx.drawImage("../images/cat_msg.png", , , , );//图片的路径注意细节，这个名字是放在和JS相同目录的 用的这个名字
    ctx.setFontSize() //字体大小
    ctx.textAlign = "center"; //文字居中
    ctx.setFillStyle('#242424')
    ctx.fillText('使用说明', , )
    ctx.fillText('1.打开电脑浏览器，在浏览器中输入', , )
    ctx.setFillStyle('#FF3030')
    ctx.fillText(that.data.website, , )
    ctx.setFillStyle('#242424')
    ctx.fillText('2.填写用户名:', , )
    ctx.setFillStyle('#FF3030')
    ctx.fillText(that.data.username, , )
    ctx.setFillStyle('#242424')
    ctx.fillText('3.填写验证码:', , )
    ctx.setFillStyle('#FF3030')
    ctx.fillText(that.data.password, , )
    ctx.setFillStyle('#242424')
    ctx.fillText('4.进入页面,找到文件进行下载使用', , )
    ctx.fillText('注：可以点击右上角“修改”，进行修', , )
    ctx.fillText('改用户名和提取码操作', , )
    ctx.drawImage("../images/button_printscreen.png", , , , );
    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()
            }
          })
        }
      })
    }})