『壹』 js 將圖片轉換為base64編碼
將圖片轉換為舉擾Base64
獲取圖片Base64編碼激答鎮
方式一：Blob和FileReader 對象
實現原理：
使用xhr請求圖片,並設置返回的文件類型為Blob對象[xhr.responseType = "blob"]
使用FileReader 對象接明粗收blob
方式二：canvas.toDataURL()方法
實現原理：
使用canvas.toDataURL()方法
需要解決圖片跨域問題 image.crossOrigin = '';
使用了Jquery庫的$.Deferred()方法
『貳』 使用Node中的Buffer模塊，將圖片轉換成base64編碼
Buffer官方文檔如侍塌下 http://nodejs.cn/api/buffer.html
node開發過程中，常用的就是將圖片轉換成base64編碼，這時候就用到buffer了：
運行
將列印出來的結果輸入到test.js這個文件里，便於查看。之後我物辯們在test.js里就老螞圓能看到這個圖片的base64編碼了。
再設置好其 DataURI前綴 就能在瀏覽器里查看這張圖片啦！
下面是我在瀏覽器查看的結果：
『叄』 小程序 使用upng.js 把小程序選擇的圖片轉換為base64
有時候會遇到後端需要前端獲取的圖片文件轉換成base64，在傳給後台
小程序有專門的選肢液擇圖片介面，
wx.chooseImage(OBJECT)
但是這個只是返回一個圖片的臨時路徑，並不是文件數據本身。
小程序暫時沒有介面直接轉base64的
所以我們需要使用canvas和canvasGetImageData（小程序版本1.9.0以後要才有）先獲取圖片內容，
再通過插件upng.js插件實現圖片轉base64（所需插件文件附件中）
1. 把upng.js和巧舉pako.min.js文件放到項目中
2. 在pages下的頁面js文件中導入
var upng = require('../../utils/upng.js');
這里只需要導入npng.js ，pako.min.js是在npng,js裡面調用
3. 建一個canvas
chooseImage">人臉測試
// 畫布
// 生成base64點陣圖片展示 變數imgbase64
need-to-insert-img
4. 添加js點擊chooseImage事件
chooseImage: function() {
var that = this;
var coss_signature = wx.getStorageSync('cos_signature');
var canvasID = "imgCanvas";
var canvas = wx.createCanvasContext(canvasID)
wx.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['original'],
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths;
// 獲取文件路徑
var filePath = tempFilePaths[0];
// 1. 繪制圖片至canvas
canvas.drawImage(filePath, 0, 0, 300, 200)
// 繪制完成後執行回調，API 1.7.0
canvas.draw(false, function(res){
// 2. 獲取圖像數據， API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: 300,
height: 200,
success(res) {
// 3. png編碼
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 4. base64編碼
let base64 = wx.arrayBufferToBase64(pngData)
// ...
that.setData({
imgbase64: base64
})
}
孝飢碧 })
})
}
})
}
5. 實現
need-to-insert-img
need-to-insert-img
tips
畫布畫的圖片的長和寬是固定的，這個按照自己需求設置。
可以通過小程序的
wx.getImageInfo(OBJECT)
獲取長和寬
相關鏈接
upng.js: https://github.com/photopea/UPNG.js
wx-cardscanner: https://github.com/zh8637688/wx-cardscanner 有時候會遇到後端需要前端獲取的圖片文件轉換成base64，在傳給後台
小程序有專門的選擇圖片介面，
但是這個只是返回一個圖片的臨時路徑，並不是文件數據本身。
小程序暫時沒有介面直接轉base64的
所以我們需要使用canvas和canvasGetImageData（小程序版本1.9.0以後要才有）先獲取圖片內容，
再通過插件upng.js插件實現圖片轉base64（所需插件文件附件中）
1. 把upng.js和pako.min.js文件放到項目中
2. 在pages下的頁面js文件中導入
var upng = require('../../utils/upng.js');
這里只需要導入npng.js ，pako.min.js是在npng,js裡面調用
3. 建一個canvas
chooseImage">人臉測試
// 畫布
// 生成base64點陣圖片展示 變數imgbase64
4. 添加js點擊chooseImage事件
chooseImage: function() {
var that = this;
var coss_signature = wx.getStorageSync('cos_signature');
var canvasID = "imgCanvas";
var canvas = wx.createCanvasContext(canvasID)
wx.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['original'],
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths;
// 獲取文件路徑
var filePath = tempFilePaths[0];
// 1. 繪制圖片至canvas
canvas.drawImage(filePath, 0, 0, 300, 200)
// 繪制完成後執行回調，API 1.7.0
canvas.draw(false, function(res){
// 2. 獲取圖像數據， API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: 300,
height: 200,
success(res) {
// 3. png編碼
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 4. base64編碼
let base64 = wx.arrayBufferToBase64(pngData)
// ...
that.setData({
imgbase64: base64
})
}
})
})
}
})
}
5. 實現
tips
畫布畫的圖片的長和寬是固定的，這個按照自己需求設置。
可以通過小程序的
獲取長和寬
相關鏈接
upng.js: https://github.com/photopea/UPNG.js
wx-cardscanner: https://github.com/zh8637688/wx-cardscanner
『肆』 PHP 如何把圖片轉成 BASE64 編碼
請試一試下面的代碼
<?php
$img=羨畢'圖片地址.jpg';
$base64_img=base64EncodeImage($img);
絕喊
echo'<imgsrc="'並派野.$base64_img.'"/>';
functionbase64EncodeImage($image_file){
$base64_image='';
$image_info=getimagesize($image_file);
$image_data=fread(fopen($image_file,'r'),filesize($image_file));
$base64_image='data:'.$image_info['mime'].';base64,'.chunk_split(base64_encode($image_data));
return$base64_image;
}
?>
試一試！
『伍』 c++如何將圖片轉base64
base64可以將不可顯示殲卜的編碼轉換成可顯示的編碼，以便於存儲。比如http一般傳輸的是文本格式的報文，如果要傳輸圖片，那麼就要先將圖片編碼成base64的報文傳輸，然後在客客戶端顯示的時閉游候，將base64的報文解密，轉換成二進制的圖片轎改銷數據顯示。下面給出源代碼，可以直接在linux,msvc環境下進行編譯。
詳情見http://blog.csdn.net/chenxiaohua/article/details/4084602
『陸』 H5調用手機相機和相冊，並且將圖片轉化為base64的格式
之前在做 見到 的時候有一個需求是更換頭像，於是乎就開始各種趟坑，宴慧纖晌仿還好搞出來了，之前忙著上線，沒時間整理，現在抽空整理一下。本補充一下，這個項目是很早的項目，用的還是jq
，h5,寫的還不是vue全家桶。
結束：
這樣就完成了一個上傳圖片的並轉換為base64的功能。之前的項目，沒有封裝碧手，直接用就好了。
『柒』 react native 把圖片轉成base64
這里用到的是 react-native-fs這個組件 把本地圖片轉成base64
關於組件首陪的使用 請參考 https://github.com/itinance/react-native-fs
下面就說下如何利用這個組件轉成base64:
如果網頁上查看 請書寫正正握確的格式舉芹慶這個是 jpeg的圖片格式如下：
data:image/jpeg;base64,