整个过程用到了画布(canvas)来帮忙完成
过程: 选择图片文件 > 准备画布 > 按需压缩图片并绘制在画布上 > 生成Base64 > 完成.
先上效果图
详细过程如下:
准备一个简洁的HTML文件, 代码如下
用一个file dom来选择图片文件
<script type="text/javascript" src="../js/jquery.min.js"></script>
为了方便后面的代码操作, 引用了JQuery
然后准备2个容器, 一个放预览图; 另一个放Base64内容
下面这个Div用来预览图片
下面这个Div用来存放Base64内容
接下来是灵魂:JS代码
function previewPic(tis) {
var fileObj = tis.files[0]; //获取图片文件对象
if (undefined == fileObj) { console.log("未选择待上传的文件"); return; }
var picid = "imgComp";
$("![]()
", {
id: picid,
}).appendTo($("#showpic")); //先生成IMG的DOM,以防顺序乱掉
genCompPic(picid, fileObj);
}
function genCompPic(picid, fileObj) {
var ready = new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(fileObj);
ready.onload = function () {
canvasDataURL(this.result, { width: 200 }, function (base64Codes) {
$("#"+ picid).attr("src", base64Codes); //在IMG DOM中显示图片预览
$("#picb64").html(base64Codes); //得到Base64结果,填充到Div中显示
})
}
}
//利用canvas生成压缩后的图片
function canvasDataURL(path, obj, callback) {
var img = new Image();
img.src = path;
img.onload = function () {
var w = obj.width;
var h = obj.width / (this.width/ this.height); //按比例压缩,计算出等比例高
var canvas = document.createElement('canvas'); //生成canvas
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw); //设置图片宽
canvas.setAttributeNode(anh); //设置图片高
ctx.drawImage(this, 0, 0, w, h); //绘制图片
var quality = 1; // 图片质量为0.1~1, quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality); //利用canvas生成Base64
callback(base64); // 回调函数返回base64的值
}
}虽然有点长, 不过关键位置都写上注释了, 大家可以参考使用
如果不想压缩图片, 在canvasDataURL方法里可以把设置宽和高的代码换成原图参数即可
完整代码
<script type="text/javascript" src="../js/jquery.min.js"></script>
下面这个Div用来预览图片
下面这个Div用来存放Base64内容
<script>
function previewPic(tis) {
var fileObj = tis.files[0]; //获取图片文件对象
if (undefined == fileObj) { console.log("未选择待上传的文件"); return; }
var picid = "imgComp";
$("![]()
", {
id: picid,
}).appendTo($("#showpic")); //先生成IMG的DOM,以防顺序乱掉
genCompPic(picid, fileObj);
}
function genCompPic(picid, fileObj) {
var ready = new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(fileObj);
ready.onload = function () {
canvasDataURL(this.result, { width: 200 }, function (base64Codes) {
$("#"+ picid).attr("src", base64Codes); //在IMG DOM中显示图片预览
$("#picb64").html(base64Codes); //得到Base64结果,填充到Div中显示
})
}
}
//利用canvas生成压缩后的图片
function canvasDataURL(path, obj, callback) {
var img = new Image();
img.src = path;
img.onload = function () {
var w = obj.width;
var h = obj.width / (this.width/ this.height); //按比例压缩,计算出等比例高
var canvas = document.createElement('canvas'); //生成canvas
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw); //设置图片宽
canvas.setAttributeNode(anh); //设置图片高
ctx.drawImage(this, 0, 0, w, h); //绘制图片
var quality = 0.8; // 图片质量为0.1~1, quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality); //利用canvas生成Base64
callback(base64); // 回调函数返回base64的值
}
}
</script>
扩展应用: 可以利用压缩后再上传来节省带宽
本期分享就酱紫, 下期再见
复杂的问题简单化
每次只关注一个知识点
对技术有兴趣的小伙伴可以关注我, 以后会经常分享各种奇奇怪怪又实用的技术知识