JS での Base64 と画像間の変換の簡単な分析 (コード付き)-jsチュートリアル-php.cn

JS での Base64 と画像間の変換の簡単な分析 (コード付き)

奋力向前

リリース： 2021-09-01 17:14:31

転載

4146 人が閲覧しました

前回の記事「解析用mysqlのインストールと使い方(集)」では、mysqlのインストールと使い方について学びました。 Base64とJSの画像との相互変換については以下の記事が分かりやすく、参考になると思いますので、困っている方は参考にしていただければ幸いです。

JS での Base64 と画像間の変換の簡単な分析 (コード付き)

今日、apicloud を使用して APP を作成していたときに、base64 転送イメージに遭遇し、それを表示しました現在のページの問題に直接関係しています。以前に「trans」モジュールを使用したことがあり、このモジュールが画像を base64 形式

# に相互変換できることを知っているからです。

trans モジュールをインストールしましたが、後で変換された画像のパスが取得できないことがわかりました。trans モジュールを保存するには、次を使用しますfs:// または、画像をシステムアルバムに保存することを選択できます。

申し訳ありませんが、私の知識が限られており、

fs を取得する方法がわかりません。 // パス。ユーザーが手動でアルバムに移動して写真を選択するのは面倒すぎるでしょう。

そこで、

img タグは直接認識できないことに気づきました。 base64 文字を画像に変換しますか? ......

JS での Base64 と画像間の変換の簡単な分析 (コード付き)

ねえ、私の開発はまだフレームワーク、モジュール、プラグインなどに依存しすぎていて、ネイティブのものをあまり覚えていません。

将来の開発のために覚えておく必要があります。ちなみに、

JSinterconversionbase64 と画像

js は画像を Base64## に変換します。 #

var img = "imgurl";//imgurl 就是你的图片路径 
 
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 image = new Image(); 
image.src = img; 
image.onload = function(){ 
  var base64 = getBase64Image(image); 
  console.log(base64); 
}

ログイン後にコピー

js.base64 を画像形式

に変換します img の src 属性を base64 に直接設定します 画像のデータ

document.getElementById(&#39;img&#39;).setAttribute( &#39;src&#39;, &#39;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==&#39; );<br data-filtered="filtered">如下：<br data-filtered="filtered"><img  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="JS での Base64 と画像間の変換の簡単な分析 (コード付き)" >

ログイン後にコピー

 推奨される学習: js ビデオ チュートリアル 
以上がJS での Base64 と画像間の変換の簡単な分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。