评论

【微信小游戏】截图功能

微信小游戏如何截图保存到手机

废话不多说,开始

1.得到当前界面canvas。因为笔者用laya开发,所以介绍在laya中得到当前界面canvas的方法。

var canvas = Laya.stage.drawToCanvas(Laya.stage.width, Laya.stage.height, 0, 0).getCanvas();

2.调用toTempFilePathSync方法将当前 Canvas 保存为一个临时文件。

var tempFilePath = canvas.toTempFilePathSync({
	x: 0,
	y: 0,
	width: 100,
	height: 100,
	destWidth: 100,
	destHeight: 100,
	fileType: 'jpg',
	quality: 1.0
});

参数详情可通过toTempFilePathSync了解。

3.此时,tempFilePath已经相当于一个图片链接(tips 若需分享,可以tempFilePath直接当做图片链接调用分享接口即可)。通过wx.authorize向用户发起保存图片授权。如果已经授权直接返回成功。

wx.authorize({
	scope: 'scope.writePhotosAlbum',//这里表示相册权限
	success: function (res) {
		//如果有授权过会直接返回成功,我们在这里就可以直接	调用保存图片的接口
		Browser.window.wx.saveImageToPhotosAlbum({
			filePath: tempFilePath,
			success: function (res): void {
				Browser.window.wx.showToast({
					title: "截图已保存至相册,快快分享到朋友圈吧",
					icon: "none",
					image: "",
					duration: 1500
				})
			},
			fail: function (): void {
			}
		});
	},
	fail: function () {
		//没有授权过,我们调用showModal弹出弹窗,告诉用户请求给予我们授权。
		var alertParam = {
			'title': '微信授权',
			'content': '保存到相册需要您的授权,请给予我们授权',
			'showCancel': true,
			'canelColor': '#666',
			'confirmText': '去授权',
			'confirmColor': '#666',
			success: function (ssa) {
				//打开设置界面,设置界面只会出现小程序已经向用户请求过的权限。我们请求过保存图片的权限,所以里面会有相册的按钮,允许后点返回。则执行下面的success方法。调用保存图片的接口
				if (ssa.confirm == true) {
					wx.openSetting({
						success: function () {
							Browser.window.wx.saveImageToPhotosAlbum({
								filePath: tempFilePath,
								success: function (res): void {
									Browser.window.wx.showToast({
										title: "截图已保存至相册,快快分享到朋友圈吧",
										icon: "none",
										image: "",
										duration: 1500
									})
								},
								fail: function (): void {
								}
							});
						}
					})
				}
			}
		};
		//这里调用弹窗。
		wx.showModal(alertParam);
	}
})
最后一次编辑于  2019-02-25  
点赞 1
收藏
评论

7 个评论

  • 2019-11-07

    很想请问下为什么我截图出来特别糊鸭,然后保存后就跟加糊了,头大。求大神帮助~~~

    2019-11-07
    赞同 2
    回复
  • 赫尔辛根默斯肯
    赫尔辛根默斯肯
    2020-05-20

    冲你这句 “废话不多说” 点赞了→_→

    2020-05-20
    赞同
    回复
  • jakie
    jakie
    2020-04-20

    楼主,调用你的代码在laya中调试,getCanvas()方法报错,有遇到这种情况么?

    2020-04-20
    赞同
    回复
  • 未冷冰
    未冷冰
    2020-01-10

    我这边使用drawToCanvas 一直会报错 ImageData is not defined 你们有没有这种情况


    2020-01-10
    赞同
    回复 1
    • 虚幻
      虚幻
      2020-06-05
      解决了么
      2020-06-05
      回复
  • Stephen
    Stephen
    2019-02-24

    改下标题,这不叫截屏,会误导别人

    2019-02-24
    赞同
    回复 1
    • Sugar
      Sugar
      2023-10-30
      这个确实是截屏啊,我用楼主的方法在C#里面已经实现了。
      2023-10-30
      回复
  • 小程序技术专员-villainhr
    小程序技术专员-villainhr
    2019-02-21

    比文档,妥帖写。不过就是代码 格式有 修修 乱,

    2019-02-21
    赞同
    回复 1
    • 2019-02-22

      已修改格式。

      2019-02-22
      回复
  • 保卫科有人念我锦旗
    保卫科有人念我锦旗
    2019-02-21

    感谢分享!!

    2019-02-21
    赞同
    回复
登录 后发表内容