鄙人一直在竭力简化小花仙高清截图的操作步骤。这次再来尝试使用原生的Chrome远程调试来操作CDP的指令。
参考之前的文章python selenium chrome 控制devtools 一些线索将一个可以使用Flash的浏览器添加一个启动参数--remote-debugging-port=9222，然后访问/Client.swf，登录账号，然后打开要截图的玩家面板。
再开一个浏览器，访问http://localhost:9222，按F12打开开发者工具，切换到Console。粘贴下列代码，按照注释修改开头的那几个参数并回车（这里写的参数是截图玩家面板的形象，如果是截取这个形象的就可以不用修改直接回车）。稍等片刻即可从第二个打开的浏览器看到下载文件的提示。
var shotWidth = 4320; // 截图宽var shotHeight = 7680; // 截图高var scale = 20; // 100除以缩放倍率的商，例如缩放5.0倍就是100/5.0=20var panX = -4500; // Flash缩放后的移动视野Xvar panY = -2000; // Flash缩放后的移动视野Yfunction 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("/Client.swf") != -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();
参考资料：/blog//06/remote-debugging-protocol/
如果觉得《小花仙 通过远程Chrome远程调试来高清截图》对你有帮助，请点赞、收藏，并留下你的观点哦！
