このスクリプトを使用すると、html2canvas.js をさまざまなサーバー、ポート、プロトコル (http、https) で使用できるようになり、画像の<canvas>
エクスポートするときに「汚染」が発生するのを防ぐことができます。
ASP Classic は使用しませんが、プロキシと連携する html2canvas が必要です。他のプロキシを参照してください。
<canvas>
内の別のドメインに属する画像を追加し、その後新しい画像のキャンバスをエクスポートしようとすると、セキュリティ エラーが発生し (実際に発生するのはセキュリティ ロックです)、次のエラーが返されることがあります。
セキュリティエラー: 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 >
スクリプトに問題がある場合は、ブラウザから Web コンソールを使用してログを分析することをお勧めします。
ネットワーク結果を取得します。
別の方法は、リンクに直接アクセスする際の問題を診断することです。
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