微信小程序生成海报下载到本地手机本地

最新推荐文章于 2025-01-16 16:10:12 发布

原创

最新推荐文章于 2025-01-16 16:10:12 发布 · 964 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #canvas生成海报

本文介绍如何在微信小程序中使用canvas动态生成海报，并通过设置定时器确保内容完全绘制后，将图片保存到本地。代码示例包括index.js、index.wxml和index.wxss，探讨了在ctx.draw回调中可能存在的问题和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

里面有注释，这个就不详细说了，把对应的的图片路径换掉，就可以完成运行了

index.js

在这里有一个问题，所以在ctx.draw里面设置了一个定时器，因为官方文档说在ctx.draw回调中会绘制完成，但是有时去生成图片保存本地的时候，内容还没有绘制完成，导致生成图片失败，所以在这里加了一个定时器，让他绘制完成后再去生成图片去保存，不知道是不是我理解错误，还是本来就有这中情况，有知道的请告知下

const server = require("../../utils/server");
const config = require("../../utils/config");
const {
  $Toast
} = require('../../component/iview/base/index');
const ctx = wx.createCanvasContext('shareCanvas');
Page({
  data: {
    canvasWidth: "",
    canvasHeight: "",
    canvasLeft: "",
    canvasTop: "",
    imgSrc: null,
    albumsDetail: '',
    albumsDescribe: '',
    pictureList: [],
    visible: false,
    albumsId: '',
    networkStatus: true, //网络状态 
    actions: [{
        name: '取消',
        color: '#666',
      },
      {
        name: '去设置',
        color: '#19be6b'
      }
    ]
  },
  /* 
  获取图片，一般我们生成海报，海报上的二维码都是动态生成的，每次生成的二维码都不一样，且都是通过后台返回的图片地址。
  包括海报背景也是动态，后台返回会来的。所以我们现下载图片，生成临时路径。
  使用promise主要是海报可能有多个图片组成，必须等图片全部下载完成再去生成
  */
  onLoad: function(options) {
  },

  // 专辑详情获取海报内容的（这个本来是后台请求的接口，这里就不显示了）
 
  //获取纯文本方法（这个方法只是用来把后台富文本的内容转换成纯文本）
  removeHTMLTag(str) {
    str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
    str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白
    //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
    str = str.replace(/&nbsp;/ig, ''); //去掉&nbsp;
    str = str.replace(/\s/g, ''); //将空格去掉
    return str;
  },

  getImage: function(url) {
    return new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: url,
        success: function(res) {
          resolve(res)
        },
        fail: function() {
          reject("")
        }
      })
    }).catch((e) => {});
  },
  getImageAll: function(image_src) {
    let that = this;
    var all = [];
    image_src.map(function(item) {
      all.push(that.getImage(item))
    })
    return Promise.all(all)
  },