絵html2canvasで遭遇する問題を回しHTML

1.ピクチャークロスドメインの問題

画像内のキャンバスにHTMLでのアドレスに変換する場合canvas.toDataURL（「画像/ PNG」）

発生したエラー：

原点を「NULL」から「PNG」の画像へのアクセスは、CORSポリシーによってブロックされています：http、データ、クロム、クロムの拡張、HTTPS：クロスオリジン・リクエストは唯一のプロトコルスキームのためにサポートされています。

若しくは

原点から「www.baidu.com/GT/github/hotelAdmin/img/tempalte-top.png」「ヌル」での画像へのアクセスは、CORSポリシーによってブロックされています：http、データ：クロスオリジン・リクエストは唯一のプロトコルスキームのためにサポートされています。、クロム、クロムの拡張、HTTPS。

与えられた理由は、IMGのアドレスをエクスポートすることはできませんキャンバスを引き起こし、クロスドメイン汚染キャンバスの絵です

インターネット上の方法を見つけるために、

設定：

            useCORS：真、//（関連クロスドメインの画像）
            allowTaint：偽、//許可するクロスドメイン（クロスドメイン相関の写真

$（ '＃divの'）をクリックします（関数（）{。
        html2canvas（テンプレート、{ 
            onrendered：機能（キャンバス）{ 
              
                    exportCanvasAsPNG（キャンバス、 'invoice.png'）
              
            }、
            useCORS：trueに、//（ピクチャークロスドメイン相関）
            allowTaint：偽、//クロス（関連するクロスドメイン画像）許可
            X：0、
            Y：window.pageYOffset、
            windowWidth：document.body.scrollWidth、
            windowHeight：document.body.scrolHeight、
        }）; 
    }）

　　しかし、効果はなかったです

基本的な絵は、クロスドメインの問題を追いかけています

クロスドメインを解決する方法

1.設定要求ヘッダー

それが動作するかどうか、我々が得ることができないので、画像サーバ側を設定する必要が、これは、検証できないサーバは、それが通過しました

その上にクロスドメイン、その後、私は統一ドメイン名以来2、およびコードに直接書かれたファイルに、その後少しラジカル

画像は、ソースファイルオブジェクトブロブに移し、次いで及びURL.createObjectURLの）（次いで一緒にHTMLに、キャンバスに描画すると、利用可能なアドレスIMG srcを変換するための方法導出 toDataURLを画像に変わり、

どのように行います

映像ソースを取得します。1.

私が直接オンラインのbase64コードを回したので、私は、ダイナミックに関与しない、静止画がここに二つの絵を持っているオンラインBASE64を回します

2.クロスドメインの画像は、BLOBファイルオブジェクトに変身します

    //ファイルオブジェクトは、BASE64変換する
    機能dataURLtoFile（dataUrl、ファイル名）{ 
        ; VAR dataurl.split ARR =（ ''）
        VAR MIME ARR = [0] .match（？/：（*）を; /）[1。 ]; 
        VAR = BSTRのatoB（ARR [1]）; 
        VAR = N-bstr.length; 
        新しい新しいUint8Array u8arr VAR =（N-）; 
        一方（N--）{ 
            u8arr [N- = bstr.charCodeAt（N-）; 
        } 
        / /オブジェクトファイルに変換され、
        新たな新しいファイルを返す//（[u8arr]、ファイル名、{タイプ：MIME}）; 
        //ブロブに変換
        戻り、新たな新しいブロブ（[u8arr]、{タイプ：MIME}）; 
    }

3.のIMG SRCの画像アドレスの割り当てにブロブURL.createObjectURL（「ブロブ画像」）によってオブジェクト画像の変換

$（ 'トップのimg '）。attrの（' SRC'、URL.createObjectURL（imgfile））

4.キャンバスを描く、与えられた場合には、完全なキャンバスにできなくなり、全体のhtmlを再描画

html2canvas（テンプレート、{ 
            onrendered：機能（キャンバス）{ 
                  
                  VAR imgUrl canvas.toDataURL =（ "画像/ PNG"）、
この時間は、通常の方法toDataURLを行うことができる
                   画像導出@ 
                    exportCanvasAsPNG（キャンバス、 'invoice.pngを'）
              
            } 、
            useCORS：trueに、//（関連クロスドメインの画像）
            allowTaint：偽、//は、クロスドメイン（に関連するクロスドメインの画像を）許可
            X-：0、
            y軸：window.pageYOffset、
            windowWidth：document.body.scrollWidth、
            windowHeight：ドキュメント。 body.scrolHeight、
        }）。

　　明日は、書き込みを続けます

絵html2canvasで遭遇する問題を回しHTML

おすすめ