js压缩base64图片

这篇具有很好参考价值的文章主要介绍了js压缩base64图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天试了用js把base64编码格式的图片进行压缩,记录一下:

base64图片转换地址 

base64图片转换网址

 代码如下

js:

$(document).ready(function(){

  compressImg(targetObj.src, 0.5, useImg, targetObj)
});


let targetObj = {

    // base64字符串 太大了,删掉了,可以自己替换
  src: ''
}
function compressImg (base64, multiple, useImg, targetObj) {
  // 第一个参数就是需要加密的base65,
  // 第二个是压缩系数 0-1,
  // 第三个压缩后的回调 用来获取处理后的 base64
  if (!base64) {
    return
  }
  // const _this = this
  const length = base64.length / 1024
  // 压缩方法
  let newImage = new Image()
  let quality = 0.6    // 压缩系数0-1之间
  newImage.src = base64
  newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要
  let imgWidth,
      imgHeight
  let w = undefined
  newImage.onload = function () {
    // 这里面的 this 指向 newImage
    // 通过改变图片宽高来实现压缩
    w = this.width * multiple
    imgWidth = this.width
    imgHeight = this.height
    let canvas = document.createElement('canvas')
    let ctx = canvas.getContext('2d')
    if (Math.max(imgWidth, imgHeight) > w) {
      if (imgWidth > imgHeight) {
        canvas.width = w
        // 等比例缩小
        canvas.height = w * (imgHeight / imgWidth)
      } else {
        canvas.height = w
        // 等比例缩小
        canvas.width = w * (imgWidth / imgHeight)
      }
    } else {
      canvas.width = imgWidth
      canvas.height = imgHeight
      // quality 设置转换为base64编码后图片的质量,取值范围为0-1  没什么压缩效果
      // 还是得通过设置 canvas 的宽高来压缩
      quality = 0.6
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.drawImage(this, 0, 0, canvas.width, canvas.height) //  // 这里面的 this 指向 newImage
    let smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句
    // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间,请加以下语句,quality初始值根据情况自定
    // while (smallBase64.length / 1024 > 150) {
    // quality -= 0.01;
    // smallBase64 = canvas.toDataURL("image/jpeg", quality);
    // }
    // 防止最后一次压缩低于最低尺寸,只要quality递减合理,无需考虑
    // while (smallBase64.length / 1024 < 50) {
    // quality += 0.001;
    // smallBase64 = canvas.toDataURL("image/jpeg", quality);
    // }

    // 必须通过回调函数返回,否则无法及时拿到该值,回调函数异步执行
    console.log(`压缩前:${length}KB`)
    console.log(`压缩后:${smallBase64.length / 1024} KB`)


    useImg(smallBase64, targetObj)
  }
}
function useImg (base64, targetObj) {
  // targetObj 通过值引用的特性  用处理后的 base64 覆盖 处理前的 base63
  console.log('压缩后的 base64 :', base64)
  $("#img").attr("src",  base64);
  targetObj.src = base64
}


html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
<script src="jquery-3.7.0.min.js"></script>
<script type="text/javascript" src="my.js"></script>
</head>

<body>
     <h1>测试</h1>
    <img id="img" src="">
</body>
</html>

测试效果

js压缩base64图片,工作中,javascript,前端,开发语言

 压缩包已经上传资源包中,有需要可以下载,下完即用文章来源地址https://www.toymoban.com/news/detail-524970.html

到了这里,关于js压缩base64图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript 图片url地址转base64

    目录 前言 一、图片地址转base64 记录来自于每一次的实际需求; 此次需要做的是将拿到的图片,转png格式下载,看了下数据库返回的地址,有png、svg、jpg格式,我的想法是先通通转base64,再处理成png下载。 1、先定义一个方法  2、存储返回的base64,并转为png格式下载

    2024年02月16日
    浏览(41)
  • 前端实现图片转Base64

    废话不多说,直接上代码 我们传入一个图 片地址看看是否成功  但是,一般我们在做这样的需求前,处理的图片肯定不止一张,接下来就要批量处理,但是这个方法是异步,我们要将一个数组内的每个对象的地址都转成base64,才算真正完成我们的功能。前端一般接收到后端的

    2024年02月05日
    浏览(45)
  • 前端 base64与图片相互转换

    base64转图片 如下图:(后端返回的数据) base64转换图片文件 图片(url)转换base64 便捷的图片转化base64 利用 Chrome 浏览器,在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码

    2024年02月12日
    浏览(53)
  • c# .net linux ImageSharp+FastDFS+Base64上传图片,压缩图片大小,图像处理dcoker中使用也可以

    .net 以前是用System.Drawing来处理图片,但是在dcoker 、linux上用不了 微软官方推荐用 1、SkiaSharp 如果项目运行到docker里,需要NUGET安装SkiaSharp.NativeAssets.Linux.NoDependencies 注意:如果你同时引用SkiaSharp.NativeAssets.Linux和SkiaSharp.NativeAssets.Linux.NoDependencies 可能会导致docker中运行报错,

    2024年02月07日
    浏览(48)
  • Java 图片渲染到前端,向前端一次返回多张Base64图片

    当我们从服务器读取的图片链接返回给前端,前端可以很轻松的下载和展示,但是对于临时文件,我们不需要保存到服务器,比如PPT转图片,PDF转图片等等,我们需要直接返回给前端,对于一张图片可以使用flush()渲染到前端,多张图片可以把图片编码成Base64,并存储到数组中

    2024年02月09日
    浏览(43)
  • js将图片转base64两种方法

    第一种:Image + canvas 第二种:xhr + FileReader

    2024年02月11日
    浏览(49)
  • 前端获取本地图片并且转化为base64格式

    今天看见网上各位大佬五花八门的前端图片获取并转化为base64格式的操作,果然高手在民间,很神奇,没想到有这么多方法,那我也来写一个我自己的方法 我是习惯使用filereader这个内置类,感觉比较简单,不用管内部原理,反正可以获取图片,实现在互联网上的传输就可以

    2024年02月09日
    浏览(66)
  • 前端将base64图片转换成file文件

    1、base64转成file具体代码 文件转换过程: 2、代码解析 ​ 该方法涉及知识点较多,首先因为base64的前缀信息部分与文件内容部分是通过 , 进行连接的, data:image/***;base64(前缀信息),xxxxx(文件内容) ,所以利用 split() 方法对base64进行分割,将前缀文件信息,与文件内容分隔开。得

    2024年01月20日
    浏览(56)
  • 前端FileReader对象实现图片file文件转base64

    1、file转base64具体代码 2、原理解析 ​ 上面封装的方法,其原理主要是借助 FileReader 对象来实现图片格式的转换, FileReader 对象中的 readAsDataURL() 方法,可以读取一个 File 或 Blob 类型的文件,并将其转换为base64格式的字符串。但要注意的一点是:我们通过 readAsDataURL() 方法去读

    2023年04月09日
    浏览(40)
  • JS基于base64编码加密解密文本和图片(修订)

    ​ 密码学,体系太庞大了,常见的加密解密算法很多,这里仅介绍采用base64实现的加密解密的方法。 严格地说base64不是加密算法,他只是一种编码方式,是一种用64个字符来表示任意二进制数据的方法。详情可参见其它资料。 Base64编码具有不可读性,需要解码后才能阅读。

    2024年02月07日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包