[微信小程序] 製作分享海報

利用大首圖、小程序碼，以及取到的資訊，透過 Canvas 合併成一張圖。絕大部分參考此篇：小程序分享模块超级详解 (By 你猜我叫啥)，真的超級詳解，收穫良多。本篇只簡單描述幾個重要步驟。

canvas.drawImage()

MDN: CanvasRenderingContext2D.drawImage()

給定一張圖片後，可以將圖片讀進來繪製在 canvas 上。

base64 轉圖片

小程序碼生成 API 會給回傳 base64 資料，需要將其轉換為 image 之後，再透過上述方式將其繪製在畫布上。

首先分析 base64 資料，利用 wx.base64ToArrayBuffer() 做一次轉換，再透過小程序的文件管理器 wx.getFileSystemManager()及 writeFile 方法，將 base64 圖片轉存在本地文件夾 (wx.env.USER_DATA_PATH) 中。

參考以下程式碼，來源：小程序分享模块超级详解 (By 你猜我叫啥)。

/* --
作者：你猜我叫啥
链接：https://juejin.im/post/5ca9b058e51d452b0f3346d0
来源：掘金
-- */
var handleBase64Img = function() {
    //wx.getFileSystemManager 小程序文件管理器
    var fsm = wx.getFileSystemManager();
    var FILE_NAME = 'base64src';
    var base64src = function(base64data) {
        return new Promise((resolve, reject) => {
            //解析base64，提取出图片类型: imgtype,解析内容bodyData（去掉data:image/png;base64,以后的内容）
            var [, imgType, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
            if (!imgType) {
                reject(new Error('ERROR_BASE64SRC_PARSE'));
            }
            /**
             *wx.env.USER_DATA_PATH
             *本地用户文件
             *本地用户文件是从 1.7.0 版本开始新增的概念。提供了一个用户文件目录给开发者，开发者对这个目录有完全自由的读写权限。通过 wx.env.USER_DATA_PATH 可以获取到这个目录的路径。
             */
            var filePath = `${wx.env.USER_DATA_PATH}/${FILE_NAME}.${imgType}`;
            //按指定写入文件的字符编码encoding，向地址filepath，写入数据data。
            fsm.writeFile({
                filePath,
                data: bodyData,
                encoding: 'base64',
                success() {
                    resolve(filePath);
                },
                fail() {
                    reject(new Error('ERROR_BASE64SRC_WRITE'));
                },
            });
        });
    };
    return base64src;
}
var base64src = that.handleBase64Img();
var handleBase64src = base64src(base64data);
handleBase64src.then(res => {
    //res 即为base64 转化为图片后的本地路径，即可在画布上绘制成功
    that.ctx.drawImage(res, left, top, width, height);
});

保存到相簿中

要讓使用者下載圖片，必須先有訪問相簿的權限。透過 wx.getSetting() 方法取得授權資料，取得之後再透過 wx.saveImageToPhotosAlbum() 及本地暫時生成的 Url 將圖片存下來。

小坑：Canvas 如何隱藏

繪製的時候，因為不希望 Canvas 影響到畫面，因此會將它藏起來，但不可以使用 display: none，會抓不到元素，一個解法如下：

// wxml
<view class="container>
  <canvas canvas-id='my-canvas'></canvas>
<view>
// css
.container {
  width: 0px;
  height: 0px;
  overflow: hidden;
}