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()