html5base64壓縮

⑴ 如何使用HTML5實現利用攝像頭拍照上傳功能

HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
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;
}
</script>
此時，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);
}

以上的解決方案不僅能用於Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖片編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必將會遷移到WEB應用上來。
相關規范：
（為便於閱讀，對原文進行了不失原意的適當修改，包括代碼中一些錯誤的重復，並作了注釋）
HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。
1、 視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia（請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
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;
}
</script>
此時，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);
}

以上的解決方案不僅能用於Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖片編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必將會遷移到WEB應用上來。

⑵ 如何通過html5調用攝像頭拍照

ios拍照默認是旋轉的，有個exif的插件是專門解決這個問題的。js版連接:網頁鏈接，裡面有使用教程。通過這個判斷照片的旋轉角度之後，可以把它旋轉過來再保存，教程：網頁鏈接。如果只有預覽需求，直接旋轉容器進行顯示也是可以的。

⑶ html5怎麼壓縮圖片

利用canvas的drawImage方法來繪制圖片，並且設置繪制的圖片的width跟height，最後再通過canvas的toDataURL方法來生成壓縮後的dataUR

下面直接上代碼：

html:

[html]view plain

• <divclass="head_imgpr">

• <emclass="pa"></em>

• <imgsrc='../images/icon_touxiang.png'alt=""class="modify_img"/>

• <inputid="photo"type="file"accept="image/*"/>

• </div>

⑷ html5寫的頁面安卓機上能播放視頻，ios上不能播放，誰知道怎麼解決

找修理鋪專業人員進行轉碼

h264編碼的壓縮級別是不能夠在ios上播放的，需要轉碼。這個需要專業的知識才可以進行轉碼，因此建議到修理鋪找專業人士進行轉碼，如果自己操作數據易丟失。

另外html5是通過某種特定的壓縮技術，將某個視頻格式的文件轉換為另一種視頻格式的文件的技術稱為視頻編碼，如果級別不適配的話可以進行轉碼使用。

(4)html5base64壓縮擴展閱讀：

數據在傳輸的過程中，瀏覽器會對數據進行編碼，假如現在有一條數據{"name":"測試"}，如果通過get方法傳遞數據，這條數據會被拼接到url請求的後面。

uri本身是採用ASCII編碼的，所以如果是非ASCII編碼集的字元在傳輸時都會被編碼，編碼方法和encodeURI的編碼規則相同，但是這里的編碼規則是由瀏覽器控制的。

除此之外不同的瀏覽器採用的編碼方式(UTF-8,GBK)不一樣，被編碼的數據發送給伺服器，伺服器用iso-8859-1編碼對數據解碼，後端人員通過request.getParameter("name")獲取參數數據。

⑸ 如何通過html5調用攝像頭拍照

這個是前台HTML的代碼。

<div id="contentHolder">

<video id="video" width="320" height="320" autoplay>

</video>

<button id="snap" style="display:none"> 拍照</button>

<canvas style="display:none" id="canvas" width="320" height="320">

</canvas>

</div>
復制代碼

下面這個是主要代碼了。（jquery）
<script>

//判斷瀏覽器是否支持HTML5 Canvas

window.onload = function () {

try {

//動態創建一個canvas元 ，並獲取他2Dcontext。如果出現異常則表示不支持 document.createElement("canvas").getContext("2d");

document.getElementByIdx("support").innerHTML = "瀏覽器支持HTML5 CANVAS";

}

catch (e) {

document.getElementByIdx("support").innerHTML = "瀏覽器不支持HTML5 CANVAS";

}

};

//這段代 主要是獲取攝像頭的視頻流並顯示在Video 簽中

window.addEventListener("DOMContentLoaded", function () {

var canvas = document.getElementByIdx("canvas"),

context = canvas.getContext("2d"),

video = document.getElementByIdx("video"),

videoObj = { "video": true },

errBack = function (error) {

console.log("Video capture error: ", error.code);

};

//navigator.getUserMedia這個寫法在Opera中好像是navigator.getUserMedianow

if (navigator.getUserMedia) {

navigator.getUserMedia(videoObj, function (stream) {

video.src = stream;

video.play();

}, errBack);

} else if (navigator.webkitGetUserMedia) {

navigator.webkitGetUserMedia(videoObj, function (stream) {

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, errBack);

}

//這個是拍照按鈕的事件，

$("#snap").click(function () {

context.drawImage(video, 0, 0, 320, 320);

//CatchCode();

});

}, false);

//定時器

var interval = setInterval(CatchCode, "300");

//這個是 刷新上 圖像的

function CatchCode() {

$("#snap").click();

//實際運用可不寫，測試代 ， 為單擊拍照按鈕就獲取了當前圖像，有其他用途

var canvans = document.getElementByIdx("canvas");

//獲取瀏覽器頁面的畫布對象

//以下開始編 數據

var imgData = canvans.toDataURL();

//將圖像轉換為base64數據

var base64Data = imgData.substr(22);

//在前端截取22位之後的字元串作為圖像數據

//開始非同步上

$.post("uploadImgCode.ashx", { "img": base64Data }, function (data, status) {

if (status == "success") {

if (data == "OK") {

alert("二維 已經解析");

}

else {

// alert(data);

}

}

else {

alert("數據上 失敗");

} }, "text");

}

</script>
復制代碼

最後的就是接收經過base64編碼之後的圖像文件了。

public void ProcessRequest (HttpContext context) {

string img;//接收經過base64編 之後的字元串

context.Response.ContentType = "text/plain";

try {

img =context.Request["img"].ToString();

//獲取base64字元串

byte[] imgBytes = Convert.FromBase64String(img);

//將base64字元串轉換為位元組數組

System.IO.Stream stream = new System.IO.MemoryStream(imgBytes);

//將位元組數組轉換為位元組流

//將流轉回Image，用於將PNG 式照片轉為jpg，壓縮體積以便保存。

System.Drawing.Image imgae = System.Drawing.Image.FromStream(stream);

imgae.Save(context.Server.MapPath("~/Test/") + Guid.NewGuid().ToString()+".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);//保存圖片

context.Response.Write("OK");//輸出調用結果

} catch (Exception msg) {

img = null;

context.Response.Write(msg);

return;

}

}

⑹ Html5移動端上傳圖片並裁剪 - Clipic.js

Clipic.js插件可以為移動端 (僅支持移動端) 提供頭像上傳並裁剪成指定尺寸，用原生js開發的，輕量級，包含html跟css，不到8kb。點此鏈接體驗： https://teojs.github.io/clipic/

https://github.com/teojs/clipic

參數說明

width:Number (默認：500) – 裁剪寬度
height:Number (默認：500) – 裁剪高度
ratio:Number (可選) – 裁剪的比例，當傳入ratio時width/height將無效
src:String (必傳) – 需要裁剪的圖片，可以是圖片鏈接，或者 base64
type:String (默認：jpeg) – 裁剪後圖片的類型，僅支持 jpeg/png 兩種
quality:Number (默認：0.9) – 壓縮質量
buttonText:Array (默認：[『取消』, 『重置』, 『完成』]) – 底部三個按鈕文本

http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0

⑺ 手機移動端html5、js如何實現視頻上傳並壓縮視頻質量，或者降低手機攝像頭拍攝質量

你好 HTML5和javascript是不能壓縮視頻的，只能把視頻傳到伺服器端，由後端來壓縮視頻，也不能控制相機的拍攝質量，除非你用JAVA寫Android客戶端才可以壓縮。希望我的回答能夠幫助到你，如果還有什麼疑問可以繼續追問。

⑻ 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做好壓縮包，解壓到網站目錄，顯示這個界面怎麼辦啊！求大佬解答！

默認文檔沒設置好，或者打開瀏覽目錄了，最主要的是看你文件不全和錯放位置，建議多花時間耐心學習下，事半功倍，還有其他不會要學習的也可以找額解決，謝謝