JavaScript は画像の絶対パスを Base64 エンコーディングに変換します

この記事では主にJavaScriptを使って画像の絶対パスをbase64エンコーディングに変換する方法を紹介していますが、とても良いと思うので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

canvas.toDataURL メソッドを使用して、画像の絶対パスを Base64 エンコードに変換できます。ここでは、次のように Taobao ホームページ上の画像を参照します。

コードは次のとおりです。コードは次のとおりです:

var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";

chromeの実行は次のとおりです:

検索すると、淘宝サーバー上の画像を使用し、ローカルサーバーの下でアクセスしていることがわかります。これまでのところ、写真にはクロスドメインの問題があります。上記のクロスドメインの問題は、写真をローカル サーバーに配置することで解決できます。たとえば、写真をローカル サーバーの下に保存します。サーバー; 次のコードで問題を解決できます:

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = canvas.toDataURL("image/"+ext);
    return dataURL;
}
var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
var image = new Image();
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
}

しかし、時には他のサーバーを参照したい場合があります。次のコードを使用すると、Chrome および Firefox で有効になりますが、現在 Safari 6 ではサポートされていないようです。上記のコードは Chrome と Firefox で動作しますが、テスト後は有効ですが、現在 Safari ではサポートされていません

html の絶対パスと相対パスの使用方法

相対パスと絶対パスの違いを詳しく説明します

以上がJavaScript は画像の絶対パスを Base64 エンコーディングに変換しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。