我们上传文件时可以直接使用<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
