WEB手機臨時拍照圖片獲取及異步上傳
2016-03-26 14:06:05
閱讀：1020
首頁 資訊 技術分享
在網站WEB端及封裝APP網站做手機上傳圖片預覽特別是蘋果手機選擇圖片時，有拍照圖片選擇，一般HTML file表無法獲得用戶臨時拍照的圖片，這時可以用html5+jquery+canvas來實現，廢話不多說貼代碼。
(function($){
$.fn.extend({
aiiUpload:function(obj)
{
if(typeof obj !="object")
{
alert('參數錯誤');
return;
}
var imageWidth,imageHeight;
var base64;
var file_num=0;
var fileInput=$(this);
var fileInputId=fileInput.attr('id');
createDoc('#'+fileInputId,obj.method,obj.action);
$('#aii_file').change(function(){
if(test(this.value)==false)
{
alert('格式錯誤');
return;
}
var objUrl = getObjectURL(this.files[0]);
if (objUrl)
{
imgBefore(objUrl,file_num);
render(objUrl,obj.max_h,obj.max_w,file_num);
file_num++;
}
});
}
});
function createDoc(objID,form_method,form_action)
{
var element=$(objID);
element.append('<ul class="viewList"></ul>').append('<div class="fileBox"><input type="file" id="aii_file" /><div class="file_bg"></div></div>').append('<form id="aii_upload_form" method="'+form_method+'" action="'+form_action+'"></form>').append('<canvas id="canvas"></canvas>');
}
function test(value)
{
var regexp=new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$",'g');
return regexp.test(value);
}
function render(src,MaximgW,MaximgH,idnum)
{
var image=new Image();
image.onload=function()
{
var canvas=document.getElementById('canvas');
if(image.width>image.height)
{
imageWidth=MaximgW;
imageHeight=MaximgH*(image.height/image.width);
}
else if(image.width<image.height)
{
imageHeight=MaximgH;
imageWidth=MaximgW*(image.width/image.height);
}
else
{
imageWidth=MaximgW;
imageHeight=MaximgH;
}
canvas.width=imageWidth;
canvas.height=imageHeight;
var con=canvas.getContext('2d');
con.clearRect(0,0,canvas.width,canvas.height);
con.drawImage(image,0,0,imageWidth,imageHeight);
base64=canvas.toDataURL('image/jpeg',0.5).substr(22);
add_doc(base64,idnum);
}
image.src=src;
};
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
//預覽
function imgBefore(objUrl,idnum)
{
var li='<li class="view"><img src="'+objUrl+'" id="aiiImg_'+idnum+'" idnum="'+idnum+'" /><div class="close" onclick="img_remove(this);"></div></li>'
$('.viewList').append(li);
var img=$('#aiiImg_'+idnum);
//預覽圖片居中 填滿 代碼
console.log('asdfasdfasdf');
img.load(function(){
var imgw=img.width(),
imgh=img.height();
console.log(imgw);
console.log(imgh);
if(imgw>imgh)
{
img.css('height','100%');
img.css('width','auto');
img.css('marginLeft',-(img.width()-img.height())/2+'px');
}
else if(imgw<imgh)
{
img.css('width','100%');
img.css('height','auto');
img.css('marginTop',-(img.height()-img.width())/2+'px');
}
});
}
function add_doc (base,idnum)
{
$('#aii_upload_form').append('<input type="hidden" name="img[]" id="f_'+idnum+'" value="'+base+'"/>');
}
})(jQuery);
function img_remove(element)
{
var num=$(element).prev().attr('idnum');
$(element).parent().remove();
$('#f_'+num).remove();
console.log('asdf');
}
以上是需要用到的JQUERY 下面是調用該jquery及我們點擊上傳圖片并預覽圖片代碼
<section class="section">
<div id="box"></div>
<p style="color:red;">*樣式修改請參考aiiUpload.css</p>
</section>
<script type="text/javascript">
$('#box').aiiUpload({
method:'POST',
action:'form.php',
max_h:300,
max_w:300,
subText:'上傳圖片',
fileText:'選擇圖片'
});
</script>
查找 “add_doc(base64,idnum);”我們可以在上面添加自己的Ajax代碼如
$.post("action.php?user_id={$user_id}&member_user=member_img",{base64:base64},function(msg){ })
其中“base64”是我們的圖片文件，然后我們需要在PHP程序中處理獲取到的圖片文件
$base64 = $_REQUEST['base64']; //獲取圖片碼
$IMG = base64_decode($base64); //將獲取到的圖片碼轉義
$rand = rand(100, 999);
$pics_tow = date("YmdHis") . $rand . '.png'; //進行文件重命名
$pic_path_tow = "files/". $pics_tow; //文件路徑控制
file_put_contents($pic_path_tow, $IMG); //將轉義過的字符串寫入指定路徑下
將我們獲取到的文件名進行數據操作！
這樣從手機拍照的圖片就可以獲取并存入服務器及數據庫中了！
穩定
產品高可用性高并發貼心
項目群及時溝通專業
產品經理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽堅持
10年專注高端品質開發