上传图片及预览方法总结

我们上传文件时可以直接使用<input type="file">实现上传功能,然而在实际项目开发中可能需要其他的上传方式,比如先将图片上传到OSS中,然后获取到图片地址,最后再提交表单入库

首先我们看FileReader()这个方法
这个方法的描述:
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容

当我们使用input获取图片后回显,其中FileReader对象中的方法readAsDataURL()读取指定的 Blob或File对象,读取操作完成的时候,readyState会变成已完成(DONE),并触发loadend事件

<form action="">
    <input type="file" id="upBtn" name="">
    <img src="" id="preview">
</form>
<script type="text/javascript">
        $('#upBtn').on("change", function() {

            if(this.files.length === 0) { return; }
            var file = this.files[0];
            //验证图片文件
            rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

            if (!rFilter.test(file.type)) { alert("You must select a valid image file!"); return; }

            var reader = new FileReader();
            reader.onload = function(event) {
                var src = event.target.result;
                $('#preview').attr("src", src);
            }
            if(this.files && this.files[0]) {
                reader.readAsDataURL(file); 
            }
        })
    </script>

我们再看这三种方法toBlob(), toDataURL(), getImageData()
这三种方法需要使用canvas,首先我们先建立一个canvas画布

<canvas id="canvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>

<script type="text/javascript">
    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.src = "./images/head.png";
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
    }
</script>

我们在建立画布的时候回遇到这样几个问题:

• 需要引用服务器中图片
• 跨域问题
• onload问题

我们这里引用本地的绝对路径时没法显示图片,如果你的文件是file:///开头的也没法引入图片,因为我使用的是fis3,所以会自动打开一个服务器

跨域问题没找到解决的方法,貌似只靠前端是没法解决的

先看看toBlob()方法
这里的onload事件内部执行canvas.toBlob()方法时可以的所以我们img.onload的代码需要改成这样

img.onload = function() {
  ctx.drawImage(img, 0, 0);

   //这段代码放外面时图片没法加载
  canvas.toBlob(function(blob) { 
    var newImg = document.createElement("img"),
    url = URL.createObjectURL(blob);

    newImg.onload = function() {
        //释放一个之前通过调用URL.createObjectURL()创建的已经存在的 URL 对象。
        URL.revokeObjectURL(url);
    };

    console.log(url); //blob:http://XXX/38a1135b-812e-4ab6-823c-cd0162662ff6
    newImg.src = url;
    document.body.appendChild(newImg);
  })
}

toBlob()默认生成png,如果需要生成jpeg需要改变第二个参数

canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG 图片质量95%

这里生成的blob在前端做显示图片挺好用,但是往后台传输图片数据没法传递,要靠base64传递

createObjectURL()方法也可以显示input type="file"要上传的图片

<input type="file" id="file">

$('#file').on('change', function() {
    var file = this.files[0];
    var url = URL.createObjectURL(file);
    $('#img').attr('src', url);
})

再看看toDataURL()方法
它的使用方法和toBlob类似,不过最后生成的是base64的二进制码,可以将其传至后台做图片存储用

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL();
    console.log(dataURL);//data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQA...省略一堆字符串
}

这里没法转input上传的图片

最后看看getImageData()
这个方法获取到一个指定范围(x,y,宽,高)的像素信息,这里不详细介绍,只要知道这个方法也是没法获取受污染画布的信息的

参考文件
FileReader() https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
toBlob() https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
toDataURL() https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
getImageData() https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/getImageData
启用了 CORS 的图片 https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image