ホームページ > 記事 > ウェブフロントエンド > JS での Base64 と画像間の変換の簡単な分析 (コード付き)
前回の記事「解析用mysqlのインストールと使い方(集)」では、mysqlのインストールと使い方について学びました。 Base64とJSの画像との相互変換については以下の記事が分かりやすく、参考になると思いますので、困っている方は参考にしていただければ幸いです。
今日、apicloud
を使用して APP を作成していたときに、base64
転送イメージに遭遇し、それを表示しました現在のページの問題に直接関係しています。以前に「trans
」モジュールを使用したことがあり、このモジュールが画像を base64
形式
trans モジュールをインストールしましたが、後で変換された画像のパスが取得できないことがわかりました。
trans モジュールを保存するには、次を使用します
fs:// または、画像をシステム アルバムに保存することを選択できます。
fs を取得する方法がわかりません。 // パス。ユーザーが手動でアルバムに移動して写真を選択するのは面倒すぎるでしょう。
img タグは直接認識できないことに気づきました。
base64 文字を画像に変換しますか? ......
JSinterconversion
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); }
に変換します img
の src
属性を base64 に直接設定します
画像のデータ <pre class="brush:php;toolbar:false">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 と画像間の変換の簡単な分析 (コード付き)" ></pre>
推奨される学習:
以上がJS での Base64 と画像間の変換の簡単な分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。