小花仙 通过远程Chrome远程调试来高清截图

淘米更新了登陆界面，这导致部分第三方登录器无法正常登录。先临时使用这里的远程调试的方法来高清截图。但是这里的远程调试也需要调整一下才能进行。下文已经更新为新的操作方法。

---

鄙人一直在竭力简化小花仙高清截图的操作步骤。这次再来尝试使用原生的Chrome远程调试来操作CDP的指令。
参考之前的文章python selenium chrome 控制devtools 一些线索将一个可以使用Flash的浏览器添加一个启动参数--remote-debugging-port=9222，然后访问http://hua.61.com/play.shtml，设置站点权限的Flash为允许（点击地址栏左侧的锁头图标或者“不安全”，选择网站设置，将Flash改为允许），登录账号，然后打开要截图的玩家面板。
再开一个浏览器，访问http://localhost:9222，按F12打开开发者工具，切换到Console。粘贴下列代码，按照注释修改开头的那几个参数并回车（这里写的参数是截图玩家面板的形象，如果是截取这个形象的就可以不用修改直接回车）。稍等片刻即可从第二个打开的浏览器看到下载文件的提示。

var shotWidth = 4320; // 截图宽
var shotHeight = 7680; // 截图高
var scale = 20; // 100除以缩放倍率的商，例如缩放5.0倍就是100/5.0=20
var panX = -4500; // Flash缩放后的移动视野X
var panY = -2000; // Flash缩放后的移动视野Y

function downloadFile(fileName, content) { //下载base64图片
    var base64ToBlob = function(code) {
        let raw = window.atob(code);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for(let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
            type: "image/png"
        });
    };
    let aLink = document.createElement('a');
    let blob = base64ToBlob(content); //new Blob([content]);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.click();
};

var fileBase64 = "";

let sleep = (time) => {
    return new Promise(resolve => setTimeout(resolve, time))
}

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        let responseJSON = JSON.parse(xmlhttp.responseText);
        let wsURL = "";
        for (var x in responseJSON) {
            if (responseJSON[x].url.lastIndexOf("http://hua.61.com/play.shtml") != -1) {
                wsURL = responseJSON[x].webSocketDebuggerUrl;
            }
        }


        let ws = new WebSocket(wsURL);

        ws.onopen = async function (d) {
            console.log('chrome remote debugger connected');
            
            ws.send(`{"id": 1, "method": "Emulation.clearDeviceMetricsOverride", "params": {}}`);
            ws.send(`{"id": 1, "method": "Emulation.setDeviceMetricsOverride", "params": {"mobile":false, "width":` + shotWidth + `, "height":` + shotHeight + `, "deviceScaleFactor": 1}}`);
            ws.send(`{"id": 1, "method": "Page.navigate", "params": {"url": "javascript:document.getElementsByTagName('embed')[0].Zoom(500);"}}`);
            await sleep(2000);
            ws.send(`{"id": 1, "method": "Page.navigate", "params": {"url": "javascript:document.getElementsByTagName('embed')[0].Zoom(` + scale + `);"}}`);
            await sleep(5000);
            console.log("flash zoomed");
            ws.send(`{"id": 1, "method": "Page.navigate", "params": {"url": "javascript:document.getElementsByTagName('embed')[0].Pan(` + panX + `,` + panY + `,0);"}}`);
            await sleep(5000);
            console.log("flash view moved");
            await sleep(5000);
            ws.send(`{"id": 155, "method": "Page.captureScreenshot", "params": {"fromSurface":true}}`);
            await sleep(5000);
            ws.send(`{"id": 1, "method": "Emulation.clearDeviceMetricsOverride", "params": {}}`);
            console.log("cleared emulation");
            ws.send(`{"id": 1, "method": "Page.navigate", "params": {"url": "javascript:document.getElementsByTagName('embed')[0].Zoom(500);"}}`);
            console.log("flash zoom reset");

        }

        ws.onmessage = function(d) {
            if (JSON.parse(d.data)['id'] == '155') {
                console.log('screenshot captured');
                console.log('png base64 length: ' + JSON.parse(d.data)['result']['data'].length);
                fileBase64 = JSON.parse(d.data)['result']['data'];
                downloadFile('output.png', fileBase64);
            }
        }
    }
}
xmlhttp.open("GET","http://localhost:9222/json",true);
xmlhttp.send();

参考资料：http://fex.baidu.com/blog/2014/06/remote-debugging-protocol/