javascript File Api

属性:

例子:

例子

效果

var filepath="D:\\Test\\文本1.txt"; var fso = new ActiveXObject("Scripting.FileSystemObject"); var file = fso.GetFile(filepath); dispay("DateCreated:"+file.DateCreated); dispay("DateLastAccessed:"+file.DateLastAccessed); dispay("DateLastModified:"+file.DateLastModified); dispay("Drive:"+file.Drive); dispay("Name:"+file.Name); dispay("ParentFolder:"+file.ParentFolder); dispay("Path:"+file.Path); dispay("ShortName:"+file.ShortName); dispay("ShortPath:"+file.ShortPath); dispay("Size:"+file.Size); dispay("Type:"+file.Type); function dispay(value){ document.write(value+"<br/>"); }

属性:Attributes

常数	值	描述
Normal	0	普通文件
ReadOnly	1	只读文件
Hidden	2	隐藏文件
System	4	系统文件
Volume	8	磁盘驱动器卷标
Directory	16	文件夹或目录
Artichive	32	文件在上次备份后已经修改
Alias	64	链接或者快捷方式
Compressed	128	压缩未见

例子:

        var filepath="D:\\Test\\文本2.txt";
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var file = fso.GetFile(filepath);
        document.write(file.attributes);

方法:

iomode:

format:

图片转换js （img对象，file对象，base64，canvas对象）,压缩图片

首先想一想我们有哪些需求？大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器；有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库；有时候后它还有可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的url地址，我们需要将它们压缩上传到远程；

1、 urltoImage(url,fn) 会通过一个url加载所需要的图片对象，其中 url 参数传入图片的 url , fn 为回调方法,包含Image对象的参数，代码如下：

function urltoImage (url,fn){

    var img = new Image();

    img.src = url;

    img.onload = function(){

        fn(img);

    }

};

2、 imagetoCanvas(image) 会将一个 Image 对象转变为一个 Canvas 类型对象，其中 image 参数传入Image对象，代码如下：

function imagetoCanvas(image){
    
    var cvs = document.createElement("canvas");

    var ctx = cvs.getContext('2d');

    cvs.width = image.width;

    cvs.height = image.height;

    ctx.drawImage(image, 0, 0, cvs.width, cvs.height);

    return cvs ;

};

3、 canvasResizetoFile(canvas,quality,fn) 会将一个 Canvas 对象压缩转变为一个 Blob 类型对象；其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量; fn 为回调方法包含一个 Blob 对象参数;代码如下：

function canvasResizetoFile(canvas,quality,fn){

    canvas.toBlob(function(blob) {

        fn(blob);

    },'image/jpeg',quality);

};
//这里的 Blob 对象表示不可变的类似文件对象的原始数据。 Blob 表示不一定是 JavaScript 原生形式
//的数据。 File 接口基于 Blob ，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。我们可以
//把它当做File类型对待，其他更具体的用法可以参考MDN文档

4、 canvasResizetoDataURL(canvas,quality) 会将一个 Canvas 对象压缩转变为一个 dataURL 字符串,其中 canvas 参数传入一个 Canvas 对象; quality 参数传入一个0-1的 number 类型，表示图片压缩质量;代码如下：

methods.canvasResizetoDataURL = function(canvas,quality){

    return canvas.toDataURL('image/jpeg',quality);

};
//其中的 toDataURL API可以参考MDN文档

5、 filetoDataURL(file,fn) 会将 File （ Blob ）类型文件转变为 dataURL 字符串,其中 file 参数传入一个 File （ Blob ）类型文件; fn 为回调方法，包含一个 dataURL 字符串的参数;代码如下：​​​​​​​

function filetoDataURL(file,fn){

var reader = new FileReader();

reader.onloadend = function(e){

fn(e.target.result);

};

reader.readAsDataURL(file);

};

6、 dataURLtoImage(dataurl,fn) 会将一串 dataURL 字符串转变为 Image 类型文件,其中 dataurl 参数传入一个 dataURL 字符串, fn 为回调方法，包含一个 Image 类型文件的参数，代码如下：

function dataURLtoImage(dataurl,fn){

var img = new Image();

img.onload = function() {

fn(img);

};

img.src = dataurl;

};

?

7、 dataURLtoFile(dataurl) 会将一串 dataURL 字符串转变为 Blob 类型对象，其中 dataurl 参数传入一个 dataURL 字符串,代码如下：​​​​​​​

function dataURLtoFile(dataurl) {

var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

while(n--){

u8arr[n] = bstr.charCodeAt(n);

}

return new Blob([u8arr], {type:mime});

};

三、进一步封装

对于常用的将一个 File 对象压缩之后再变为 File 对象,我们可以将上面的方法再封装一下，参考如下代码：

function fileResizetoFile(file,quality,fn){

    filetoDataURL (file,function(dataurl){

        dataURLtoImage(dataurl,function(image){

            canvasResizetoFile(imagetoCanvas(image),quality,fn);

        })

    })

}

其中， file 参数传入一个 File （ Blob ）类型文件； quality 参数传入一个 0-1 的 number 类型，表示图片压缩质量； fn 为回调方法，包含一个 Blob 类型文件的参数。

它使用起来就像下面这样：

下面看下JS等比压缩图片的办法

?​​

function proDownImage(path,imgObj) { // 等比压缩图片工具

    var proMaxHeight=300;

    var proMaxWidth = 175;

    var size = new Object();　

    var image = new Image();　

    image.src = path;　

    image.attachEvent("onreadystatechange",

    function() { // 当加载状态改变时执行此方法,因为img的加载有延迟

        if (image.readyState == "complete") { // 当加载状态为完全结束时进入

            if (image.width > 0 && image.height > 0) {

                var ww = proMaxWidth / image.width;

                var hh = proMaxHeight / image.height;　

                var rate = (ww < hh) ? ww: hh;

                if (rate <= 1) {　

                    alert("imgage width*rate is:" + image.width * rate);

                    size.width = image.width * rate;

                    size.height = image.height * rate;

                } else {
    
                    alert("imgage width is:" + image.width);　　

                    size.width = image.width;　　

                    size.height = image.height;　　　

                }　

            }

        }

    imgObj.attr("width",size.width);

    imgObj.attr("height",size.height);

});

}

参考链接https://blog.csdn.net/twtcqw2008/article/details/80766914