首页 > 其他分享 >JS把base64压缩后处理为base64

JS把base64压缩后处理为base64

时间:2023-12-11 16:22:34浏览次数:30  
标签:originWidth canvas targetHeight originHeight base64 后处理 var JS

重点参考了这篇文章:前端JS利用canvas的drawImage()对图片进行压缩  : https://www.cnblogs.com/goloving/p/8260206.html

其实是AI ChatGPT帮忙整理的,我用过觉得好,现在记录下来:

//把base64压缩后处理为base64
        function compressBase64Image(base64Data, maxWidth, maxHeight, callback) {
            var img = new Image();
            img.onload = function() {
                var originWidth = this.width;
                var originHeight = this.height;

                var targetWidth = originWidth;
                var targetHeight = originHeight;

                if (originWidth > maxWidth || originHeight > maxHeight) {
                    if (originWidth / originHeight > maxWidth / maxHeight) {
                        targetWidth = maxWidth;
                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                    } else {
                        targetHeight = maxHeight;
                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                    }
                }

                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                context.clearRect(0, 0, targetWidth, targetHeight);
                context.drawImage(img, 0, 0, targetWidth, targetHeight);

                var compressedBase64Data = canvas.toDataURL('image/jpeg'); //返回结果BASE64
                callback(compressedBase64Data); //接下来要进行的数据处理
            };

            img.src = base64Data;
        }

 

 使用方法可以参考以下的示例代码片段:

            var reader = new FileReader();
                    reader.readAsDataURL(file); //把上传的file转BASE64
                    console.log();
                    reader.onload = function(e) {
                        //方法:上传压缩图片
                        var base64Data = e.target.result;
                        compressBase64Image(base64Data, 1000, 1000, function(compressedBase64Data) {
                            // 在这里处理压缩后的 base64 图像数据
                            //console.log(compressedBase64Data);
                            array.push(compressedBase64Data);
                            // 如果所有图片都被处理完毕,上传到Redis
                            if (array.length === filesLen) {
                                //图片ajax上传
                                postMultiToRedis(array);
                            } 
                        });

 

标签:originWidth,canvas,targetHeight,originHeight,base64,后处理,var,JS
From: https://www.cnblogs.com/harryglory/p/17894714.html

相关文章

  • 【APP小程序】微信小程序包解密+加解密算法JS逆向
    简介现如今大部分微信小程序抓包看到的数据均是加密的,无法通过常规的业务抓包进行测试,现通过对微信小程序包进行解密,获取到微信小程序源码对加解密算法进行分析。微信小程序解密小程序包默认路径:C:\Users\Administrator\Documents\WeChatFiles\Applet如不知道哪个是需要测试......
  • js Object常用的方法
    Object.keys(obj)Object.keys(obj):返回对象自身所有可枚举属性的键名数组处理对象,返回可枚举的键数组constobject1={a:'somestring',b:42,c:false};console.log(Object.keys(object1));//结果:Array["a","b","c"]处理数组和字符串,返回索引值数组......
  • js判断文件类型详解
    js判断文件类型详解通过file的type属性判断<inputtype="file"onchange="onchangecb(this)"/><script>functiononchangecb(e){constfile=e.files[0];console.log(file.type);}</script>像html中input标签,就是根据选择......
  • cesiumjs 点云
       用于提高细节细化级别的最大屏幕空间错误。该值有助于确定瓦片何时细化到其子代,因此在平衡性能和视觉质量方面发挥着重要作用。瓦片的屏幕空间误差大致相当于如果在瓦片的位置渲染半径等于瓦片几何误差的球体,则绘制的像素宽度。如果此值超过maximumScreenSpaceError......
  • quickjs集成http功能
    零、前言默认的quickjs,是js引擎,需要自己移植类似curl库,才能使quickjs有http请求功能。js引擎+一些本地功能调用=js运行时。一、libcurl库这个库的安装或编译,也是比较麻烦的事情,特别是需要使其支持https访问,配置和编译更是麻烦。因此,还是使用上次提到的vcpkg。通过vcpkg......
  • JS(JavaScript)-事件-Event事件
     1.介绍:事件就是可以被JS侦测到的行为。用户操作鼠标或键盘后,触发了JS事件,然后产生相应机制。 三要素:事件源:事件被触发的对象,就是谁触发了这个事件;事件类型:如何触发,什么事件;比如:鼠标点击,键盘按下事件处理程序:通过一个函......
  • moment.js
    //!moment.js//!version:2.29.4//!authors:TimWood,IskrenChernev,Moment.jscontributors//!license:MIT//!momentjs.com(function(global,factory){typeofexports==="object"&&typeofmodule!=="undefined"......
  • verifyCode.js
    functionGVerify(options){//创建一个图形验证码对象,接收options对象为参数this.options={//默认options参数值id:"",//容器IdcanvasId:"verifyCanvas",//canvas的IDwidth:"80",//默认canvas宽度height:"30",//默......
  • 232-父级div,包含子div,子div有点击事件,父div有点击事件,js如何实现,2个点击事件不干扰
    HTML结构<divid="parent"><divid="child"></div></div>JavaScript/jQuery代码:$(document).ready(function(){//父级div的点击事件处理程序$('#parent').on('click',function(){console.log(&#......
  • js获取当前页面域名判断跳转网址输出不同内容
    js代码可以实现一些html语言无法实现的功能,比如通过js代码获取当前访问的域名。通过js代码判断当前访问域名可以进行跳转等功能。js获取当前页面域名判断跳转网址代码:<scripttype="text/javascript"> host=window.location.host;if(host=="www.adminwl.com") { window.loca......