<!Doctype html>

<html>

<head>

    <meta charset="utf-8" />

    <title>H5 Js图片转base64编码</title>

    <style type="text/css">

        .a{

            border:1px solid #ccc;

        }

        .b{

            border-color:#fff;

        }

        .c{

            float:left;

        }

        .d{

            clear:both;

        }

    </style>

</head>

<body>

<div >

    <span>图片属性：</span>

    <span id="info"></span>

</div>

<div class="a c">

    <p>base64编码：</p>

    <textarea id="base64_code" rows="20" cols="60" class="a b"></textarea>

</div>

<div class="a c" style="width:445px;height:365px;">

    <p>图片展示：</p>

    <div id="img_area"></div>

</div>

<div class="d">

    <input type="file" id="img_upload" />

</div>

</body>

</html>

<script type="text/javascript">

    window.onload = function() {

        var img_upload = document.getElementById("img_upload");

        var base64_code = document.getElementById("base64_code");

        var img_area = document.getElementById("img_area");

        img_upload.addEventListener('change', readFile, false);

    }

    function readFile() {

        var file = this.files[0];

        if (!/image\/\w+/.test(file.type)) {

            alert("请确保文件为图像类型");

            return false;

        }

        var reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload = function(e) {

            var data = e.target.result;

            var image = new Image();

            image.onload = function() {

                var width = image.width;

                var height = image.height;

                var info = `width=${width},height=${height},size=${file.size}`;

                document.getElementById("info").innerHTML = info;

            }

            image.src = data;

            base64_code.innerHTML = this.result;

            img_area.innerHTML = '<img src="' + this.result + '" alt=""/>';

        }

    }

</script>

H5 Js图片转base64编码的更多相关文章

  1. js图片转base64编码

    let reader = new FileReader(); reader.readAsDataURL(file.raw); reader.onload = () => { let imageU ...

  2. js将图片转为base64编码，以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

  3. JS 获取图片的base64编码

    获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  4. JS 图片转Base64

    JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...

  5. 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用

    前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...

  6. 用javascript实现base64编码器以及图片的base64编码

    前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...

  7. JavaScript—图片与base64编码互相转换

    图片转换为base64编码 <input type = "file" id = "file" onchange="popFileName(thi ...

  8. 前端对base64编码的理解，原生js实现字符base64编码

    目录 常见对base64的认知(不完全正确) 多问一个为什么,base64到底是个啥? 按照我们的思路实现一下 到这里基本就实现了,结果跟原生的方法打印的是一样的 下一次 @( 对于前端工程师来说ba ...

  9. 图片的 base64 编码

    图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...

随机推荐

  1. webpack 中文文档

    webpack 最强最详细中文文档 https://doc.webpack-china.org/guides/getting-started/#- webpack多页应用架构系列 http://web ...

  2. 爬虫2：urllib

        了解即可,不好用   一. 概述   python内置的http请求库,包括4个模块,分别如下   urllib.request   请求模块 urllib.error       异常处理模 ...

  3. JavaScript变量那些事

    引言 JavaScript的变量本质是松散类型的,也就是说其变量就是用于保存特定值的一个名字,变量的值和数据类型可以在脚本执行的生命周期中发生变化.这是一个很有趣很强大的特性,但是也是一个极容易出错误 ...

  4. 开源系统-edusoho在线教育

    #部署 ```bash [root@localhost ~]# docker run --name edusoho -tid         -p 9900:80         -e DOMAIN= ...

  5. elasticsearch 基础笔记

    基础: 1.查看 所有节点,及版本 http://192.168.18.7:9200/_nodes/_all/version?pretty=true

  6. ArrayList分析

    ArrayList概述 ArrayList继承了AbstractList,实现了List接口,底层基于动态数组,容量大小可以动态变化,ArrayList中可以添加null元素,另外,ArrayList ...

  7. 发布aar到jcenter

    准备工作 创建bintray账号; 在https://bintray.com/, 选择如下图中,方框内"Sign Up Here": 选择合适的方式,创建账号: 新建仓库: Add ...

  8. JavaScript数据结构-18.图结构广度优先和最短路径

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. ubuntu工具安装

    smplayer sudo add-apt-repository ppa:rvm/smplayer sudo apt-get update sudo apt-get install smplayer ...

  10. InnoDB的B+树索引使用

    何时使用索引 并不是在所有的查询条件下出现的列都需要添加索引.对于什么时候添加B+树索引,我的经验是访问表中很少一部分行时,使用B+树索引才有意义.对于性别字段.地区字段.类型字段,它们可取值的范围很 ...