Javascript 웹 페이지의 스크린샷을 함께 찍는 방법 알아보기
- coldplay.xixi앞으로
- 2020-06-19 16:59:552179검색
캔버스 그래픽을 그림으로 변환하는 방법과 캔버스 이미지를 다운로드하는 방법은 모두 이 플러그인에 대한 기술적인 준비 사항입니다.
기술적인 경로는 매우 명확합니다. 웹 페이지의 특정 영역의 콘텐츠에서 이미지를 생성하고 캔버스에 저장한 다음 캔버스 콘텐츠를 이미지로 변환하고 로컬에 저장한 다음 최종적으로 Weibo에 업로드합니다. .
인터넷에서 검색한 결과 지정된 웹 요소의 콘텐츠에서 캔버스 이미지를 생성할 수 있는 자바스크립트 도구인 html2canvas를 찾았습니다. 이 js 도구의 사용법은 매우 간단합니다. js 파일을 페이지에 삽입한 다음 html2canvas() 함수를 호출하면 됩니다. html2canvas()函数：
html2canvas(document.body, {
onrendered: function(canvas) {
/* canvas is the actual canvas element,
to append it to the page call for example
document.body.appendChild( canvas );
*/
}
});这个html2canvas()函数有个参数，上面的例子里传入的参数是document.body，这会截取整个页面的图像。如果你想只截取一个区域，比如对某个p或某个table截图，你就将这个p或某个table当做参数传进去。
我最终并没有选用html2canvas这个js工具，因为在我的实验过程中发现它有几个问题。
首先，跨域问题。我举个例子说明这个问题，比如我的网页网址是http://www.webhek.com/about/，而我在这个页面上有个张图片，这个图片并不是来自www.webhek.com域，而是来自CDN图片服务器www.webhek-cdn.com/images/about.jpg，那么，这张图片就和这个网页不是同域，那么html2canvas就无法对这种图片进行截图，如果你的网站的所有图片都放在单独的图片服务器上，那么用html2canvas对整个网页进行截图是就会发现所有图片的地方都是空白。
这个问题也有补救的方法，就是用代理：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html2canvas php proxy</title>
<script src="html2canvas.js"></script>
<script>
//<![CDATA[
(function() {
window.onload = function(){
html2canvas(document.body, {
"logging": true, //Enable log (use Web Console for get Errors and Warnings)
"proxy":"html2canvasproxy.php",
"onrendered": function(canvas) {
var img = new Image();
img.onload = function() {
img.onload = null;
document.body.appendChild(img);
};
img.onerror = function() {
img.onerror = null;
if(window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
} else {
alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
}
});
};
})();
//]]>
</script>
</head>
<body>
<p>
<img alt="google maps static" src="http://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=12&size=800x600&maptype=roadmap&sensor=false">
</p>
</body>
</html>这个方法只能用在你自己的服务器里，如果是对别人的网页截图，还是不行。
试验的过程中还发现用html2canvas截屏出来的图像有时会出现文字重叠的现象。我估计是因为html2canvas在解析页面内容、处理css时不是很完美的原因。
最后，我在火狐浏览器的官方网站上找到了drawWindow()这个方法，这个方法和上面提到html2canvas不同之处在于，它不分析页面元素，它只针对区域，也就是说，它接受的参数是四个数字标志的区域，不论这个区域中什么地方，有没有页面内容。
void drawWindow( in nsIDOMWindow window, in float x, in float y, in float w, in float h, in DOMString bgColor, in unsigned long flags [optional] );
这个原生的JavaScript方法看起来非常的完美，正是我需要的，但这个方法不能使用在普通网页中，因为火狐官方发现这个方法会引起有安全漏洞，在这个bug修复之前，只有具有“Chrome privileges”的代码才能使用这个drawWindow()
var window = require('window/utils').getMostRecentBrowserWindow();
var tab = require('tabs/utils').getActiveTab(window);
var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
thumbnail.mozOpaque = true;
window = tab.linkedBrowser.contentWindow;
thumbnail.width = Math.ceil(window.screen.availWidth / 5.75);
var aspectRatio = 0.5625; // 16:9
thumbnail.height = Math.round(thumbnail.width * aspectRatio);
var ctx = thumbnail.getContext("2d");
var snippetWidth = window.innerWidth * .6;
var scale = thumbnail.width / snippetWidth;
ctx.scale(scale, scale);
ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth * aspectRatio, "rgb(255,255,255)");
// thumbnail now represents a thumbnail of the tab이 html2canvas() code> 함수 위의 예에서 전달된 매개변수는 <code>document.body이며, 전체 페이지의 이미지를 캡처합니다. p 또는 테이블 등 한 영역만 캡처하려면 이 p 또는 >테이블을 캡처하면 됩니다. 가 매개변수로 전달됩니다. 저는 실험 중에 몇 가지 문제점을 발견했기 때문에 js 도구인 html2canvas를 결국 선택하지 않았습니다. 우선 도메인 간 문제입니다. 이 문제를 설명하기 위해 예를 들어 보겠습니다. 예를 들어 내 웹페이지 URL은 http://www.webhek.com/about/이고 이 페이지에 있는 사진은 www.webhek에서 가져온 것이 아닙니다. com 도메인입니다. CDN 이미지 서버 www.webhek-cdn.com/images/about.jpg에서 가져온 이미지입니다. 그러면 이 이미지는 이 웹페이지와 동일한 도메인에 있지 않으므로 html2canvas는 이러한 종류의 이미지를 캡처할 수 없습니다. 웹사이트 전체 이미지는 별도의 이미지 서버에 배치됩니다. html2canvas를 사용하여 전체 웹페이지의 스크린샷을 찍으면 모든 이미지가 비어 있음을 알 수 있습니다. 이 문제에 대한 해결책도 있습니다. 즉, 프록시를 사용하는 것입니다. rrreee
이 방법은 자신의 서버에서만 사용할 수 있습니다. 다른 사람의 웹페이지 스크린샷을 찍는 경우에는 여전히 작동하지 않습니다. 🎜🎜실험 중에 html2canvas를 사용하여 캡처한 이미지에 가끔 텍스트가 겹치는 현상도 발견되었습니다. 페이지 내용을 파싱하고 CSS를 처리할 때 html2canvas가 완벽하지 않기 때문인 것 같아요. 🎜🎜드디어 Firefox 공식 웹사이트에서drawWindow() 메서드를 찾았습니다. 위에서 언급한 html2canvas와 이 메서드의 차이점은 페이지 요소를 분석하지 않고 지역만 대상으로 한다는 점입니다. 즉, 허용되는 매개변수는 이 영역에 페이지 콘텐츠가 있는지 여부에 관계없이 4개의 숫자로 표시된 영역입니다. 🎜rrreee🎜이 기본 JavaScript 방법은 완벽해 보이고 꼭 필요한 것입니다. 그러나 이 방법은 Firefox에서 공식적으로 이 방법이 보안 허점을 발생시킨다는 것을 발견했기 때문에 이 방법은 코드만 있는 경우에만 사용할 수 있습니다. "Chrome 권한"이 있으면 이 drawWindow() 함수를 사용할 수 있습니다. 🎜🎜큰 제한이 있지만, 제가 개발한 Firefox 애드온 플러그인에서는 main.js가 "Chrome 권한"이 있는 코드입니다. 인터넷에서 Firefox 플러그인 SDK와 함께 제공되는 코드 샘플을 찾았습니다. 🎜rrreee🎜 이 코드는 매우 명확하게 작성되어 있으므로 필요에 따라 이를 기반으로 약간만 수정하면 됩니다. 🎜🎜추천 튜토리얼: "🎜javascript 비디오 튜토리얼🎜"🎜위 내용은 Javascript 웹 페이지의 스크린샷을 함께 찍는 방법 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!