HTML5图片上传图片实时预览，通过DataURL将图片压缩“嵌入”到HTML中，优化图片的加载速度和执行效率。

HTML5图片上传图片实时预览，通过DataURL将图片压缩“嵌入”到HTML中，优化图片的加载速度和执行效率。

  传统的方式预览图片主要有两种方法：

①    先上传图片到服务器，服务器返回URL，再将URL放在img标签上来达到预览图片的目的。

优点：开发方便，原理简单，实现容易。

缺点：功能支持有限，需要先上传再下载图片，需要额外占用一个HTTP会话，中间很耗时耗流量。

②    通过FLASH控件来实现实时预览图片。

优点：能够实现本地预览、压缩图片后上传，能够支持早期IE浏览器。

缺点：需要安装Flash 控件，手机端不支持。

 

  通过DataURL实现本地图片预览：

     优点：

①     直接生成Base64图片编码，不需要引入外部资源，不占用额外连接。

②     由于不占用额外连接，图片加载速度很快。

③     几乎所有浏览器都支持。

④     dataURL和Blob对象可以互相转换，很方便图片上传。

 

   缺点：

①    DataURL形式的图片不会被浏览器所缓存，不过可以结合css一起使用，css资源文件是可以被浏览器缓存的。

②    很占CPU内存资源，不适合大量使用，可以在可接受的范围内适量使用。

③    不支持早期IE浏览器。

 

分析利弊，可以看出DataURL很适合做前端图片预览。

   代码实践：

      Html部分：

 …

<input  type="file"  accept="image/*"  id="fileImage"/>

…

<img id="preview" src=""/>

Js部分：

/**
 * Created by cjbi on 2017/8/21.
 */
//获取input document对象
  var fileInput = document.querySelector("#fileImage");
  //监听input改变事件
  fileInput.addEventListener("change", function (e) {
    //获取文件流
    var file = e.target.files[0];
    if (file) {
        //创建文件读取对象
        var reader = new FileReader();
        //创建图片对象
        var image = new Image(),
            //创建cavas对象
            canvas = document.createElement("canvas"),
            //获取2D绘图对象
            ctx = canvas.getContext('2d');
        //文件加载完成后执行执行
        reader.onload = function (e) {
            var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload
            image.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
        };
        //图片加载完成后执行执行
        image.onload = function () {
            var w = image.naturalWidth,//获取图片原始宽度
                h = image.naturalHeight;//获取图片原始高度
            canvas.width = 120;//cavas画板宽度
            canvas.height = 120;//cavas画板高度度
            // drawImage 参数说明：
            //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
            // 参数         描述
            // img         规定要使用的图像、画布或视频。
            // sx          可选。开始剪切的 x 坐标位置。
            // sy          可选。开始剪切的 y 坐标位置。
            // swidth      可选。被剪切图像的宽度。
            // sheight     可选。被剪切图像的高度。
            // x           在画布上放置图像的 x 坐标位置。
            // y           在画布上放置图像的 y 坐标位置。
            // width       可选。要使用的图像的宽度。（伸展或缩小图像）
            // height      可选。要使用的图像的高度。（伸展或缩小图像）
            ctx.drawImage(image, 0, 0, w, h, 0, 0, 200, 200);
            //展示预览图片
            document.querySelector("#preview").src = cavas.toDataURL();
        }
        reader.readAsDataURL(file);
    }
}, false);

选定图片上传，console观察img标签src属性变化：

<img id="preview" src="data:image/gif;base64,R0lGODlhAwADAIAAAP///..此处有省略…//8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7"/>

可以看出src属性生成了一串Base64编码，这就是DataURL形式的图片了。

DataURL如何转Blob对象：

其实File也是属于Blob对象，转换为Blob对象后，可以使用Ajax上传图像文件了。

/**
 * dataURL转换成Blob的方法 created by cjbi
 * @param dataURL
 * @returns {*}
 */
  function dataURLtoBlob(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});
}

总结：在这个例子中，DataURL的使用是完全符合场景的。它避免了让这个小小的预览图片独自产生一次次HTTP请求。而且用户体验上也上升了新的高度。