需求：根據(jù)不同用戶自動生成對應證書，并且可以下載該證書（下載后得到的是一張圖片），故要想實現(xiàn)該功能，則需要借助canvas將動態(tài)生成的內容繪制到頁面中，然后再實現(xiàn)下載功能。

1.html代碼

<view class="certify-main">
  <canvas type="2d" id="myCanvas" style="width: 375px; height: 550px;background-color: #fff;" />
  <view class="download" @click="download">下載證書</view>
</view>

頁面很簡單，只包含一個canvas和下載按鈕即可。

2.js代碼

// 所需數(shù)據(jù)
data() {
  return {
    name: "",
    year: "",
    month: "",
    day: "",
    beforeName: "",
    textCanvas: null,
    certificateNo:'',
    certQrCode:'', // 后臺返回的二維碼地址
  };
},

// 所需方法
methods(){
  // 從后臺獲取信息（以下代碼我做了封裝，你們直接正常請求接口獲取數(shù)據(jù)就行，可以忽略）
  getCurrentOrg() {
    let opts = {
      url: url,  // url是接口地址
      method: "get",
    };
    let param = {}; // 參數(shù)
    request
      .httpTokenRequest(opts, param)
      .then((data) => {
        if (data && data.data && data.data.data) { 
          // 將獲取到的數(shù)據(jù)賦值給對應字段
          const msg = data.data.data;
          if (msg.updateTime) {
            this.year = msg.updateTime.substring(0, 4)
            this.month = msg.updateTime.substring(5, 7)
            this.day = msg.updateTime.substring(8, 10)
          }
          this.beforeName = msg.snmsPrefix || "";
          this.name = msg.orgName;
          this.certificateNo = msg.certCode
          this.certQrCode = msg.certQrCode
          // 調用canvas繪制內容的方法
          this.drawCanvas()
        }
      })
      .catch((err) => {
        console.log(err);
        this.$refs.uToast.show({
          title: "數(shù)據(jù)異?；虿淮嬖?,
          type: "warning",
          duration: "2300",
        });
      });
  },
  // 下載證書的方法
  download() {
    // 指定 this 指向
    let that = this;
    // 在微信中保存canvas為圖片到本地，要通過canvas 實例的參數(shù)進行設置
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: that.textCanvas.width, // 設置畫布寬度
      height: that.textCanvas.height, // 設置畫布高度
      destWidth: that.textCanvas.width, // 屏幕width像素密度設置
      destHeight: that.textCanvas.height, // 屏幕height像素密度設置
      canvas: that.textCanvas, // 這里是重點，獲取實例的時候保存為全局變量就行了
      complete(res) {
        console.log(res);
        // res.tempFilePath 返回的是臨時地址 png 或者 jpg
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success() {
            uni.showToast({
              title: "保存成功",
              icon: "success",
            });
          },
          fail() {
            uni.showToast({
              title: "保存失敗",
              icon: "error",
            });
          },
        });
      },
    });
  },
  drawCanvas() {
    // 指定this的指向
    let that = this;
    // uni-app 中，不管是小程序，app，h5 在獲取元素實例時，都是統(tǒng)一的方法,只要獲取元素的寬高
    uni
      .createSelectorQuery()
      .select("#myCanvas")
      .fields({ node: true, size: true })
      .exec((res) => {
        console.log(res);
        // 獲取設備設備像素比
        const dpr = uni.getSystemInfoSync().pixelRatio;
        // 微信小程序繪制
        let textCanvas = (that.textCanvas = res[0].node); // 獲取元素實例
        textCanvas.width = res[0].width * dpr; // 設置canvas像素寬
        textCanvas.height = res[0].height * dpr; // 設置canvas像素高
        let textCtx = textCanvas.getContext("2d"); // 創(chuàng)建二維繪圖
        textCtx.clearRect(0, 0, res[0].width, res[0].height); // 設置畫布大小
        textCtx.beginPath(); // 創(chuàng)建一條新的路勁
        textCtx.scale(dpr, dpr); // 設置x,y縮放(這里作用不大，，沒效果)
        // 這里開始繪制canvas內容，繪制的過程當中，不知道是小程序的問題，還是什么問題在繪制有背景圖片的內容時，
        // 文字內容必須要延遲繪制，也就是要定時器延遲一定時間才能繪制，要不然就會將文字覆蓋在圖片下方。
        // 圖片的繪制（這里將此圖片作為背景圖的，圖片不能帶底色，即透明的，方便在上面寫字繪圖）
        const tx = textCanvas.createImage();
        tx.src = "https://test.xxxx.com/pic/new_certify.png"; // 線上地址或者本地地址都可以
        tx.onload = () => {
          textCtx.drawImage(
            tx,
            5,
            20,
            res[0].width-10,
            res[0].height-20
          ); // 參數(shù)從左到右說明， 圖片文件，x軸開始位置，y軸開始位置，x軸結束位置，y軸結束位置
        };
        // 文字設置
        textCtx.fillStyle = "#333"; // 文字顏色
        textCtx.font = "bold 12px MicrosoftYaHei"; // 字體樣式 設置加粗("normal bold 16px sans-serif");
        textCtx.fillText(this.name, 102, 203); // 設置文字內容， x軸位置，y軸位置
        textCtx.fillText(this.year, 111, 230); // 設置文字內容， x軸位置，y軸位置
        textCtx.fillText(this.month, 180, 230); // 設置文字內容， x軸位置，y軸位置
        textCtx.fillText(this.day, 230, 230); // 設置文字內容， x軸位置，y軸位置
        textCtx.fillText(this.beforeName, 168, 296); // 設置文字內容， x軸位置，y軸位置
        textCtx.fillStyle = "#003E8A";
        textCtx.font = "10px MicrosoftYaHei";
        textCtx.fillText(this.certificateNo, 186, 466); // 設置文字內容， x軸位置，y軸位置
        // 二維碼設置
        const tx1 = textCanvas.createImage();
        tx1.src = this.certQrCode
        tx1.onload = () => {
          textCtx.drawImage(
            tx1,
            154,
            380,
            65,
            65
          ); // 參數(shù)從左到右說明， 圖片文件，x軸開始位置，y軸開始位置，x軸結束位置，y軸結束位置
        };
      });
  },
}

3.效果圖展示

注：下圖證書編號這個地方的樣式忘了修改，部分信息由于涉及項目隱私，故馬賽克，但不影響整體效果（其中黑色文字+二維碼+證書編號是動態(tài)的，其余文字都是背景圖自帶的）

?文章來源地址http://www.zghlxwxcb.cn/news/detail-706642.html

到了這里，關于uniapp小程序使用canvas繪制內容并保存到本地相冊的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！