图片转换base64或blob（对图片旋转进行校正）并在页面显示

最新推荐文章于 2024-04-23 15:46:25 发布
最新推荐文章于 2024-04-23 15:46:25 发布
阅读量1k 收藏 4
点赞数
分类专栏： 前端学习笔记 文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_J_BlackCloud/article/details/121550763
版权

背景：

最近项目需求需要使用到base64的图片格式，需要对用户上传的图片压缩处理，所以打算自己动手写一个图片选择、压缩、转换的方法（需要压缩到指定大小）。

思路：

  1. 调用 FileReader的 reader.readAsDataURL(img)方法, reader.readAsDataURL 读取图片信息。
  2. 在reader.onload的事件中，新建Image对象，并将reader.result的值赋给img.src,在img.onload中判断尺寸大小，并且根据 exif-js 判断图片角度是否需要校正，再通过canvs 将图片压缩至合适尺寸。

既然思路已经有了，那么接下来就可以动手去尝试操作了…

  1. 第一步先引入项目所需要的依赖文件，因为写的时候我是本地直接原生js做的所以使用的 cdn的方式引入。

    <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

  2. 创建项目，编写基础代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片压缩转换base64</title>
    <style>
      .ui_button {
        background: #0066cc;
        color: #fff;
        padding: 10px 20px;
        margin: 10px;
        display: block;
        width: 100px;
        text-align: center;
        cursor: pointer;
        border-radius: 5px;
      }
      img {
        height: 100px;
        width: 100px;
        display: none;
      }
    </style>
  </head>

  <body>
    <label class="ui_button" for="xFile" label>上传文件</label>
    <form>
      <input
        type="file"
        accept="image/*"
        onchange="fileChange(this)"
        style="position: absolute; clip: rect(0 0 0 0)"
      />
    </form>
    <img src="" alt="" id="showImg" />
  </body>
  <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
</html>

  3. 开始写获取图片、处理图片方法 （大概的思路以及逻辑如下）

    1. 首先获取到按钮以及 input 并且给按钮添加点击事件，同时触发 input 的点击事件达到选择文件的目的。
    2. 定义 imageCompression 文件压缩方法，方法需要接收三个参数( file 文件 、处理完成的 callBack 回调、 params {绘制 canvas 需要的参数、图片压缩的大小、返回文件的格式} )
    3. 因为需要使用到 FileReader 方法 所以在处理之前先判断浏览器是否支持 不支持就直接返回文件并打印错误信息，如果浏览器支持，那就使用 FileReader 读取传入的文件
    4. 在 FileReader.onload 方法中进行 img 创建，
    5. 监听 img.onload 事件 在图片加载完成后进行 canvas 绘制
    6. 绘制完之后我们就需要根据 orientation 值判断图片是否需要旋转
    7. 在将图片旋转正常后，使用递归将突破压缩至设置的大小
    function imageCompression(
      file,
      callBack = () => {},
      params = {
        width: 1000,
        LIMIT_SIZE: 0.5 * 1024 * 2014,
        isBase64: true,
      }
    ) {
      let compressCount = 0;
      const { width, LIMIT_SIZE, isBase64 } = params;
      const orientation = EXIF.getTag(file, "Orientation") || 1;
      // 图片压缩出错函数
      const errorFn = (e) => {
        console.error("图片压缩出问题了", e);
        callBack(file);
      };
      if (!window.FileReader) {
        console.error("浏览器不支持 window.FileReader 方法哦");
        callBack(file);
      } else {
        try {
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function () {
            let img = new Image();
            img.src = reader.result;
            img.onload = function () {
              try {
                const canvas = document.createElement("canvas");
                const context = canvas.getContext("2d");
                const canvasWidth = width;
                const canvasHeight = canvasWidth / (img.width / img.height);
                canvas.width = canvasWidth;
                canvas.height = canvasHeight;
                let angle = 0;
                switch (orientation) {
                  case 1:
                    break;
                  case 6:
                    // 逆时针90°，需要顺时针旋转90°
                    angle = (90 * Math.PI) / 180;
                    canvas.width = canvasHeight;
                    canvas.height = canvasWidth;
                    context.rotate(angle);
                    context.translate(0, -canvas.width);
                    break;
                  case 8:
                    // 顺时针90°，需要顺时针旋转270°
                    angle = (270 * Math.PI) / 180;
                    canvas.width = canvasHeight;
                    canvas.height = canvasWidth;
                    context.rotate(angle);
                    context.translate(-canvas.height, 0);
                    break;
                  case 3:
                    // 顺时针180°，需要顺时针旋转180°
                    angle = (180 * Math.PI) / 180;
                    canvas.width = canvasWidth;
                    canvas.height = canvasHeight;
                    context.rotate(angle);
                    context.translate(-canvas.width, -canvas.height);
                    break;
                  default:
                    break;
                }

                context.drawImage(img, 0, 0, canvasWidth, canvasHeight);
                context.setTransform(1, 0, 0, 1, 0, 0);
                canvas.toBlob(
                  (blob) => {
                    if (blob.size > LIMIT_SIZE) {
                      compressCount += 1;
                      imageCompression(blob, callBack);
                    } else {
                      compressCount = 0;
                      if (isBase64) {
                        callBack(canvas.toDataURL( 'image/png', 1 ));
                      } else {
                        callBack(blob);
                      }
                    }
                  },
                  "image/jpeg",
                  0.9 - compressCount * 0.1
                );
              } catch (error) {
                errorFn(error);
              }
            };
          };
          reader.onerror = (error) => {
            errorFn(error);
          };
        } catch (error) {
          errorFn(error);
        }
      }
    }

  4. 示例代码，复制至页面可以直接查看效果

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片压缩转换base64</title>
    <style>
      .ui_button {
        background: #0066cc;
        color: #fff;
        padding: 10px 20px;
        margin: 10px;
        display: block;
        width: 100px;
        text-align: center;
        cursor: pointer;
        border-radius: 5px;
      }
      img {
        height: 100px;
        width: 100px;
        display: none;
      }
    </style>
  </head>

  <body>
    <label class="ui_button" for="xFile" label>上传文件</label>
    <form>
      <input
        type="file"
        accept="image/*"
        onchange="fileChange(this)"
        style="position: absolute; clip: rect(0 0 0 0)"
      />
    </form>
    <img src="" alt="" id="showImg" />
  </body>
  <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
  <script>
    let btn = document.getElementsByClassName("ui_button")[0];
    let fileInput = document.getElementsByTagName("input")[0];
    btn.onclick = function () {
      fileInput.click();
    };
    function fileChange(e) {
      let file = e.files[0];
      //  判断图片大小是否需要压缩 (不能大于4M)
      if (file.size > 4 * 1024 * 1024) {
        console.log("图片过大不能上传哦");
      } else {
        imageCompression(file, getBase64);
      }
    }

    function imageCompression(
      file,
      callBack = () => {},
      params = {
        width: 1000,
        LIMIT_SIZE: 0.5 * 1024 * 2014,
        isBase64: true,
      }
    ) {
      let compressCount = 0;
      const { width, LIMIT_SIZE, isBase64 } = params;
      const orientation = EXIF.getTag(file, "Orientation") || 1;
      // 图片压缩出错函数
      const errorFn = (e) => {
        console.error("图片压缩出问题了", e);
        callBack(file);
      };
      if (!window.FileReader) {
        console.error("浏览器不支持 window.FileReader 方法哦");
        callBack(file);
      } else {
        try {
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function () {
            let img = new Image();
            img.src = reader.result;
            img.onload = function () {
              try {
                const canvas = document.createElement("canvas");
                const context = canvas.getContext("2d");
                const canvasWidth = width;
                const canvasHeight = canvasWidth / (img.width / img.height);
                canvas.width = canvasWidth;
                canvas.height = canvasHeight;
                let angle = 0;
                switch (orientation) {
                  case 1:
                    break;
                  case 6:
                    // 逆时针90°，需要顺时针旋转90°
                    angle = (90 * Math.PI) / 180;
                    canvas.width = canvasHeight;
                    canvas.height = canvasWidth;
                    context.rotate(angle);
                    context.translate(0, -canvas.width);
                    break;
                  case 8:
                    // 顺时针90°，需要顺时针旋转270°
                    angle = (270 * Math.PI) / 180;
                    canvas.width = canvasHeight;
                    canvas.height = canvasWidth;
                    context.rotate(angle);
                    context.translate(-canvas.height, 0);
                    break;
                  case 3:
                    // 顺时针180°，需要顺时针旋转180°
                    angle = (180 * Math.PI) / 180;
                    canvas.width = canvasWidth;
                    canvas.height = canvasHeight;
                    context.rotate(angle);
                    context.translate(-canvas.width, -canvas.height);
                    break;
                  default:
                    break;
                }

                context.drawImage(img, 0, 0, canvasWidth, canvasHeight);
                context.setTransform(1, 0, 0, 1, 0, 0);
                canvas.toBlob(
                  (blob) => {
                    if (blob.size > LIMIT_SIZE) {
                      compressCount += 1;
                      imageCompression(blob, callBack);
                    } else {
                      compressCount = 0;
                      if (isBase64) {
                        callBack(canvas.toDataURL( 'image/png', 1 ));
                      } else {
                        callBack(blob);
                      }
                    }
                  },
                  "image/jpeg",
                  0.9 - compressCount * 0.1
                );
              } catch (error) {
                errorFn(error);
              }
            };
          };
          reader.onerror = (error) => {
            errorFn(error);
          };
        } catch (error) {
          errorFn(error);
        }
      }
    }
    // 获取base64
    function getBase64(base64) {
      let showImg = document.getElementById("showImg");
      showImg.src = base64;
      showImg.style.display = "block";
      console.log(base64);
    }
  </script>
</html>

  5. 效果图

    效果图片

一纸信笺落了尘
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
后端blob 怎么显示在页面_各种返回图片在前端显示以及转化
weixin_39981041的博客
12-22 3831
前言作为前端工程师 的我们，日常少不了会跟图片打交道。以下是我了解的。一、图片在后端中存储一般来说，图片在后端的存储方式分为两种：其一：可以将图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中;其二：将图片转换成二进制流，直接存储到数据库的 Image 类型字段中.对于第一种存储方式，我们前端直接将存储路径赋值给 src 属性即可轻松显示。对于第二种存储方式，我们前端需要将其...
Blob如何在html里转换成图片,前端图片canvas，file，blob，DataURL等格式转换
weixin_42525328的博客
05-31 7099
前端图片canvas，file，blob，DataURL等格式转换最近用到一些图片相关的操作，记录一下笔记。将file转化成base64场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法：方法一：利用URL.createObjectURL()html>basewindow.=...
js base64图片旋转90度
苏雨丶
12-27 1万+
&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; body, button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } &lt;/style&gt; &lt;/head&am
使用Blob对象接收后台返回的图片流并展示到前端页面
MISS_zhang_0110的博客
08-17 3320
代码】使用Blob对象接收后台返回的图片流并展示到前端页面。
读取blob类型图片显示在网页上
最新发布
qq_63921438的博客
04-23 384
读取blob类型方法为window.URL.createObjectURL(blob)，但是我这里的是字符串类型，所以会一直报错，需要一个方法将获取到的字符串类型的blob转化掉，即以下方法。window.URL.createObjectURL(blob)就可以获得到blob2，这里就可直接绑定在网页上的组件src属性上了。首先去除blob字符串固定的前缀，经过处理（这里我也不是很懂），得到的blob大概是这个样子。从数据库里获取的blob类型会被自动转化为字符串格式，并不是blob格式，比如。
html本地图片转为blob,html FileReader：将blob转换为图像文件？
weixin_36373860的博客
05-31 777
var reader = new FileReader();var objVal;var image = new Image();reader.onload = function(e) {document.getElementById('propertyImg').setAttribute('src', e.target.result);};function readURL(input){if(i...
使用blob实现文件下载和图片预览
热门推荐
ouzexi的博客
03-20 1万+
学习blob对象的笔记 blob叫做二进制大对象(binary large object)主要是存放二进制的容器。 1 存取文本 存放二进制数据，类似数组size为数据长度，type指定类型 example： var str = 'hello world' var blob = new Blob([str], { type: 'text/plain' }) console.log('blob:', blob) 打印结果： 调用t
blob和ArrayBuffer格式图片如何显示
qq_44161722的博客
10-17 427
【代码】blob和ArrayBuffer格式图片如何显示。
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
11-26
为了解决这个问题，我们可以将Base64编码的图片转换为Blob对象，并将其放入FormData对象中，然后通过AJAX提交。以下是如何实现这一过程的详细步骤： ### 第一步：Base64转Blob Base64编码的图片数据中包含了图片的...
图片BASE64加密保存到数据库Blob类型中（放入数据库，并取出生成图片）
12-13
在图片处理中，BASE64编码常用来将图片数据转换为文本格式，便于在网络传输或存储时使用。 2. **Blob类型**：Blob是Binary Large Object的缩写，是数据库管理系统中用于存储大量二进制数据的字段类型，例如图片、...
JS实现图片转换成base64的各种应用场景实例分析
10-18
在本文中，我们将深入探讨如何使用JavaScript将图片转换为Base64编码，并讨论其在不同场景下的应用。 首先，让我们看看场景一：将用户本地上传的资源转化为Base64。这种场景通常发生在用户通过浏览器上传图片时。...
js实现把图片的绝对路径转为base64字符串、blob对象再上传
01-19
JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传。 用处： 从本地选择图片上传，如项目规定只能选择本项目文件夹下的图像上传为头像等。 主要思想： 使用canvas.toDataURL()方法将...
数据图片的生成和一些操作
茶花漫道
08-20 1011
 先前在做项目时也对图片做过处理，只是后来换了应用服务器平台之后发现不少问题，于是进行深入学习，找人探讨，终于算是摸出一些门路。1.图片存储在图片的存储字段方面，SQL Server和My SQL都有相应的字段，而在Oracle里没有明确的字段，但也提供了几个大型字段，一般，我们存储在BLOB类型里。这里有个CLOB和BLOB字段的讨论，网上学习之后知道，BLOB存储的是二进制流，而C
前端：blob转换为图片URL，但是图片不显示
n_2021的博客
07-11 6766
vue页面包含有轮播图、tab切换。轮播图的图片接口返回的是blob类型数据，js里也将blob处理成url地址赋值给图片的src了，但是首页就是不显示图片，此时触发tab切换时，轮播图的图片立马显示。tab切换与轮播图是不同的div...
图片转file\blob文件、图片转base64
lxm1353723767的博客
12-22 743
//图片url转blob文件 var imageUrlTransFiles = function (imgUrl, call) { var that = this, image = new Image(); if(imgUrl.indexOf('?') !== -1){ imgUrl = imgUrl + '&v=' + Math.random(); }else{ imgUrl = imgUrl + '?v=' + Math.random();
base64格式的图片转换为blob格式的文件流
weixin_55582221的博客
10-09 1309
今天写项目的时候发现需要把截图生成后的base64格式的图片转换为blod格式的，就找到了这个方法，进行记录一下。使用的话就直接调用就可以了。
上传图片（图片转blob和base64格式）
c.j.h_code的博客
11-11 2129
有些时候上传图片到服务器有明确的格式要求，现在讲讲如何制作上传图片及转为blob与base64格式 base64优缺点： 优点： base64格式占用内存小，图片转为base64后只为原图三分之一 base64图片减少了对服务器的请求 base64是字符串类型，更适合多平台，多语言使用 缺点： base64字符串内容多，给数据库压力大 base64由于内容多，网页加载会比较缓慢 <!DOCTYPE html> &lt...
【base64】java 通过图片的Base64字符串判断文件格式
惠菁
10-12 6223
代码： // base64字符串转写为文件 public static void convertBase64DataToImage(String base64ImgData, String filePath) throws IOException { Files.write(Paths.get(filePath), Base64.getDecoder().decode(base64ImgData), StandardOpenOption.CREATE); } // 将文件转写为base
js 将blob图片对象转换为Base64并调用
03-20
可以使用 FileReader 对象将 blob 图片对象转换为 Base64，代码如下： ```javascript function blobToBase64(blob, callback) { var reader = new FileReader(); reader.onload = function() { var dataUrl = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值