ネットワーク画像転送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に変換する.
呼び出しが必要な場所では
重要な点はcanvasですtoDataURLのドメイン間問題は、ドメイン間の解決策が多い.ネットワーク上で与える大部分の方式は、画像を提供するサーバに制御ヘッダAccess-Control-Allow-Originを追加してワイルドカードを構成することであり、もう一つの方法はimgである.crossOrigin = 'anonymous'. では、今解決しなければならないのは、画像をbase 64に変換する方法ですか?
以前のパートナーの方法は、ポスターをbase 64形式に手動で変換し、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;
})