??博主：小貓娃來啦
??本文核心：本地圖片和接口返回二維碼制作一體化canvas海報

創(chuàng)建一個畫布

在微信小程序中，我們使用<canvas>標(biāo)簽來創(chuàng)建一個畫布

wxml 文件：

<view class="container">
  <canvas canvas-id="myCanvas" class="canvas"></canvas>
</view>

確立基本樣式

wxss文件：

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  width: 300px;
  height: 300px;
}

通過canvas API繪制圖像

Page({
  onReady() {
    const ctx = wx.createCanvasContext('myCanvas');
    
    // 繪制背景圖片
    wx.getImageInfo({
      src: '../img/bg.png', // 本地背景圖片路徑
      success(res) {
        ctx.drawImage(res.path, 0, 0, 300, 300);
        
        // 繪制二維碼
        wx.request({
          url: '', // 替換成實(shí)際的二維碼接口地址
          success(res) {
            wx.getImageInfo({
              src: res.data.qrcodeUrl,
              success(res) {
                // 繪制二維碼到畫布上
                ctx.drawImage(res.path, 100, 100, 100, 100);
                
                // 繪制文字
                ctx.setFontSize(16);
                ctx.setFillStyle('#ffffff');
                ctx.fillText('我的推廣碼', 120, 250);
                
                // 繪制完成并保存畫布
                ctx.draw(false, () => {
                  wx.canvasToTempFilePath({
                    canvasId: 'myCanvas',
                    success(res) {
                      console.log('Canvas 生成臨時圖片路徑:', res.tempFilePath);
                    },
                    fail(err) {
                      console.error('Canvas 保存失敗:', err);
                    }
                  });
                });
              },
              fail(err) {
                console.error('獲取二維碼圖片失敗:', err);
              }
            });
          },
          fail(err) {
            console.error('請求二維碼接口失敗:', err);
          }
        });
      },
      fail(err) {
        console.error('獲取背景圖片信息失敗:', err);
      }
    });
  }
});

細(xì)節(jié)1

我們先使用wx.createCanvasContext創(chuàng)建一個<canvas>的上下文對象，然后通過調(diào)用drawImage方法分別繪制背景圖片和二維碼到畫布上。接著，我們使用fillText方法繪制一段文字，最后調(diào)用ctx.draw方法并設(shè)置reserve參數(shù)為false來完成畫布的繪制。

當(dāng)畫布繪制完成后，我們可以通過wx.canvasToTempFilePath方法將畫布保存為臨時圖片文件，并在成功回調(diào)中獲取到臨時圖片的路徑。你可以根據(jù)實(shí)際需求，將臨時圖片路徑傳遞給其他接口或展示在界面上。

長按保存

要實(shí)現(xiàn)長按保存功能，我們在 <canvas> 上監(jiān)聽 touch 事件，并在長按事件觸發(fā)時保存畫布圖像
首先在剛剛的<canvas>標(biāo)簽上，我們需要加個事件：

<view class="container">
  <canvas canvas-id="myCanvas" class="canvas" bindlongtap="saveImage"></canvas>
</view>

我們給 <canvas> 添加了 bindlongtap 事件綁定，并指定了對應(yīng)的回調(diào)函數(shù) saveImage。當(dāng)用戶長按 <canvas> 時，將會觸發(fā) saveImage 函數(shù)。

  saveImage() {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success(res) {
        const imageFilePath = res.tempFilePath;
        wx.saveImageToPhotosAlbum({
          filePath: imageFilePath,
          success() {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            });
          },
          fail(err) {
            console.error('保存圖片到相冊失敗:', err);
          }
        });
      },
      fail(err) {
        console.error('Canvas 保存失敗:', err);
      }
    });
  }

細(xì)節(jié)2

在 saveImage 函數(shù)中，我們使用 wx.canvasToTempFilePath 方法將畫布保存為臨時圖片文件。在成功回調(diào)中，我們可以獲取到臨時圖片的路徑 res.tempFilePath，然后通過 wx.saveImageToPhotosAlbum 方法將圖片保存到相冊中。保存成功后，我們提示“保存成功”。

需要注意，在使用 wx.saveImageToPhotosAlbum 保存圖片到相冊時，需要用戶進(jìn)行授權(quán)。這個時候我們可以在小程序設(shè)置中添加相冊權(quán)限，并根據(jù)實(shí)際需求處理授權(quán)相關(guān)邏輯。

我們也可以綁定bindlongpress事件，這就是最直接的長按事件

注意：長按事件默認(rèn)的觸發(fā)時間為 350ms，也可以通過 longpress-duration 屬性來調(diào)整長按的觸發(fā)時間，單位為毫秒。例如：

<canvas canvas-id="myCanvas" class="canvas"bindlongpress="downimg" longpress-duration="1000"></canvas>

那么如此一來就意味著長按畫布一秒，觸發(fā)函數(shù)downimg

最終實(shí)現(xiàn)效果：

當(dāng)然在制作這個功能過程中遇到很多問題，總結(jié)一下一般就以下幾個方面的問題：

跨域問題：如果你使用的二維碼接口返回的圖片是在不同的域名下，可能會存在跨域問題。你需要確保小程序的服務(wù)器配置允許跨域請求，或者使用合法的API 接口。

圖片加載：在繪制 Canvas 之前，你需要確保所有要使用的圖片都已經(jīng)加載完成。你可以使用 wx.getImageInfo方法獲取圖片信息，或者使用 wx.downloadFile 下載網(wǎng)絡(luò)圖片。確保在繪制 Canvas 之前所有圖片都已準(zhǔn)備就緒。

圖片路徑：當(dāng)繪制 Canvas時，你需要提供正確的圖片路徑。對于本地圖片，你可以使用相對路徑（相對于當(dāng)前小程序頁面）。對于接口返回的圖片，你需要獲取臨時文件路徑或下載到本地后再進(jìn)行繪制。

異步加載：從網(wǎng)絡(luò)加載圖片或獲取二維碼等操作是異步的，確保在圖片加載完成后再進(jìn)行繪制?？梢詫D片加載操作放在回調(diào)函數(shù)或 Promise中，確保繪制操作在圖片準(zhǔn)備好后執(zhí)行。

畫布大小：根據(jù)設(shè)計需求，確保 Canvas 的大小與海報設(shè)計一致。你可以使用 <canvas> 標(biāo)簽的 width 和 height屬性設(shè)置畫布大小，并在繪制時按比例計算坐標(biāo)。

坐標(biāo)計算：根據(jù)海報的設(shè)計，確保各個元素的坐標(biāo)正確。使用 ctx.drawImage 方法繪制圖片時，可以設(shè)置目標(biāo)位置和尺寸。使用ctx.fillText 方法繪制文字時，可以設(shè)置文本內(nèi)容、字體大小、對齊方式等。

異常處理：在獲取圖片信息、請求接口或保存圖片到相冊時，都有可能出現(xiàn)異常。請確保適當(dāng)處理這些異常，并給予用戶合適的提示。

用戶授權(quán)：保存圖片到相冊需要用戶的授權(quán)。你需要在小程序設(shè)置中添加相冊權(quán)限，并根據(jù)實(shí)際需求處理授權(quán)相關(guān)邏輯。

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

到了這里，關(guān)于微信小程序——二維碼推廣海報的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！