㈠ image/png;base64代碼是唯一的嗎
base64是一種通用壓縮方法，同一張圖片的base64，在不同語言中都可以轉化成這張照片，其實就是將這樣照片的數據編碼成了base64字元串的形式。
㈡ ios html5 拍照上傳 照片調整90度 為什麼上傳之後 又返回來了
它的主要功能就是上傳兩張人像，通過演算法進行分析對比，最後得出一個相似度的分數，以驗證你們是天造地設還是顏值互補。
但是，當我們把上傳的圖片轉換成base64格式，發送給後台時，會發現偶爾會出現問題，有一些圖片本來是這樣的：
柴犬
處理之後卻變成了這樣：
柴犬2
經過測試發現，只有iOS手機豎著拍的照片才會出現這樣的問題，而iOS手機橫著拍的照片、Android手機拍的照片以及通過屏幕截圖、網路下載等途徑獲得的圖片都不會產生這個問題。
那麼，這到底是為什麼呢？
在開發過程中，由於時間緊迫，未求甚解，使用了github上的一個開源項目 lrz.js 來解決此問題，這個工具的主要用途是在盡量保證圖片質量的前提下壓縮圖片的大小，但同時也附帶了圖片旋轉角度糾正的功能。
通過閱讀 lrz.js 的源代碼，我發現它引入了一個叫做 exif.js 的庫來實現旋轉角度的糾正，它提供了js讀取圖像的原始數據的功能擴展，例如：拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數據。而拍照方向就是關鍵所在！
exif.js 獲取圖像的拍照方向的代碼如下：
EXIF.getData(IMG_FILE, function () { // IMG_FILE為圖像數據
var orientation = EXIF.getTag(this, "Orientation");
console.log("Orientation:" + orientation); // 拍照方向
});
獲取拍照方向的結果為1-8的數字：
拍照方向信息
注意：對於上面的八種方向中，加了*的並不常見，因為它們代表的是鏡像方向，如果不做任何的處理，不管相機以任何角度拍攝，都無法出現鏡像的情況。
這個表格代表什麼意義？我們來看第一行，值為1時，右邊兩列的值分別為：Row #0 is Top，Column #0 is Left side，其實很好理解，它表示照片的第一行位於頂端，而第一列位於左側，那麼這張照片自然就是以正常角度拍攝的。
而這8種結果，就是第一行與第一列所在的位置的8種組合。
那麼，我們來測試一下iOS手機橫著拍的照片，來看看它的拍照方向是什麼呢？
測試1
結果是1，即以正常角度拍攝的，其實也就是原圖啦~
那麼，我們再測試一下iOS手機豎著拍的照片，來看看它的拍照方向是什麼呢？
測試2
原來是6！即第一行位於右側，第一列位於頂端，其實相當於將照片順時針旋轉了90度！
所以，實際上iOS手機豎著拍出的照片與橫著拍出的照片其本質上是一樣的，只不過豎著拍出的照片被添加了一個順時針旋轉90°的拍照方向，所以顯示的時候，就變成了上下邊窄左右邊寬的狀態，其實也就是橫著拍的照片順時針旋轉90°而成的~
那麼明白了這些，文章開頭所說的照片旋轉bug的原因，也就很簡單啦~
其實就是當我們在前端對圖片進行像素處理或者drawInRect等操作之後，照片的Orientaion信息，即為拍照方向信息被刪除了，所以iOS手機豎著拍的照片又回到了橫著的狀態，看起來也就是逆時針旋轉了90°！
那麼如何糾正這個旋轉角度呢？
其實思路也很簡單：在處理圖片之前，先讀取並保存圖片的拍照方向信息，然後在處理圖片之後，再根據拍照方向，對圖片進行相應的調整，lrz.js 中的代碼如下：
switch (orientation) {
case 3:
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);
break;
case 6:
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);
break;
case 8:
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);
break;
case 2:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.drawImage(img, 0, 0, resize.width, resize.height);
break;
case 4:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(180 * Math.PI / 180);
ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);
break;
case 5:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);
break;
case 7:
ctx.translate(resize.width, 0);
ctx.scale(-1, 1);
ctx.rotate(270 * Math.PI / 180);
ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);
break;
default:
ctx.drawImage(img, 0, 0, resize.width,resize.height);
}
其中，translate是平移變換，scale(-1,1)是向左翻轉，rotate是順時針旋轉。
舉例說明 case 2，當圖片的拍照方向為2時，即第一行位於頂端，而第一列位於右側，其實相當於把照片進行了左右的翻轉。所以，這里對圖片的操作是，先向右平移等於圖片寬度的距離，再向左翻轉，這相當於以圖片水平方向的對稱軸為軸進行了左右翻轉，然後再以（0，0）為起始點繪制原寬高的圖片，即完成了對拍照方向的糾正。
最後
經過一系列的測試，發現確實只有iOS手機的豎拍照片與橫拍照片是通過拍照方向來區別的，Android手機無論豎拍還是橫拍的照片，拍照方向都為1，也就是說即使丟失了拍照方向這一信息，也不會影響到圖片的旋轉角度。而手機或電腦的屏幕截圖、網路上的圖片、通過PS製作的圖片等也是如此。
作者：任無名F
鏈接：http://www.jianshu.com/p/ad4501db178e
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
㈢ 前端把圖片壓縮轉換成base64編碼把值賜予input='hidden' 之後提交給後台. HTML5,PHP,javascript,canvas
缺點你無法直接驗證傳來的base64數據的完整性，比如大小，文件頭之類的，還需要自己來實現。
㈣ html5 base64 存儲圖片
http://www.html5china.com/HTML5features/canvas/20120520_3719.html
㈤ 怎樣將html5中利用canvas繪制的圖像在服務端保存為圖片
首先你得搞明白為什麼需要Base64這個東西，Base64的主要應用場景就是把二進制（Binary）的內容通過一個映射轉換到可以用ASCII字元表達的字元串，然後便於使用HTTP協議在客戶端和伺服器端傳輸數據。所以，關鍵的一部你做的有些問題
byte[] bytes=decoder.decodeBuffer(s);
這里解碼出來的byte[]已經是你的圖片內容了，這些byte不可能再成功的構造成字元串了，否則為何還需要用Base64啊。所以，你需要保存的是解碼出來的byte[]，而不是Base64的字元串。
另外，Base64的編解碼器，你用的那個BASE64Decoder是sun.misc提供的，為了確保最大化的兼容，比如運行在非Sun JVM的環境時，建議使用apache的common-codec。
㈥ JAVA壓縮至32K以下後的圖片base64碼
Java實現圖片與Base64編碼互轉
importjava.io.FileInputStream;
importjava.io.FileOutputStream;
importjava.io.IOException;
importjava.io.InputStream;
importjava.io.OutputStream;
importsun.misc.BASE64Decoder;
importsun.misc.BASE64Encoder;
publicclassBase64Image{
publicstaticvoidmain(String[]args){
//測試從Base64編碼轉換為圖片文件
StringstrImg="自己寫哈";
GenerateImage(strImg,"D:\wangyc.jpg");
//測試從圖片文件轉換為Base64編碼
System.out.println(GetImageStr("d:\wangyc.jpg"));
}
publicstaticStringGetImageStr(StringimgFilePath){//將圖片文件轉化為位元組數組字元串，並對其進行Base64編碼處理
byte[]data=null;
//讀取圖片位元組數組
try{
InputStreamin=newFileInputStream(imgFilePath);
data=newbyte[in.available()];
in.read(data);
in.close();
}catch(IOExceptione){
e.printStackTrace();
}
//對位元組數組Base64編碼
BASE64Encoderencoder=newBASE64Encoder();
returnencoder.encode(data);//返回Base64編碼過的位元組數組字元串
}
(StringimgStr,StringimgFilePath){//對位元組數組字元串進行Base64解碼並生成圖片
if(imgStr==null)//圖像數據為空
returnfalse;
BASE64Decoderdecoder=newBASE64Decoder();
try{
//Base64解碼
byte[]bytes=decoder.decodeBuffer(imgStr);
for(inti=0;i<bytes.length;++i){
if(bytes[i]<0){//調整異常數據
bytes[i]+=256;
}
}
//生成jpeg圖片
OutputStreamout=newFileOutputStream(imgFilePath);
out.write(bytes);
out.flush();
out.close();
returntrue;
}catch(Exceptione){
returnfalse;
}
}
}
㈦ 如何通過html5調用攝像頭拍照
ios拍照默認是旋轉的，有個exif的插件是專門解決這個問題的。js版連接:網頁鏈接，裡面有使用教程。通過這個判斷照片的旋轉角度之後，可以把它旋轉過來再保存，教程：網頁鏈接。如果只有預覽需求，直接旋轉容器進行顯示也是可以的。
㈧ 如何獲取html里<object>標簽視頻圖片的base64值
要實現這個功能，要使用canvas來做，Canvas裡面提供了一個toDataURL的介面，可以用這個介面獲得圖片的base64
所以思路是：
獲得canvas對象
載入圖片到canvas對象裡面
從canvas對象中獲取base64數據
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body><scripttype="text/javascript">
functiongetBase64Image(img){
varcanvas=document.createElement("canvas");
canvas.width=img.width;
canvas.height=img.height;
varctx=canvas.getContext("2d");
ctx.drawImage(img,0,0,img.width,img.height);
vardataURL=canvas.toDataURL("image/png");
returndataURL
//returndataURL.replace("data:image/png;base64,","");
}
functionmain(){
varimg=document.createElement('img');
img.src='./images/yeoman.png';
img.onload=function(){
vardata=getBase64Image(img);
console.log(data);
}
document.body.appendChild(img);
}
main()
</script></body>
</html>
然後可以在控制台看到base64的數據
希望可以幫到你
㈨ 怎麼在前端生成縮略圖，只上傳縮小後的圖片
需要瀏覽器支持html5。
用FileReader讀取本地文件，再用Image載入此文件並縮放繪制到canvas上。最後canvas.ToDataURL()取得縮放後文件的Base64編碼，將此編碼上傳到服務端，解碼為byte[]後，寫入文件。
㈩ java怎麼接收html5的base64
<img src="data:image/png;base64,圖片base64編碼"/>
前端顯示的時候這樣顯示就好了
至於後台接收，這個編碼就是一個字元串，用String 接收就好了