JS图片压缩预览/下载

zhisheng 发布于2019-08-23 15:12 / 2950人阅读

摘要：上代码，看注释就完了这里选择图片画布注意这个是数组下面这三行就可以实现文件选择了图片以后，预览的功能，但是有些图片可能太大了影响页面观感，得统一缩小下。

前言

好像没啥好说的~

大概做法

先由filereader获取图片的base64，控制图片生成，但不显示。

然后将图片按比例设置好压缩后的宽高绘制在canvas画布上。

之后利用canvas的自带方法再次转换成base64，再对base64进行解码存储到数组缓存区，生成blob，然后创建下载链接就完了。

上代码，看注释就完了

//html
 //这里选择图片
 //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上传即可。

云服务器 GPU云服务器 js预览服务器图片 js:图片压缩 js压缩图片 js 对图片压缩

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101692.html

开箱即用-简洁实用的ImgURL图床相册程序和Zdir目录列表程序(文件管理器）

摘要：本篇文章就来分享一下两款开箱即用上手容易的图床相册程序和在线文件管理器目录列表程序，由好友开发并维护，非常适合个人站长用作图床相册和文件下载分享。虽然说现在照片还有文件存储等都可以上传到网盘中，但是国内的网盘与国外的网盘存储还有点不一样。以百度网盘与Dropbox对比为例，百度网盘顶多算是一个个人用来存放私人照片和文件的网络硬盘，如果用来分享的话很容易被百度限制或者取消下载。很多的个人站长为...

番茄西红柿 2021-07-30 14:58 评论0 收藏2637
gulp常用功能集合（开发和生产分离、静态资源压缩优化、代码优化、实时预览、hash）

摘要：在资源很多时，例如图片的复制，这个会加快任务的执行速度，特别是需要实时预览时，减少延迟。但是作为个入门短时间内还是不能够被取代得了的。 gulp常用功能集合（开发和生产分离、静态资源压缩优化、代码优化、实时预览、hash） tags: gulp 前端自动化开发 npm仓库下载地址https://www.npmjs.com/package/cddgulp [TOC]本人自用在此基础上的...

silvertheo 2019-08-20 14:39 评论0 收藏0
web图片上传时的一种本地压缩预览方案

摘要：简介本文结合实际项目场景，记录图片上传时的一种本地压缩预览解决方案。考虑到这些问题，决定采用本地图片进行预览。解决过程接下来说明将待上传的本地图片展示到界面中。这样就在前端实现了简单的图片压缩处理。简介本文结合实际项目场景，记录图片上传时的一种本地压缩预览解决方案。这里的本地预览是指，页面上的图片是读取的本机资源进行展示，而没有通过网络请求加载。实际的项目场景在这阵子的项目开发...

ytwman 2019-08-20 11:13 评论0 收藏0
PDF文件预览项目选型

摘要：文件预览项目选型文件在线预览有多种方式，目前使用较多的有种。中文支持较好，没有乱码问题。在线示例中文文档可以将转换成，并且可以在中精确显示原生文本包括在中的字体颜色位置，可以选择搜索复制等，可选单文件输出。缺点文件过大可能会出现浏览器卡死。 PDF文件预览项目选型 PDF文件在线预览有多种方式，目前使用较多的有3种：pdf2swf、pdf2image、pdf2html。这3种方式各有优...

Scott 2019-08-14 15:16 评论0 收藏0