js实现浏览器批量压缩图片原理及代码解析
原理很简单,就是通过file获取图片,然后创建一个canvas画布,将图片按照画布的尺寸填充进去就实现了图片的压缩
var file = document.getElementById("file").files[0]; var reader = new FileReader(); //将文件以Data URL形式读入页面 reader.readAsDataURL(file); reader.BfwOnload= function(e) { let img= new Image(); image.src = e.target.result; }
压缩图片
var canvas = document.createElement('canvas'); var cBfwOntext= canvas.getContext('2d'); canvas.width = 400; canvas.height = 300; // 核心JS就这个 context.drawImage(img,0,0,400,300);通过canvas.toDataURL来生成图片
canvas.toDataURL(mimeType, qualityArgument)其中:mimeType表示canvas导出来的base64图片的类型,默认是png格式,也即是默认值是'image/png',我们也可以指定为jpg格式'image/jpeg'或者webp等格式。file对象中的file.type就是文件的mimeType类型,在转换时候正好可以直接拿来用(如果有file对象)。
下面我们来看看完整的html代码,可以直接运行的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { document.getElementById("file").onchange= function() { var file = document.getElementById("file").files[0]; var reader = new FileReader(); //将文件以Data URL形式读入页面 reader.readAsDataURL(file); reader.onload= function(e) { console.log(e.target.result); let img = new Image(); img.src = e.target.result; var canvas = document.createElement('canvas'); var cBfwOntext= canvas.getContext('2d'); canvas.width = 200; canvas.height = 100; // 核心JS就这个 context.drawImage(img, 0, 0, 200, 100); let newimg = canvas.toDataURL(); console.log(newimg); document.getElementById("preview").innerHTML = "<img src='"+newimg+"' />"; } } }); </script> </head> <body> <input type="file" id="file" />选择原图 下面看到的是压缩成宽度200 高度100的图片 <div id="preview"> </div> </body> </html>ok,今天就讲到这了
网友评论0