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压缩图片相关的资料