微信小游戏保存自定义分享图到相册实例

save-album.png

一、实例操作

自定义绘制纹理文本，借助画布以图片形式保存至玩家相册，常用于制作游戏分享图。

1. 创建画布

let cv = wx.createCanvas();
let ctx = cv.getContext("2d");

2. 绘制自定义纹理

实例中包含一张背景图（来自官方打飞机样例素材）和两行文本。

let doDraw = () => 
{
    let img = wx.createImage();
    img.crossOrigin = "anonymous";
    //-- 图片加载完成事件（只有加载完成才能转换）
    img.onload = () => 
    {   
        //-- 绘制背景
        img.onload = null;
        ctx.width = img.width;
        ctx.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);

        //-- 绘制文本
        ctx.font = "40px bold 黑体";
        ctx.fillStyle = "#FFF";
        ctx.textAlign = "center";
        ctx.fillText("Hello World!", cv.width / 2, cv.height / 3);
        ctx.fillText("By Pury", cv.width * 3 / 4, cv.height * 2 / 3);
        doAlert();
    }

    img.src = "images/bg.jpg";
};

3. 保存到相册

调用wx.saveImageToPhotosAlbum前需要用户授权 scope.writePhotosAlbum

let doSave = () => 
{
    //-- 保存临时路径
    let tempFilePath = cv.toTempFilePathSync();
    //-- 保存到相册
    wx.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: function () {
            wx.showToast({
                title: '保存成功',
                icon: 'success'
            });
        },
        fail: function (e) {
            wx.showToast({
                title: '保存失败',
                icon: 'none'
            });
        }
    });
};

二 、[toTempFilePathSync]使用问题

wx.saveImageToPhotosAlbum传入参数filePath的格式必须如下图，http开头：

errorMsg1.png

如果使用游戏引擎（egret、laya等）进行开发，默认会创建一个canvas，直接用canvas.toTempFilePathSync方式进行保存临时文件，返回结果tempFilePath可能与预期不符，这种格式能用于分享（已测试可行），简单可理解为仅用于微信环境内部流通，无法外流，例如不能保存到相册等。

errorMsg2.png

解决方法：新建一个临时画布，然后绘制保存即可。

另外，由于微信官方限制，egret的toDataURL已无法使用，base64方式走不通，如此只能用原生方法drawImage来绘制图片。

Github地址：
https://github.com/pury/wxgame-demos/tree/master/save-picture-to-album

By Pury.