html5頭像上傳
A. java問題： 當上傳頭像時，如何去掉背景顏色，只要頭而已，這應該怎麼弄，用到什麼技術，求問
那你要在上傳的時候先用PS處理一下這個照片的背景色.....程序好像不具備這能力..
B. javaweb 上傳圖片並對其進行操作
不需要弄成圓形，非親！
你看你的網路知道回答中心的頭像，是圓形的，
對於非html5的瀏覽器它是用一個鏤空圖片覆蓋的效果
你如果也想這樣顯示，這樣操作即可
2. 使用html5的css樣式即可：
border-radius:35px;
C. 如何通過html5調用攝像頭拍照
1. 項目背景
網站項目基於HTML5+AngularJs開發，正在做一個由HTML5調用攝像頭拍照，從而實現修改頭像的功能。起初覺得HTML5拍照很簡單，但是做的時候才發現HTML5獲取攝像頭並不是那麼容易。
2. 如何調用攝像頭
$scope.photoErr = false;
$scope.photoBtnDiable = true;
var mediaStream = null,track = null;
navigator.getMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getMedia) {
navigator.getMedia(
{
video: true
},
// successCallback
function (stream) {
var s = window.URL.createObjectURL(stream);
var video = document.getElementById('video');
video.src = window.URL.createObjectURL(stream);
mediaStream = stream;
track = stream.getTracks()[0];
$scope.photoBtnDiable = false; $scope.$apply();
},
// errorCallback
function (err) {
$scope.errorPhoto();
console.log("The following error occured:" + err);
});
} else {
$scope.errorPhoto();
}
代碼解析：
navigator為瀏覽器對象，包含瀏覽器的信息，這里就是用這個對象打開攝像頭。$scope為AnlarJs語法。第一步聲明navigator.getMedia來調用瀏覽器不同的打開攝像頭函數，目前僅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四種方式分別對應通用瀏覽器、Google瀏覽器、火狐瀏覽器和IE瀏覽器，瀏覽器會自動判斷調用哪一個函數。第二步是調用打開瀏覽器，包含三個參數，分別為需要使用的多媒體類型、獲取成功返回的流數據處理函數以及操作失敗返回錯誤消息處理函數。其中，使用時不僅可以設置視頻還能設置使用麥克風，設置方式為：
{
video: true，
audio: true
}
調用成功即打開攝像頭後返回視頻流數據，我們可以將流數據設置到video標簽在界面上實時顯示圖像。mediaStream用來記錄獲取到的流數據，track在Chrome瀏覽器中用來跟蹤攝像頭狀態，這兩個變數都能用來關閉攝像頭。
3. 拍照
$scope.snap = function () {
var canvas = document.createElement('canvas');
canvas.width = "400";
canvas.height = "304";
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 400, 304);
$scope.closeCamera();
$uibModalInstance.close(canvas.toDataURL("image/png"));
};
拍照時需要使用到canvas標簽，創建一個canvas標簽，設置我們需要拍照的尺寸大小，通過drawImage函數將video當前的圖像保存到canvas標簽，最後將圖像數據轉換為base64數據返回並關閉攝像頭，這樣就完成了我們的拍照功能。這里的$uibModalInstance對象是我們項目中打開彈出層的一個對象，用來控制彈出層的顯示。
4. 如何關閉攝像頭
$scope.closeCamera = function () {
if (mediaStream != null) {
if (mediaStream.stop) {
mediaStream.stop();
}
$scope.videosrc = "";
}
if (track != null) {
if (track.stop) {
track.stop();
}
}
}
正如前面所說，關閉攝像頭的方式是通過mediaStream和track變數，只不過，track只能關閉Chrome瀏覽器中的攝像頭，這也是Chrome 45版本以上關閉攝像頭的方式。
5. 集成到AnlarJs
事實上，前面所說的都是在AnlarJs中實現的，當然，這里只是實現了拍照並返回拍照數據，我們想要在其他地方也使用，就需要將這部分獨立出來，這里我們用到了AngularJs中的service機制，將這部分單獨做成一個service並在項目中注入，然後就可以在其他地方調用了。
service注冊:
app().registerService("h5TakePhotoService", function ($q, $uibModal) {
this.photo = function () {
var deferred = $q.defer();
require([config.server + "/com/controllers/photo.js"], function () {
$uibModal.open({
templateUrl: config.server + "/com/views/modal_take_photo.html",
controller: "photoModalController",
windowClass: "modal-photo"
}).result.then(function (e) {
deferred.resolve(e);
});
});
return deferred.promise;
}
});
調用方式：
$scope.takePhoto = function () {
h5TakePhotoService.photo().then(function (res) {
if (res != null && res != "") {
$scope.myImage = res;
}
});
}
h5TakePhotoService為控制器中注入的拍照service對象，最後處理返回的圖像數據，設置數據顯示到界面上。
6. 兼容問題
主要存在Chrome瀏覽器中，本地測試時，Chrome瀏覽器中能夠正常使用，但是部署到伺服器後就不能正常使用，報錯消息為 [object NavigatorUserMediaError]，這是因為Chrome瀏覽器在使用攝像頭時只支持安全源訪問，所以只能通過https訪問才能正常使用。
最後需要說一下，測試時只能通過http://url訪問才能使用，不能通過file://url方式訪問，即我們需要將代碼部署才能訪問，可以在Visual Studio、 java web、php中完成。