JS图片压缩预览/下载
前言
好像没啥好说的~
大概做法
- 先由filereader获取图片的base64,控制图片生成,但不显示。
- 然后将图片按比例设置好压缩后的宽高绘制在canvas画布上。
- 之后利用canvas的自带方法再次转换成base64,再对base64进行解码存储到数组缓存区,生成blob,然后创建下载链接就完了。
上代码,看注释就完了
//html <input type="file" id="file"> //这里选择图片 <canvas id="canvas"></canvas> //canvas画布
//js document.getElementById('file').onchange = function () { console.log(this.files[0]); //注意这个files是数组 reader.readAsDataURL(this.files[0]); var reader = new FileReader(); reader.onload = function (e) { //下面这三行就可以实现文件选择了图片以后,预览的功能,但是有些图片可能太大了影响页面观感,得统一缩小下。 //var img = new Image(); // img.src = e.target.result; // document.body.appendChild(img); render(e.target.result) //这个方法实现图片的压缩下载 } }
var MAX_H = 100; function render(src){ // 创建一个 Image 对象 var image = new Image(); // 设置src属性,加载图片内容,此时还未压缩 image.src = src; // 绑定 load 事件处理器,加载完成后执行 image.onload = function(){ // 获取 canvas DOM 对象 var canvas = document.getElementById("canvas"); // 如果高度超标 if(image.height > MAX_H) { // 宽度等比例缩放 *= image.width *= MAX_H / image.height; image.height = MAX_H; } // 获取 canvas的 2d 环境对象, 有些上古浏览器不支持canvas var ctx = canvas.getContext("2d"); // canvas清屏 ctx.clearRect(0, 0, canvas.width, canvas.height); // 把canvas宽高设置为图片宽高 canvas.width = image.width; canvas.height = image.height; // 将图像绘制到canvas上 //drawImage(img,startX,startY,endX,endY) ctx.drawImage(image, 0, 0, image.width, image.height); //将绘制好的canvas图像转为DataURL //toDataURL(图片类型,图片质量),这个图片质量越高就越清晰(相同宽高) //canvas.toDataURL 返回的默认格式就是 image/png var data = canvas.toDataURL('image/jpeg',0.5); //获取图片的dataUrl转成blob //这下面转blob的代码我也没搞懂,无百度了DataURL转blob就是这些代码了 data = data.split(',')[1]; data = window.atob(data); var ia = new Uint8Array(data.length); for (var i = 0; i < data.length; i++) { ia[i] = data.charCodeAt(i); }; var blob = new Blob([ia], { type: "image/jpeg" }); //生成blob文件的下载链接,把链接附在a便签上,把a便签加入dom中,点击就可以下载啦 var url3 = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url3; a.text = '测试图片'; a.download = 'mytest.jpg'; document.body.appendChild(a); }; };
效果预览
后语
压缩后上传的操作,这里就不写了,百度下blob如何生成file上传即可。
相关推荐
大地飞鸿 2020-11-12
星星有所不知 2020-10-12
jinxiutong 2020-07-26
MIKUScallion 2020-07-05
songfens 2020-07-05
songfens 2020-06-11
songfens 2020-06-08
northwindx 2020-05-31
northwindx 2020-05-31
northwindx 2020-05-27
northwindx 2020-05-25
MIKUScallion 2020-05-25
jinxiutong 2020-05-10
xdyangxiaoromg 2020-05-10
大地飞鸿 2020-05-06
northwindx 2020-04-25