JavaScript 与 图片

在 HTML 文档中 <input type="file"> 标签每出现一次，一个 FileUpload 对象就会被创建。

upfiledom.value 获取路径

var files = upfiledom.files[0];获取文件

files.type 获取文件类型

files.size 文件大小

HTML5读取文件核心代码

var reader = new FileReader();

reader.readAsDataURL(files);

reader.onload = function (){

  

var image = new Image();

image.onload = function(){  给image的src赋值加载完成之后自动执行此方法

    var newcanvas = document.createElement("canvas");//创建canvas

    newcanvas.style.display = "none";

    var bodys = document.body;

    bodys.appendChild(newcanvas);

    var ctx = newcanvas.getContext("2d");//canvas上下文

    newcanvas.width = width;  //缩放之后的宽和高

    newcanvas.height = height;

    ctx.fillStyle = "#FFFFFF";   //

    ctx.fillRect(0, 0, width, height);  //整个canvas填充为白色

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

    //drawImage方法有必要解释一下，前面两个0表示从image的左上点开始截取，截取的宽高就是

    this.width,this.height。后面的两个0表示截取之后画在canvas的左上点位置，width和height

    表示要画的宽高，如果这个宽高比前面的宽高大，那么相当于放大了，反之就是缩小。说白了这

    个方法就是先从image截取一部分或全部，然后画在canvas上，不一定是等比例。

    var DATA64 = newcanvas.toDataURL(type, 0.9);//canvas转图片 质量为0.9 类型为type

    //这个DATA64和那个reader.result格式是一样的，内容不一样罢了，都可以赋值给image.src

     还有，这个结果是base64编码的，后面需要atob解码

    split1 = 把DATA64去掉头部信息  逗号及其之前的信息 "^data:.*base64,"

    byteString = atob(splits1);//base64解码

    var byteStringlength = byteString.length, ia = new Uint8Array(byteStringlength);//无符号8位整型

    for (var i = 0; i < byteStringlength; i++) {

         ia[i] = byteString.charCodeAt(i);//转成字符的Unicode编码

       }

    此时ia为不超过255（也就是8位）的数字的数组，长度是byteStringlength

    return new Blob([ ia ], {type:this.ImagesType}); //用ia创建Blob对象返回

    this_.BOLBID = this_.URL.createObjectURL(this_.FormBlob(DATA64));//创建指向这个Blob的URL

    //而且这个URL可以当赋值给image.src

    

  }

image.src = this.result  这就是图片文件读取的结果，然后下面处理

}

ajax注意下 FormData()