html5上傳圖片壓縮
A. HTML5++Runtime打包時未添加+Camera模塊
摘要 此問題通常是因為您所用網路上傳帶寬過窄(比如電話線ADSL用戶)
B. html5插入的圖片如何修改大小
css設置width,height
C. html5手機頁面背景圖片自適應大小問題
1，輸入position：fixed；top：0；left：0；將整個div固定在屏幕的頂部和左側。
D. HTML5 canvas 畫圖， 大圖縮小時清晰度問題
這是因為圖像的采樣方式不夠好造成的
解決方案是自己寫演算法進行平均采樣
實現方式有兩種，一種是js對像素點進行手動合並采樣，具體演算法可以用這個：github。com斜杠sapics斜杠scale.js
還有一個方案使用webgl，用gpu對圖片進行平均合並采樣，需要自己寫shader，並且需要比較新的瀏覽器和電腦，需要支持webgl，運行效率比較高。
給你個圖片處理的類吧，圖片剪裁處理後，也就等於將圖片壓縮了。
/**
*圖像處理類
*============================================================================
*Copyright2014大秦科技，並保留所有權利。
*網站地址:http://www.qintech.net；
*============================================================================
*/
classImage{
//生成縮略圖的方式
public$thumbType;
//縮略圖的寬度
public$thumbWidth;
//縮略圖的高度
public$thumbHeight;
//生成縮略圖文件名後綴
public$thumbEndFix;
//縮略圖文件前綴
public$thumbPreFix;
/**
*構造函數
*/
publicfunction__construct(){
$this->thumbType=1;
$this->thumbWidth=120;
$this->thumbHeight=60;
$this->thumbPreFix='';
$this->thumbEndFix='_thumb';
}
/**
*檢測是否為圖像文件
*@param$img圖像
*@returnbool
*/
privatefunctioncheck($img){
$type=array(".jpg",".jpeg",".png",".gif");
$imgType=strtolower(strrchr($img,'.'));
returnextension_loaded('gd')&&file_exists($img)&&in_array($imgType,$type);
}
/**
*獲得縮略圖的尺寸信息
*@param$imgWidth原圖寬度
*@param$imgHeight原圖高度
*@param$thumbWidth縮略圖寬度
*@param$thumbHeight縮略圖的高度
*@param$thumbType處理方式
*1固定寬度高度自增2固定高度寬度自增3固定寬度高度裁切
*4固定高度寬度裁切5縮放最大邊原圖不裁切
*@returnmixed
*/
privatefunctionthumbSize($imgWidth,$imgHeight,$thumbWidth,$thumbHeight,$thumbType){
//初始化縮略圖尺寸
$w=$thumbWidth;
$h=$thumbHeight;
//初始化原圖尺寸
$cuthumbWidth=$imgWidth;
$cuthumbHeight=$imgHeight;
switch($thumbType){
case1:
//固定寬度高度自增
$h=$thumbWidth/$imgWidth*$imgHeight;
break;
case2:
//固定高度寬度自增
$w=$thumbHeight/$imgHeight*$imgWidth;
break;
case3:
//固定寬度高度裁切
$cuthumbHeight=$imgWidth/$thumbWidth*$thumbHeight;
break;
case4:
//固定高度寬度裁切
$cuthumbWidth=$imgHeight/$thumbHeight*$thumbWidth;
break;
case5:
//縮放最大邊原圖不裁切
if(($imgWidth/$thumbWidth)>($imgHeight/$thumbHeight)){
$h=$thumbWidth/$imgWidth*$imgHeight;
}elseif(($imgWidth/$thumbWidth)<($imgHeight/$thumbHeight)){
$w=$thumbHeight/$imgHeight*$imgWidth;
}else{
$w=$thumbWidth;
$h=$thumbHeight;
}
break;
default:
//縮略圖尺寸不變，自動裁切圖片
if(($imgHeight/$thumbHeight)<($imgWidth/$thumbWidth)){
$cuthumbWidth=$imgHeight/$thumbHeight*$thumbWidth;
}elseif(($imgHeight/$thumbHeight)>($imgWidth/$thumbWidth)){
$cuthumbHeight=$imgWidth/$thumbWidth*$thumbHeight;
}
//}
}
$arr[0]=$w;
$arr[1]=$h;
$arr[2]=$cuthumbWidth;
$arr[3]=$cuthumbHeight;
return$arr;
}
/**
*圖片裁切處理
*@param$img原圖
*@paramstring$outFile另存文件名
*@paramstring$thumbWidth縮略圖寬度
*@paramstring$thumbHeight縮略圖高度
*@paramstring$thumbType裁切圖片的方式
*1固定寬度高度自增2固定高度寬度自增3固定寬度高度裁切
*4固定高度寬度裁切5縮放最大邊原圖不裁切6縮略圖尺寸不變，自動裁切最大邊
*@returnbool|string
*/
publicfunctionthumb($img,$outFile='',$thumbWidth='',$thumbHeight='',$thumbType=''){
if(!$this->check($img)){
returnfalse;
}
//基礎配置
$thumbType=$thumbType?$thumbType:$this->thumbType;
$thumbWidth=$thumbWidth?$thumbWidth:$this->thumbWidth;
$thumbHeight=$thumbHeight?$thumbHeight:$this->thumbHeight;
//獲得圖像信息
$imgInfo=getimagesize($img);
$imgWidth=$imgInfo[0];
$imgHeight=$imgInfo[1];
$imgType=image_type_to_extension($imgInfo[2]);
//獲得相關尺寸
$thumb_size=$this->thumbSize($imgWidth,$imgHeight,$thumbWidth,$thumbHeight,$thumbType);
//原始圖像資源
$func="imagecreatefrom".substr($imgType,1);
$resImg=$func($img);
//縮略圖的資源
if($imgType=='.gif'){
$res_thumb=imagecreate($thumb_size[0],$thumb_size[1]);
$color=imagecolorallocate($res_thumb,255,0,0);
}else{
$res_thumb=imagecreatetruecolor($thumb_size[0],$thumb_size[1]);
imagealphablending($res_thumb,false);//關閉混色
imagesavealpha($res_thumb,true);//儲存透明通道
}
//繪制縮略圖X
if(function_exists("imageresampled")){
imageresampled($res_thumb,$resImg,0,0,0,0,$thumb_size[0],$thumb_size[1],$thumb_size[2],$thumb_size[3]);
}else{
imageresized($res_thumb,$resImg,0,0,0,0,$thumb_size[0],$thumb_size[1],$thumb_size[2],$thumb_size[3]);
}
//處理透明色
if($imgType=='.gif'){
imagecolortransparent($res_thumb,$color);
}
//配置輸出文件名
$imgInfo=pathinfo($img);
$outFile=$outFile?$outFile:dirname($img).'/'.$this->thumbPreFix.$imgInfo['filename'].$this->thumbEndFix.".".$imgInfo['extension'];
Files::create(dirname($outFile));
$func="image".substr($imgType,1);
$func($res_thumb,$outFile);
if(isset($resImg))
imagedestroy($resImg);
if(isset($res_thumb))
imagedestroy($res_thumb);
return$outFile;
}
}
F. 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>
G. 怎麼在前端生成縮略圖，只上傳縮小後的圖片
需要瀏覽器支持html5。
用FileReader讀取本地文件，再用Image載入此文件並縮放繪制到canvas上。最後canvas.ToDataURL()取得縮放後文件的Base64編碼，將此編碼上傳到服務端，解碼為byte[]後，寫入文件。
H. HTML5設置圖片的大小
height=高
width=寬
僅設置一個瀏覽器會等比例縮放
I. 如何使用HTML5實現利用攝像頭拍照上傳功能
一，直接上可以代碼參考下：
<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;
}
}