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

小云云
リリース: 2018-01-13 09:04:52
オリジナル
6268 人が閲覧しました

この記事では主に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 の絶対パスと相対パスの使用方法


dirname(__FILE__ の使用方法) ) phpで現在のファイルの絶対パスを取得します


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


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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!