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中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
Jquery响应回车键直接提交表单操作代码
Jul 25 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
如何使用PHP中的字符串函数
2006/10/09 PHP
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
php use和include区别总结
2019/10/13 PHP
解决laravel session失效的问题
2019/10/14 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
javascript self对象使用详解
2016/10/18 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
业务助理岗位职责
2013/11/18 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
实施意见格式范本
2015/06/05 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
服装店员工管理制度
2015/08/07 职场文书
运动会广播稿20字
2015/08/19 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
Java 数据结构七大排序使用分析
2022/04/02 Java/Android