html5圖片上傳base64
『壹』 如何通過js將一base64編碼的圖片顯示在html中
要完成這個效果，有以下幾步：
將圖片轉化為base64編碼格式。
輸入<script>
var img = new Image();//創建img容器
img.src=『這兒就是復制填寫上面那一大串』；//給img容器引入base64的圖片
</scirpt>
3.最後一步：
document.body.appendChild(img)；//將img容器添加到html的節點中就行了。
『貳』 php實現將HTML5中Canvas圖像保存到伺服器的方法
本文實例講述了PHP實現將HTML5中Canvas圖像保存到伺服器的方法。分享給大家供大家參考。具體實現方法如下：
一、問題：
在幾年前HTML5還沒有流行的時候，我們的項目經理曾經向我提出這樣一個需求：讓項目評審專家們在評審結束時用筆在平板電腦上進行電子簽名。這需要我們評審軟體里提供這樣一個功能：打開瀏覽器，登錄，進入評審意見頁，頁面最下部有個方塊區域，用戶在這里用觸摸筆進行簽名，然後這個簽名將會保持的伺服器上。
這樣的一個需求在當時是讓我大費周折，但如今想起來，如果用html5的canvas實現，真是太簡單了。在《在HTML5
Canvas中放入圖片和保存為圖片的方法》這篇文章里就實現了這一功能。
二、解決方法：
之前說了很多如何將canvas圖像保存成圖片並下載的方法，但這些方法都是將圖片保存到客戶端，而我們的簽名需求是需要將canvas的內容保存到伺服器端，如何實現？
其實很簡單，看完下面的這段PHP代碼，相信你也會覺得很簡單。
復制代碼
代碼如下:<?php
//
requires
php5
define('UPLOAD_DIR',
'images/');
$img
=
$_POST['img'];
$img
=
str_replace('data:image/png;base64,',
'',
$img);
$img
=
str_replace('
',
'+',
$img);
$data
=
base64_decode($img);
$file
=
UPLOAD_DIR
.
uniqid()
.
'.png';
$success
=
file_put_contents($file,
$data);
print
$success
?
$file
:
'Unable
to
save
the
file.';
?>
從網頁上傳到伺服器端的圖片是base64_encode轉碼過的Data
URL格式，數據在伺服器端用base64_decode進行解碼，保存成文件。
或許有一天你也會需要用到它的，覺得很有用的話就收藏一下吧！
希望本文所述對大家的PHP程序設計有所幫助。
『叄』 如何使用HTML5實現利用攝像頭拍照上傳功能
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用
getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video
標簽，並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
var video_element=document.getElementById(『video』);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
此時，video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是採用HTML5的Canvas功能，實時捕獲Video標簽的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現。主要代碼如下：
var canvas=document.createElement(『canvas』); //動態創建畫布對象
var ctx=canvas.getContext(』2d』);
var cw=vw,ch=vh;
ctx.fillStyle=」#ffffff」;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪制到畫布上指定的區域，可進行不等大不等位的繪制。
document.body.append(canvas);
3、 圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);
這樣，imgData變數就存儲了一長串的字元數據內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分，所以要讓實際伺服器收的圖像數據應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以後的字元串作為圖像數據，例如：
var data=imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串
第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串（也就是在前台略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用：
$.post(『upload.php』,{『data』:data});
在後台我們用PHP腳本接收數據並存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,』w');
fwrite($fp,$image);
fclose($fp);
}
『肆』 如何使用html5實現拍照上傳應用
單純HTML5沒法做 需要後台技術 你可以看下關於.NET JSP PHP 最新的NODEJS
必定有很成熟的調用攝像頭拍照的介面或庫。
你可能需要系統學習的有
HTML5
CSS3
JAVASCRIPT JQUERY等
選擇一項你喜歡的後台語言。
『伍』 HTML5 做的移動 web app 怎樣實現從本地上傳圖片
當然可以，不過只能從相冊里傳
『陸』 html5 canvas在線生成圖片後怎麼樣保存到資料庫(伺服器端)而不是本地
canvas畫布保存為圖片：
functionconvertCanvasToImage(canvas){
varimage=newImage();
image.src=canvas.toDataURL("image/png");
returnimage;canvas參數為你的canvas對象，返回一個圖片對象，你可以將這個image放到網頁結構中，如果要保存圖像，可以將canvas.toDataURL("image/png")返回的base64格式的圖片數據放到input（type=hidden）中，用戶點擊上傳按鈕（或設置表單自動提交），將base64格式的數據上傳
形如：
data:image/png;base64,/oMwlEs8yMgvJVcjyMbSYaERogCC0/kYEBAG/wdxC2W2tUAAAAAElFTkSuQmCC
伺服器端接收到字元串（以上字元串可以直接在瀏覽器中打開，IE低版本就算了，能用canvas的瀏覽器都可以）後根據data:image/png得知應該保存的文件類型擴展名（png），然後將base64,後面的base64編碼字元串解碼(後端語言實現，如PHP用base64_decode()函數)，將解碼後的二進制數據以二進制的形式保存到伺服器上（圖片形式）
如果存資料庫，可以直接存base64編碼，讀取時候解碼也行，圖片建議以文件形式存儲，資料庫不適合存大文件
『柒』 如何使用HTML5實現拍照上傳應用
在HTML5規范的支持下，WebApp在手機上拍照已經成為可能。在下面，我將講解Web App如何用手機進行拍照，顯示在頁面上並上傳到伺服器。
1、 視頻流
HTML5 The Media Capture
API提供了對攝像頭的可編程訪問，用戶可以直接用getUserMedia獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5的Video標
簽，並將從攝像頭獲得視頻作為這個標簽的輸入來源（請注意目前僅Chrome和Opera支持getUserMedia。補充：請使用Opera支持HTML5的新版本，如果是Chrome，版本需為Chrome 18.0.1008+，並使用about:flags來開啟WebRTC，請看下圖）。
[html] view plain
<video id="video" autoplay=""></video>
<script>
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
navigator.getUserMedia('video',success, error);
}
function success(stream) {
video_element.src =stream;
}
</script>
視頻流
2、 拍照
拍照功能，我們採用HTML5的Canvas實時捕獲Video標簽的內容，Video元素能作為Canvas圖像的輸入，這一點很棒。主要代碼如下：
[html] view plain
<script>
var canvas =document.createElement('canvas');
var ctx = canvas.getContext('2d');
var cw = vw;
var ch = vh;
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, cw, ch);
ctx.drawImage(video_element, 0, 0, vvw,vvh, 0,0, vw,vh);
document.body.append(canvas);
</script>
3、 圖片獲取
下面我們要從Canvas獲取圖片數據，其核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。
[html] view plain
var imgData =canvas.toDataURL("image/png");
因為真正圖像數據是base64編碼逗號之後的部分，所以我們實際伺服器處理的圖像數據應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以後的字元串作為圖像數據，例如：
[html] view plain
var data = imgData.substr(22);
如果要在上傳前獲取圖片的大小，可以使用：
[html] view plain
var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding
第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串。例如PHP里：
[html] view plain
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時：
[html] view plain
$.post('upload.php',{ 'data' : data } );
在後台我們用PHP腳本接收數據並存儲為圖片。
[html] view plain
function convert_data($data){
$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);
save_to_file($image);
}
function save_to_file($image){
$fp = fopen($filename, 'w');
fwrite($fp, $image);
fclose($fp);
}
請注意，以上的解決方案不僅能用於Web App拍照上傳，並且你可以實現把Canvas的輸出轉換為圖片上傳的功能。這樣你可以使用Canvas為用戶提供圖片編輯，例如裁剪、上色、塗鴉的畫板功能，然後把用戶編輯完的圖片保存到伺服器上。
『捌』 base64的圖片怎麼顯示在html文檔裡面呢
直接把圖片轉成的base64字元串放在圖片鏈接裡面就行，需要注意是data:開頭的，給你看下今日頭條logo的背景圖片展示
『玖』 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
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
『拾』 圖片上傳到伺服器後，如何轉換成代碼在網站上顯示
可以使用html5，要將圖片轉換成base64需要使用到一個html5的介面FileReader.readAsDataURL()介面說明,這個介面可以將文件轉換成base64編碼格式，並且再以data：URL的形式展現出來
思路
1.創建三個html標簽，input用來上傳圖片，textarea用來顯示base64代碼，因為base64代碼內容很多所以使用textarea標簽，p標簽用來顯示圖片。
2.使用js調用html5的FileReader.readAsDataURL()的API，聲明三個變數用於控制圖片上傳，base64代碼顯示以及圖片的顯示。
3.img_upload.addEventListener('change',readFile,false);添加一個監聽事件，如果上傳文件發生變化就執行readFile函數。
4.readFile函數的內容就是調用介面，將圖片轉換成base64再輸出。
5.在執行轉換和輸出之前先判斷一下上傳文件是不是圖片。