JS实现Base64编码

最新推荐文章于 2024-06-17 14:29:33 发布

是落落呢

最新推荐文章于 2024-06-17 14:29:33 发布

阅读量4.5k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_46104664/article/details/125715471

版权

FileReader canvas Base64编码图片压缩 HTML5

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

/**
         *  1.0  FileReader
         */
        
        // let img = document.querySelector("input");
        //     img.onchange = function(e){
        //         let file = this.files[0];
        //         imgToBase64(file,show);
        //     }
        function imgToBase64(file,callback){
            let f = new FileReader();
            f.readAsDataURL(file);
            f.onload = function(){
                let base64 = f.result;
                callback.call(this,base64)
            }
        }

        function show(code) {
            console.log('size:'+code);
            document.querySelector('img').setAttribute('src',code);
        }


        /**
         *  2.0   canvas重绘
         *        可以压缩图片
         */
        function imgToBase64(url,callback){
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext("2d");
            let img = new Image();
            img.crossOrigin = 'Anonymous';
            img.src = url;
            img.onload = function () {
                console.log(url)
                canvas.height = this.height; //指定画板的高度,自定义
                canvas.width = this.width; //指定画板的宽度，自定义
                ctx.drawImage(img, 0, 0,this.width,this.height); //参数可自定义
                var dataURL = canvas.toDataURL("image/jpeg",1);
                callback.call(this, dataURL); //回掉函数获取Base64编码
                canvas = null;
            };
         }

         /**
          *  Base64.js
          */
         let code = $.base64.encode('223841');
         console.log('base64编码后:'+code);
         console.log('base64解码后:'+$.base64.decode(code));


         //imgToBase64('https://pics0.baidu.com/feed/3b292df5e0fe992518448ccedf8964d58cb17194.jpeg?token=a8af55e099d7507f313330013f84d5dc',show)