JS图片压缩预览/下载

栏目: Html5 · 发布时间: 5年前

内容简介:好像没啥好说的~压缩后上传的操作,这里就不写了,百度下blob如何生成file上传即可。

前言

好像没啥好说的~

大概做法

  • 先由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);
        };  
    };

效果预览

JS图片压缩预览/下载

后语

压缩后上传的操作,这里就不写了,百度下blob如何生成file上传即可。


以上所述就是小编给大家介绍的《JS图片压缩预览/下载》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大学的终结

大学的终结

[美] 凯文·凯里(Kevin Carey) / 朱志勇、韩倩 / 人民邮电出版社 / 2017-2-28 / 59.00

你了解目前全球高等教育的现状吗?你知道高等教育的未来是什么样的吗?你听说过泛在大学吗?翻开本书,了解大学的过去、现在与未来。 《大学的终结:泛在大学与高等教育革命》一书由美国著名教育作家凯文? 凯里倾情打造。作者在书中详细论述了美国大学的历史变迁、大学的本质、大学的未来、信息技术与教育的关系、泛在大学的定义、传统大学在大趋势下的挣扎,以及未来高等教育的学历认证与呈现形式。本书作者用缜密的逻辑......一起来看看 《大学的终结》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具