目次：
ユニアプリで画像をbase64に変換する
実現方法
Base64から画像形式(js)へ
JavaScript で atob() 関数と btoa() 関数を使用して、Base64 をイメージに変換できます。
まず、atob() 関数を使用して、Base64 でエンコードされた文字列をバイナリ データに変換します。次に、バイナリ データを Blob オブジェクトに変換し、URL オブジェクトを作成します。最後に、URL オブジェクトを画像の src 属性に割り当てることで画像が表示されます。
サンプルコードは次のとおりです。
// 假设您已经有一个 Base64 编码的字符串
const base64String = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."
// 将 Base64 编码的字符串转换为二进制数据
const binaryString = atob(base64String.split(',')[1])
// 将二进制数据转换为 Blob 对象
const blob = new Blob([binaryString], {
type: 'image/png' })
// 创建 URL 对象并将其分配给图像的 src 属性
const image = new Image()
image.src = URL.createObjectURL(blob)
// 将图像添加到文档中
document.body.appendChild(image)
data:image/png;base64,atob() 関数が文字列を正しくデコードするには、base64String から を削除する必要があることに注意してください。
Base64 でエンコードされた文字列をファイルに変換し、ローカル ファイル システムに保存する必要がある場合は、FileWriter や FileSystem API などのファイル システム API を使用します。
Base64から画像フォーマットへ(uniapp)
Uniapp では、uni.base64ToArrayBuffer() API を使用して、base64 文字列を ArrayBuffer 形式に変換し、それを Blob オブジェクトに変換できます。次に、URL.createObjectURL() メソッドを使用して BLOB URL を作成し、最終的にページに表示できます。
コード例は次のとおりです。
// 将base64字符串转换为ArrayBuffer格式
const arrayBuffer = uni.base64ToArrayBuffer(base64Str);
// 将ArrayBuffer转换为Blob对象
const blob = new Blob([arrayBuffer], {
type: 'image/png' });
// 创建Blob URL
const imgUrl = URL.createObjectURL(blob);
// 在页面上显示图片
this.imgUrl = imgUrl;
ここでのbase64Strは変換したいbase64文字列であり、実際の状況に応じて型を変更できます。最終的な imgUrl は生成された Blob URL であり、これを img タグの src 属性にバインドして画像を表示できます。
Base64から画像形式へ（WeChat独自の方式）
//把base64转换成图片
getBase64ImageUrl(base64Url) {
/// 获取到base64Data
var base64Data = base64Url;
/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
const base64ImgUrl = "data:image/png;base64," + base64Data;
/// 得到的base64ImgUrl直接给图片:src使用即可
return base64ImgUrl;
},
上記のコードは参照のみを目的としており、特定の実装の詳細とスタイルは必要に応じて調整できます。
ソースコードの入手方法:
完全なソースコードが必要な友達は、「いいね」+お気に入り+コメントをして、プライベートメッセージを送っていただければ幸いです~
メンバー学習グループ: [1 対 1 の Q&A]
チュートリアルでわからないことがあれば、学習メンバー アシスタントを追加して相談できます (WeChat: mifankeji77)