この記事では主に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 サイトの他の関連記事を参照してください。