脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 图片base64编码

js获取图片的base64编码并压缩

 更新时间：2020年12月05日 09:07:06   作者：君子笑而不语  
这篇文章主要介绍了js获取图片的base64编码并压缩，帮助大家更好的理解和使用js，感兴趣的朋友可以了解下

获取图片的base64编码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gbk">
    <title></title>
  </head>
  <body>
    <input accept="image/*" name="upimage" id="upload_file" type="file" onchange="gen_base64()">
　　　　　<br/>
    <textarea id="base64_output" name="Word" style=" width:820px"></textarea>
　　　　 <br/>
　　　　　<img src="" id="myImg" />
    <script type="text/javascript">
      function $_(id) {
          return document.getElementById(id);
      }
      function gen_base64() {
        var file = $_('upload_file').files[0];
        r = new FileReader(); //本地预览
        r.onload = function(){
          $_('base64_output').value = r.result;
　　　　　　　　　　　　 $_('myImg').src= r.result;
        }
        r.readAsDataURL(file);  //Base64
      }
    </script>
  </body>
</html>

案例2：js压缩图片

<html>
 <body>
 <script>
 function getUrl(fil) {
      var Cnv = document.getElementById('myCanvas');
      var Cntx = Cnv.getContext('2d');//获取2d编辑容器
      var imgss =  new Image();//创建一个图片
      var agoimg=document.getElementById("ago");
    
      for (var intI = 0; intI < fil.length; intI++) {//图片回显
        var tmpFile = fil[intI];
        var reader = new FileReader();
        reader.readAsDataURL(tmpFile);
        reader.onload = function (e) {
          url = e.target.result;
          imgss.src = url;
          agoimg.src=url;
          agoimg.onload = function () {
            //等比缩放
            var m = imgss.height / imgss.width;
             Cnv.width = 300 ;//该值影响缩放后图片的大小
             Cnv.height =300*m;
             
            //img放入画布中
            Cntx.drawImage(agoimg, 0, 0,300,300*m);
                     　　　　//把画布中的数据，写出到某img的src里
            var Pic = document.getElementById("myCanvas").toDataURL("image/png");
            var imgs =document.getElementById("press");
            imgs.src =Pic ;
          }
        }
      }
    }
    
</script>
<input type="file" id="fileId" name="fileId" value="上传图片" hidefocus="true" onchange="getUrl(this.files);"/>   <br/>
<canvas id="myCanvas"   style="display: block" ></canvas>
old img::<img src="" alt="" id="ago" style="width: 500px;"/>
new img::<img src="" alt="" id="press"/>
</body>
</html>

效果图

以上就是js获取图片的base64编码并压缩的详细内容，更多关于js 图片base64编码的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JS 插件dropload下拉刷新、上拉加载使用小结

    JS 插件dropload下拉刷新、上拉加载使用小结

    这篇文章主要介绍了JS 插件dropload下拉刷新、上拉加载使用小结,需要的朋友可以参考下
    2017-04-04
  • EasyUi combotree 实现动态加载树节点

    EasyUi combotree 实现动态加载树节点

    这篇文章主要介绍了EasyUi combotree 实现动态加载树节点的相关资料,需要的朋友可以参考下
    2016-04-04
  • 一个原生的用户等级的进度条

    一个原生的用户等级的进度条

    做了一个用户等级的进度条，只是练手。
    2010-07-07
  • 字符串反转_JavaScript

    字符串反转_JavaScript

    split()方法将一个字符串对象的每个字符拆出来，并且将每个字符串当成数组的每个元素 reverse()方法用来改变数组，将数组中的元素倒个序排列，第一个数组元素成为最后一个，最后一个变成第一个 join()方法将数组中的所有元素边接成一个字符串
    2016-04-04
  • uni-app调取接口的3种方式以及封装uni.request()详解

    uni-app调取接口的3种方式以及封装uni.request()详解

    我们在实际工作中要将数据传输到服务器端,从服务器端获取信息,都是通过接口的形式,下面这篇文章主要给大家介绍了关于uni-app调取接口的3种方式以及封装uni.request()的相关资料,需要的朋友可以参考下
    2022-08-08
  • js+css实现导航效果实例

    js+css实现导航效果实例

    这篇文章主要介绍了js+css实现导航效果,实例分析了下拉菜单导航的js实现方法,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • bootstrap基础知识学习笔记

    bootstrap基础知识学习笔记

    这篇文章主要针对bootstrap基础知识为大家整理了详细的学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • js编写轮播图效果

    js编写轮播图效果

    这篇文章主要为大家详细介绍了js编写轮播图效果的代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • JavaScript引用类型Array实例分析

    JavaScript引用类型Array实例分析

    这篇文章主要介绍了JavaScript引用类型Array,结合实例形式较为详细的分析了JavaScript数组相关的创建、检测、转换、排序、栈、队列、引用等各种常见操作技巧,需要的朋友可以参考下
    2018-07-07
  • 基于javascript实现移动端轮播图效果

    基于javascript实现移动端轮播图效果

    这篇文章主要为大家详细介绍了基于javascript实现移动端轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12

最新评论