Egret白鹭引擎开发微信小游戏之保存图片到相册

玩家在玩小游戏的过程中，很多时候想要保存一下当前的截图、或者保存游戏内精美的画面到相册，一方面是为了记录在游戏中的美好时刻，另一方面则是能够更好地和朋友们分享我在这游戏中获得的荣耀和快乐，因为我们就会在中开发把图片保存到相册的功能。

Egret白鹭引擎开发微信小游戏之保存图片到相册

1.微信小游戏保存图片到相册的几个关键API,详情可在微信官方文档中查阅。

wx.createCanvas() 创建一个画布对象。首次调用创建的是显示在屏幕上的画布，之后调用创建的都是离屏画布。

Canvas.getContext(string contextType, Object contextAttributes) 获取画布对象的绘图上下文

wx.createImage() 创建一个图片对象

Canvas.toTempFilePathSync(Object object) 将当前 Canvas 保存为一个临时文件。

wx.saveImageToPhotosAlbum(Object object) 保存图片到系统相册。

2.想要在Egret调用这些接口,首先要在Egret导出的小程序工程中的platform.js 中封装一下

createCanvas() {
	return wx.createCanvas();
}

createImage() {
    return wx.createImage();
}

saveImageToPhotosAlbum(tempFilePath) {
    wx.saveImageToPhotosAlbum({
      filePath: tempFilePath,
      success: function () {
        wx.showToast({
          title: '保存成功',
          icon: 'success'
        });
      },
      fail: function (e) {
        wx.showToast({
          title: '保存失败',
          icon: 'none'
        });
      }
    });
}

3.然后在Egret工程中添加Platform.ts 代码如下

declare interface Platform {
    saveImageToPhotosAlbum(tempFilePath): any;
    createCanvas(): any;
    createImage(): any;
}
class DebugPlatform implements Platform {
    saveImageToPhotosAlbum(tempFilePathimg) { }
    createCanvas() { }
    createImage() { }
}
if (!window.platform) {
    window.platform = new DebugPlatform();
}
declare let platform: Platform;
declare interface Window {
    platform: Platform
}

4.准备一下我们要保存到相册的图片。大家可以在代码中动态生成，也可以通过UI编辑器提前拼接好。笔者采取两者混合如下：

• 我们通过EUI以及EUI编辑器将要保存的图片编辑好。

• 其中包括静态的图片是一张大的背景。

• 还有就是根据关卡变化的关卡小图片picShare。

5.图片准备好之后，我们就要编写关键的代码。

//保存图片到相册
private saveImageToPhotosAlbum() {
	//先获取到预先准备好的资源
    var shares: eui.Image[] = [];
    for (var i = 0; i < this.shareGroup.$children.length; i++) {
        shares.push(this.shareGroup.$children[i] as eui.Image);
    }
    //创建一个画布
    var cv = platform.createCanvas();
    //画布大小固定成750*1334
    cv.width = 750;
    cv.height = 1334;
    //获取画布绘图的上下文
    var ctx = cv.getContext("2d");
    var counter = 0;
    var imgs = [];
    //循环把获取到的资源绘制到画布
    for (var i = 0; i < shares.length; i++) {
        var shareImg = shares[i] as eui.Image;
        //创建图片
        let img = platform.createImage();
        img.onload = () => {
            counter++;
            //图片的加载回调,当所有图片加载完成
            if (counter == shares.length) {
                for (var i = 0; i < imgs.length; i++) {
                    var x = shares[i].x;
                    var y = shares[i].y;
                    var pos = shares[i].parent.localToGlobal(x, y);
                    //绘制图片到画布上
                    ctx.drawImage(imgs[i], pos.x, pos.y, shares[i].width, shares[i].height);
                }
                //绘制文字到画布上
                ctx.font = '40px Microsoft YaHei';
                ctx.textAlign = 'center';
                ctx.fillText(this.cfg.Name, cv.width / 2, 570);
                //将画布导出到临时的文件
                let tempFilePath = cv.toTempFilePathSync();
                //把临时文件保存到相册
                platform.saveImageToPhotosAlbum(tempFilePath);
            }
        }
        //设置图片的资源路径
        var result = RES.config.getResourceWithSubkey(shareImg.source.toString());
        img.src = "resource/" + result.r.url;
        imgs.push(img);
    }
}

6.效果展示一

7.效果展示二

至此，Egret白鹭引擎开发微信小游戏之保存图片到相册的方法已经传递给到大家，大家可以尝试一下实现。期待您的关注、分享、收藏、点赞、在看五连。谢谢大家~