优秀的编程知识分享平台

网站首页 > 技术文章 正文

使用JS把图片压缩并转成Base64的简便方法

nanyue 2024-09-10 16:14:02 技术文章 7 ℃

整个过程用到了画布(canvas)来帮忙完成

过程: 选择图片文件 > 准备画布 > 按需压缩图片并绘制在画布上 > 生成Base64 > 完成.

先上效果图

详细过程如下:

准备一个简洁的HTML文件, 代码如下

用一个file dom来选择图片文件

<!DOCTYPE html>
<html lang="zh-CN">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <body>
        <input name="file" id="thumbnail" type="file" onchange="previewPic(this)"
            accept="image/x-png, image/jpg, image/jpeg, image/gif" />
    </body>
</html>

为了方便后面的代码操作, 引用了JQuery

然后准备2个容器, 一个放预览图; 另一个放Base64内容

<div>下面这个Div用来预览图片</div>
<div id="showpic" style="padding:7px;"></div>

<div>下面这个Div用来存放Base64内容</div>
<div id="picb64"></div>

接下来是灵魂:JS代码

            function previewPic(tis) {
                var fileObj = tis.files[0];         //获取图片文件对象
                if (undefined == fileObj) { console.log("未选择待上传的文件"); return; }
                var picid = "imgComp";
                $("<img>", {
                    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方法里可以把设置宽和高的代码换成原图参数即可

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <style>
        #picb64{width: 95%;height: 300px;overflow-wrap: break-word;overflow: auto;margin: auto;background-color: #676767;border-radius: 10px;}
    </style>
    <body>
        <input name="file" id="thumbnail" type="file" onchange="previewPic(this)"
            accept="image/x-png, image/jpg, image/jpeg, image/gif" />

        <div>下面这个Div用来预览图片</div>
        <div id="showpic" style="padding:7px;"></div>
        <div>下面这个Div用来存放Base64内容</div>
        <div id="picb64"></div>

        <script>
            function previewPic(tis) {
                var fileObj = tis.files[0];         //获取图片文件对象
                if (undefined == fileObj) { console.log("未选择待上传的文件"); return; }
                var picid = "imgComp";
                $("<img>", {
                    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>
    </body>
</html>

扩展应用: 可以利用压缩后再上传来节省带宽


本期分享就酱紫, 下期再见[看]

复杂的问题简单化

每次只关注一个知识点

对技术有兴趣的小伙伴可以关注我, 以后会经常分享各种奇奇怪怪又实用的技术知识

Tags：

猜你喜欢

最近发表
标签列表