① 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轉圖片
可以處理，不過效率比較低
eugeneware/jpeg-js這個是JPG的編碼，要用canvas獲取到點陣圖然後再演算法重編碼就行了
具體的代碼裡面都有，在encode的最下面
③ js把頁面圖片打包成zip格式
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<style>
img{
width:200px;
height:150px;
}
</style>
</head>
<body>
<imgsrc="http://pic.pptbz.com/201506/2015070581208537.JPG"/>
<imgsrc="http://img.taopic.com/uploads/allimg/121014/234931-1210140JK414.jpg"/>
<imgsrc="http://img.zcool.cn/community/.jpg"/>
<imgsrc="http://img.zcool.cn/community/.jpg"/>
<br/><br/>
<buttononclick="packageImages()">packageImages</button><spanid="status"></span><br/><br/>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/jszip.min.js"></script>
<scripttype="text/javascript"src="js/FileSaver.js"></script>
<scripttype="text/javascript">
functionpackageImages(){
$('#status').text('處理中。。。。。');
varimgs=$('img');
varimgsSrc=[];
varimgBase64=[];
varimageSuffix=[];//圖片後綴
varzip=newJSZip();
zip.file("readme.txt","案件詳情資料 ");
varimg=zip.folder("images");
for(vari=0;i<imgs.length;i++){
varsrc=imgs[i].getAttribute("src");
varsuffix=src.substring(src.lastIndexOf("."));
imageSuffix.push(suffix);
getBase64(imgs[i].getAttribute("src"))
.then(function(base64){
imgBase64.push(base64.substring(22));
//console.log(base64);//處理成功列印在控制台
},function(err){
console.log(err);//列印異常信息
});
}
functiontt(){
setTimeout(function(){
if(imgs.length==imgBase64.length){
for(vari=0;i<imgs.length;i++){
img.file(i+imageSuffix[i],imgBase64[i],{base64:true});
}
zip.generateAsync({type:"blob"}).then(function(content){
//seeFileSaver.js
saveAs(content,"images.zip");
});
$('#status').text('處理完成。。。。。');
}else{
//console.log('imgs.length:'+imgs.length+',imgBase64.length:'+imgBase64.length);
$('#status').text('已完成：'+imgBase64.length+'/'+imgs.length);
tt();
}
},100);
}
tt();
}
//傳入圖片路徑，返回base64
functiongetBase64(img){
functiongetBase64Image(img,width,height){//width、height調用時傳入具體像素值，控制大小,不傳則默認圖像大小
varcanvas=document.createElement("canvas");
canvas.width=width?width:img.width;
canvas.height=height?height:img.height;
varctx=canvas.getContext("2d");
ctx.drawImage(img,0,0,canvas.width,canvas.height);
vardataURL=canvas.toDataURL();
returndataURL;
}
varimage=newImage();
image.crossOrigin='Anonymous';
image.src=img;
vardeferred=$.Deferred();
if(img){
image.onload=function(){
deferred.resolve(getBase64Image(image));//將base64傳給done上傳處理
}
returndeferred.promise();//問題要讓onload完成後再returnsessionStorage['imgTest']
}
}
</script>
</body>
</html>
④ js 進行參數傳遞 但是參數中包含文字和圖片 怎麼把圖片轉成base64或者二進制呢
有一個問題需要弄清楚，才能更准確地回答你的這個問題：
你的圖片最後是用來做什麼的呢？
這個圖片是用來上傳？還是用來在瀏覽器上顯示？
如果是用來上傳，要知道base64的圖片太大之後，格式很容易出錯，不建議這么做，而這么做的人怕是也不好找。
如果是在瀏覽器上顯示，你只要傳這個圖片的URL就可以了，URL本身就是一個字元串，然後使用JS將圖片顯示到頁面上去，這個方法有許多種。
另外，如果你是想要將一個圖片轉成base64，需要這個工具的話，這里有一個，不過只不過是工具，不能傳入到JS里自動轉換的。
⑤ 小程序 使用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
⑥ 怎麼用JavaScript在線壓縮圖片
主要用了兩個html5的 API，一個file，一個canvas，壓縮主要使用cnavas做的，file是讀取文件，之後把壓縮好的照片放入內存，最後內存轉入表單下img.src，隨著表單提交。
照片是自己用單反拍的，5M多，壓縮下面3張分別是600多kb，400多kb，300kb的最後那張失真度很大了，壓縮效率蠻高的。
<!DOCTYPE html>
<html><head> <meta charset="utf-8"/> <title>File API Test</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/JIC.js"></script> <style> #test{ display: none; } </style></head><body><input type="file" id="fileImg" ><form> <img src="" id="test" alt=""></form><script> function handleFileSelect (evt) { // var filebtn = document.getElementById(id); // console.log(filebtn); // var files = filebtn.target.files; // console.log(filebtn.target); // console.log(files); var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. // console.log(evt.target.files[0]); // console.log(e.target); console.log(e.target.result); var i = document.getElementById("test"); i.src = event.target.result; console.log($(i).width()); console.log($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); console.log($(i).width()); console.log($(i).height()); var quality = 50; i.src = jic.compress(i,quality).src; console.log(i.src); i.style.display = "block"; }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);</script></body></html>
var jic = { /** * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed * @param {Image} source_img_obj The source Image Object * @param {Integer} quality The output quality of Image Object * @return {Image} result_image_obj The compressed Image Object */ compress: function(source_img_obj, quality, output_format){ var mime_type = "image/jpeg"; if(output_format!=undefined && output_format=="png"){ mime_type = "image/png"; } var cvs = document.createElement('canvas'); //naturalWidth真實圖片的寬度 cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality/100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; }, function ****(***)
⑦ js怎麼把base64的字元串轉換成圖片
C#的轉換， JS 就不清楚啦， 希望對樓主有幫助
private void button2_Click(object sender, EventArgs e)
{
OpenFileDialog dlg = new OpenFileDialog();
dlg.Title = "選擇要轉換的base64編碼的文本";
dlg.Filter = "txt files|*.txt";
if (DialogResult.OK == dlg.ShowDialog())
{
Base64StringToImage(dlg.FileName);
}
}
⑧ js base64與canvas base64
獲取到上傳的文件myfile，創建一個fileRead文件對象，使用readAsDataURL方法可以將讀取到的文件編碼成Data URL。文件載入成功後，e.target.result就是文件圖片所對應的base64編碼。直接賦值給img的src，就能顯示圖片。
下面是onload里e對象列印的結果，可以看出e.target.result是文件圖片的信息。
下面列印的是base64的編碼，可以在img的src中直接引用，或者復制到瀏覽器搜索框里也能直接搜索圖片。
使用canvas畫一個填充色為紅色的矩形，試點按鈕後，使用canvas.toDataURL方法：返回一個包含圖片展示的 data URI 。可以使用type參數其類型，默認為 PNG 格式。把得到的base64編碼賦給img的src,顯示圖片。
結果圖如下：
兩種圖片的base64的方法都很實用，項目開發中可能會遇到，今天來分享給大家。
⑨ js如何將base64格式圖片保存到伺服器
下面一小段代碼給大家分享Nodejs把接收圖片base64格式保存為文件存儲到伺服器上的方法，具體代碼如下所示：
app.post('/upload', function(req, res){
//接收前台POST過來的base64
var imgData = req.body.imgData;
//過濾data:URL
var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
var dataBuffer = new Buffer(base64Data, 'base64');
fs.writeFile("image.png", dataBuffer, function(err) {
if(err){
res.send(err);
}else{
res.send("保存成功！");
}
});
});