ネットワーク画像転送base 64フォーマット

1523 ワード

ここ数ヶ月の微信生態の下での普及・新活動では、毎回宣伝ポスターとユーザー属性のあるQRコードを組み合わせて個性的なポスターを生成し、微信で伝播するために使用されている.
重要な点はcanvasですtoDataURLのドメイン間問題は、ドメイン間の解決策が多い.ネットワーク上で与える大部分の方式は、画像を提供するサーバに制御ヘッダAccess-Control-Allow-Originを追加してワイルドカードを構成することであり、もう一つの方法はimgである.crossOrigin = 'anonymous'. では、今解決しなければならないのは、画像をbase 64に変換する方法ですか?
以前のパートナーの方法は、ポスターをbase 64形式に手動で変換し、jsファイルにコードを参照することでした.このようにするメリットはプログラム変換の過程を省くことですが、欠点は、比較的多いです.
  • 手動で生成され、プロセスが複雑(ポスターを置き換えてからbase 64に手動で変換し、オンラインになってから対応するjsファイルを維持する必要がある)
  • このようなハードコーディングの方式は
  • を拡張しにくい.
  • jsファイル
  • を複数メンテナンスする必要がある
    ポスターをオンラインに置いてから、この画像の絶対アドレスを手に入れてcanvasを使うことができます.toDataURL('image/jpeg')はcanvas内部に描画画像をbase 64に変換する.
    //       base64   
    function getBase64(url, ext, callback) {
        var canvas = document.createElement("canvas");   //  canvas DOM  
        var ctx = canvas.getContext("2d");
        var img = new Image;
        img.crossOrigin = 'Anonymous';
        img.src = url;
        img.onload = function () {
            canvas.width = img.width; //       ,   
            canvas.height = img.height; //       ,   
            ctx.drawImage(img, 0, 0, img.width, img.height); //      
            var dataURL = canvas.toDataURL("image/" + ext);
            callback.call(this, dataURL); //      Base64  
            canvas = null;
        };
    }
    

    呼び出しが必要な場所では
    //      
    var imgUrl = 'http://www.xxx.com/aaa.png';
    getBase64(imgUrl, 'png', function(base64){
        //    img   src    
        img.src = base64;
    })