Egret社区

egret如何实现截图功能

2014-9-27 10:37
616513
1银子
如题,请教各位网友,官方团队,版主。
egre如何实现屏幕截图功能?例如:游戏结束时想截图分享至微博或者保存到本地。求指教!

最佳答案

查看完整内容

[mw_shl_code=javascript,true] private drawImage(x:number, y:number, w:number, h:number):any { var canvas:any = document.getElementById(egret.StageDelegate.canvas_name); var ctx = canvas.getContext("2d"); var data = ctx.getImageData(x, y, w, h); var newCan = document.createElement("canvas"); newCan.width = w; newCan.height = h; ctx = newCan. ...
分享到 :
7 人收藏

13 个回复

倒序浏览
BOREY  初学乍练 | 2014-9-27 10:37:52
本帖最后由 BOREY 于 2014-9-28 10:46 编辑

[mw_shl_code=javascript,true]   private drawImage(x:number, y:number, w:number, h:number):any {
        var canvas:any = document.getElementById(egret.StageDelegate.canvas_name);
        var ctx = canvas.getContext("2d");
        var data = ctx.getImageData(x, y, w, h);
        var newCan = document.createElement("canvas");
        newCan.width = w;
        newCan.height = h;
        ctx = newCan.getContext("2d");
        ctx.putImageData(data, 0, 0, 0, 0, w, h);
        var b64 = newCan.toDataURL();
        return b64;
    }[/mw_shl_code]
原理是截取本来的canvas的一个范围,存放进一个新的canvas里面,再获取新canvas里面的base64
ztxxxx  登堂入室 | 2014-9-27 10:44:43
换句话问,可以像AS3那样截图吗?
BOREY  初学乍练 | 2014-9-27 10:47:48
我也在找这功能
@Juvenile  登堂入室 | 2014-9-27 11:56:29
同求,哪位高手来解决呢
kadio4  登堂入室 | 2014-9-27 19:46:25
本帖最后由 kadio4 于 2014-9-27 19:48 编辑

我也在找。chrome下可以这么做:
[mw_shl_code=javascript,true]<a href="图片的地址" download="xx.png">保存</a>[/mw_shl_code]地址可以这么生成:
[mw_shl_code=javascript,true]canvas.toDataURL("image/png")[/mw_shl_code]
但是safari下不支持,也就是说手机上大部分都不行了,崩溃。
孤独之潜行者  登堂入室 | 2014-9-28 10:11:47
本帖最后由 孤独之潜行者 于 2014-9-28 10:13 编辑

分享一下我的方案:
1、canvas.toDataURL("image/png"); 得到base64后的一个串
2、将这个串上传到服务器出解码,并以二进制形式写入png文件,并返回地址3、客户端回调得到地址

来源:https://gist.github.com/xjamundx/845345#file-canvas-upload-php
服务端php参考代码:[mw_shl_code=php,true]<?php
        // requires php5
        define('UPLOAD_DIR', 'images/');
        $img = $_POST['img'];
        $img = str_replace('data:image/png;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $file = UPLOAD_DIR . uniqid() . '.png';
        $success = file_put_contents($file, $data);
        print $success ? $file : 'Unable to save the file.';
?>[/mw_shl_code]
服务器端java参考代码:
[mw_shl_code=java,true]image = image.replace("data:image/"+type+";base64,", "");
                image = image.replace(' ', '+');
                try {
                        byte[] imgByte = Base64.decode(image);
                        File file=new File(imagePath);   
                        if(!file .exists()){
                                file.mkdir();
                        }
                        
                        String imageName = ImageIndex + "."+type+"";
                        String path = imagePath + "\\" + imageName;
                        FileOutputStream fos = new FileOutputStream(path);  
                        ImageIndex++;
                fos.write(imgByte);  
                fos.close();
                return imageName;
                } catch (Exception e) {
                        e.printStackTrace();
                }[/mw_shl_code]
缺点:
1、安卓2.3以下系统不支持toDataURL。。。经实际测试发现这个比例不算低。
2、保存的png(480*800)文件大小约为400K左右,手机端测试发现耗流量并且上传并且回调需要10几秒(3g网络)

根据缺点2修改:
canvas.toDataURL("image/jpeg",quality );
第二个参数为质量,0~1
经测试quality质量为0.5,文件大小约为40K,而且效果还可以接受,看起来是个不错的方案

。。。但是,安卓又出现了问题,4.2以下系统不支持jpeg格式。。

WTF。。。


ztxxxx  登堂入室 | 2014-9-28 10:51:34
kadio4 发表于 2014-9-27 19:46
我也在找。chrome下可以这么做:
地址可以这么生成:
[mw ...

请看最佳答案!
ztxxxx  登堂入室 | 2014-9-28 10:51:57
孤独之潜行者 发表于 2014-9-28 10:11
分享一下我的方案:
1、canvas.toDataURL("image/png"); 得到base64后的一个串
2、将这个串上传到服务器出 ...

有网友贴出了方法,请看最佳答案!
kadio4  登堂入室 | 2014-9-28 11:26:13
ztxxxx 发表于 2014-9-28 10:51
请看最佳答案!

服务器配合倒是可以。
上传下载都是流量,点完上传还得点下载,操作需两步。还是期待Webkit内核的浏览器支持吧。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部