이 스크립트를 사용하면 다양한 서버, 포트 및 프로토콜(http, https)과 함께 html2canvas.js를 사용하여 이미지용 <canvas>
를 내보낼 때 "오염"이 발생하는 것을 방지할 수 있습니다.
ASP Classic을 사용하지 않지만 프록시와 함께 작동하는 html2canvas가 필요합니다. 다른 프록시를 참조하세요.
<canvas>
의 다른 도메인에 속한 이미지를 추가한 후 새 이미지에 대해 캔버스를 내보내려고 하면 보안 오류가 발생하고(실제로는 보안 잠금이 발생함) 오류가 반환될 수 있습니다.
SecurityError: DOM 예외 18
오류: 사용자 에이전트의 보안 정책을 돌파하려는 시도가 있었습니다.
업데이트를 추적하려면 나를 팔로우하거나 내 저장소에 "별표 표시"를 해주세요.
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " >
< title > html2canvas asp (vbscript) 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 Warings)
"proxy" : "html2canvasproxy.asp" ,
"onrendered" : function ( canvas ) {
var img = new Image ( ) ;
img . onload = function ( ) {
document . body . appendChild ( img ) ;
} ;
img . error = function ( ) {
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 >
< p >
< img alt =" facebook image redirect " src =" https://graph.facebook.com/1415773021975267/picture " >
</ p >
</ body >
</ html >
스크립트에 문제가 있는 경우 브라우저에서 웹 콘솔을 사용하여 로그를 분석하는 것이 좋습니다.
네트워크 결과 얻기:
대안은 링크에 직접 액세스하는 문제를 진단하는 것입니다.
http://[DOMAIN]/[PATH]/html2canvasproxy.php?url=http%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fstaticmap%3Fcenter%3D40.714728%2C-73.998672%26zoom%3D12%26size%3D800x600%26maptype%3Droadmap%26sensor%3Dfalse%261&callback=html2canvas_0
[DOMAIN]
도메인(예: 127.0.0.1)으로 바꾸고 [PATH]
프로젝트 폴더(예: project-1/test)로 바꿉니다.
http://localhost/project-1/test/html2canvasproxy.php?url=http%3A%2F%2Fmaps.googleapis.com%2Fmaps%2Fapi%2Fstaticmap%3Fcenter%3D40.714728%2C-73.998672%26zoom%3D12%26size%3D800x600%26maptype%3Droadmap%26sensor%3Dfalse%261&callback=html2canvas_0