filereader壓縮圖片_怎麼用JavaScript在線壓縮圖片

A. html5怎樣調用手機攝像頭或者相冊


<h2class="title-detail">
圖片描述
</h2>
<inputtype="hidden"id="picIndex"value="0">
<divid='image-list'class="rowimage-list">
<!--<inputid="upload_image"type="file"name="image"accept="image/*"/>-->
<divclass="image-itemspace"onclick="showActionSheet()">
<divclass="image-up"></div>
</div>
</div>

functionshowPics(url,name){
//根據路徑讀取到文件
plus.io.resolveLocalFileSystemURL(url,function(entry){
entry.file(function(file){
varfileReader=newplus.io.FileReader();
fileReader.readAsDataURL(file);
<spanstyle="white-space:pre"></span>fileReader.onloadend=function(e){
varpicUrl=e.target.result.toString();
varpicIndex=$("#picIndex").val();
varnowIndex=parseInt(picIndex)+1;
$("#picIndex").val(nowIndex);
varhtml='';
html+='<divclass="image-item"id="item'+nowIndex+'">';
html+='<divclass="image-close"onclick="delPic('+nowIndex+')">X</div>';
html+='<div><imgsrc="'+picUrl+'"class="upload_img"style="width:100%;height:100%;"/></div>';
html+='</div>';
html+=$("#image-list").html();
$("#image-list").html(html);
<spanstyle="white-space:pre"></span>}
});
});
}
//壓縮圖片
functioncompressImage(url,filename){
varname="_doc/upload/"+filename;
plus.zip.compressImage({
src:url,//src:(String類型)壓縮轉換原始圖片的路徑
dst:name,//壓縮轉換目標圖片的路徑
quality:40,//quality:(Number類型)壓縮圖片的質量.取值范圍為1-100
overwrite:true//overwrite:(Boolean類型)覆蓋生成新文件
},
function(zip){
//頁面顯示圖片
showPics(zip.target,name);
},function(error){
plus.nativeUI.toast("壓縮圖片失敗，請稍候再試");
});
}

//調用手機攝像頭並拍照
functiongetImage(){
varcmr=plus.camera.getCamera();
cmr.captureImage(function(p){
plus.io.resolveLocalFileSystemURL(p,function(entry){
compressImage(entry.toLocalURL(),entry.name);
},function(e){
plus.nativeUI.toast("讀取拍照文件錯誤："+e.message);
});
},function(e){
},{
filter:'image'
});
}
//從相冊選擇照片
functiongalleryImgs(){
plus.gallery.pick(function(e){
varname=e.substr(e.lastIndexOf('/')+1);
compressImage(e,name);
},function(e){
},{
filter:"image"
});
}

//點擊事件，彈出選擇攝像頭和相冊的選項
functionshowActionSheet(){
varbts=[{
title:"拍照"
},{
title:"從相冊選擇"
}];
plus.nativeUI.actionSheet({
cancel:"取消",
buttons:bts
},
function(e){
if(e.index==1){
getImage();
}elseif(e.index==2){
galleryImgs();
}
}
);
}

首先是html代碼，很簡單，就是給一個添加按鈕，點擊觸發事件

其次方法共分為5個方法看第二段JS代碼

B. 瀏覽器不支持filereader對象怎麼辦

FileReader對象配合 FormData對象就可以完成一個體驗很好的圖片上傳功能。不過這兩個對象都是 HTML5新增的，兼容性不是很高，目前還比較時候用來做內部系統或者網站後台。

C. 我本來想用FileReader類和FileWriter類實現圖形文件的復制。但這個程序並不能實現圖形的復制。

建議看一下apache FileUtils.File的源碼，是可以圖片的，你說的的圖形文件是圖片吧？

public class CopyFile {
public static void doCopyFile() throws IOException{
File srcFile = new File("e:\\test.jpg");
File destFile = new File("e:\\demo\\test.jpg");
FileInputStream input = new FileInputStream(srcFile);
try {
FileOutputStream output = new FileOutputStream(destFile);
try {
byte[] buffer = new byte[4096];
int n = 0;
while (-1 != (n = input.read(buffer))) {
output.write(buffer, 0, n);
}
} finally {
try {
if (output != null) {
output.close();
}
} catch (IOException ioe) {
// ignore
}
}
} finally {
try {
if (input != null) {
input.close();
}
} catch (IOException ioe) {
// ignore
}
}
}

}

D. oppo R9 是否支持js fileReader

你好，FileReader對象的readAsDataURL方法可以將讀取到的文件編碼成Data URL。Data URL是一項特殊的技術，可以將資料(例如圖片)內嵌在網頁之中，不用放到外部文件。使用Data URL的好處是，您不需要額外再發出一個HTTP 請求到伺服器端取得額外的資料；而缺點便是，網頁的大小可能會變大。它適合應用在內嵌小圖片，不建議將大圖像文件編碼成Data URL來使用。您的圖像文件不能夠超過瀏覽器限定的大小，否則無法讀取圖像文件。

E. java如何使用文件字元輸入流FileReader

文件字元輸入流與文件位元組輸入流的功能相似，但是傳送數據的方式不一樣，位元組流以位元組為單位傳送數據，可以使文本、視頻、音頻、圖片等。字元流以字元為單位傳送數據，只能傳送文本類型的數據。

創建字元輸入流常用的構造方法：

語法1：
new FileReader（File file）;12

語法2：
new FileReader(String path);

F. 怎麼用JavaScript在線壓縮圖片

主要用了兩個html5的 API，一個file，一個canvas，壓縮主要使用cnavas做的，file是讀取文件，之後把壓縮好的照片放入內存，最後內存轉入表單下img.src，隨著表單提交。
照片是自己用單反拍的，5M多，壓縮下面3張分別是600多kb，400多kb，300kb的最後那張失真度很大了，壓縮效率蠻高的。

<!DOCTYPE html>
<html><head> <meta charset="utf-8"/> <title>File API Test</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/JIC.js"></script> <style> #test{ display: none; } </style></head><body><input type="file" id="fileImg" ><form> <img src="" id="test" alt=""></form><script> function handleFileSelect (evt) { // var filebtn = document.getElementById(id); // console.log(filebtn); // var files = filebtn.target.files; // console.log(filebtn.target); // console.log(files); var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. // console.log(evt.target.files[0]); // console.log(e.target); console.log(e.target.result); var i = document.getElementById("test"); i.src = event.target.result; console.log($(i).width()); console.log($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); console.log($(i).width()); console.log($(i).height()); var quality = 50; i.src = jic.compress(i,quality).src; console.log(i.src); i.style.display = "block"; }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);</script></body></html>

var jic = { /** * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed * @param {Image} source_img_obj The source Image Object * @param {Integer} quality The output quality of Image Object * @return {Image} result_image_obj The compressed Image Object */ compress: function(source_img_obj, quality, output_format){ var mime_type = "image/jpeg"; if(output_format!=undefined && output_format=="png"){ mime_type = "image/png"; } var cvs = document.createElement('canvas'); //naturalWidth真實圖片的寬度 cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality/100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; }, function ****(***)

G. php、HTML5上傳圖片自動壓縮問題

給你個圖片處理的類吧，圖片剪裁處理後，也就等於將圖片壓縮了。

/**
*圖像處理類
*============================================================================
*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;
}

}

導航:首頁 > 文件處理 > filereader壓縮圖片

filereader壓縮圖片

與filereader壓縮圖片相關的資料