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


Posted in Javascript onDecember 05, 2020

获取图片的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 图片base64编码的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
js实现无缝滚动特效
Dec 20 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
详解jQuery事件
Jan 13 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 #Javascript
可拖拽组件slider.js使用方法详解
Dec 04 #Javascript
js实现复制粘贴的两种方法
Dec 04 #Javascript
echarts浮动显示单位的实现方法示例
Dec 04 #Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 #Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 #Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 #Javascript
You might like
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
jsTree使用记录实例
2016/12/01 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
React中的refs的使用教程
2018/02/13 Javascript
React 组件间的通信示例
2018/06/14 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
js制作提示框插件
2020/12/24 Javascript
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
python 接收处理外带的参数方法
2018/12/03 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
Python实现扫码工具的示例代码
2020/10/09 Python
web页面录屏实现
2019/02/12 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
秘书岗位职责
2013/11/18 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
公司请假条格式
2014/04/11 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
三方合作意向书范本
2015/05/09 职场文书
会议室使用管理制度
2015/08/06 职场文书