<!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. [Scala随用随学] —— sealed声明的作用

    今天在看MLlib的源码时,看到Vector的声明是sealed trait,很好奇这个sealed有什么作用,与是搜到了这个文章: http://www.cnblogs.com/rollenholt ...

  2. 菜鸟浅谈“诈骗”希望“治未病"

    关于目前诈骗.社工数据的套路,说道说道~ 一.前言 这篇文章没有什么高深的技术,只有普普通通的套路,主要也是有I春秋各位表哥与诈骗分子的交手有感而发! 二.正文 因为我们上网的或者其他条件下的人群,没 ...

  3. 关于在JS中AJAX导致跨域问题的解决

    在部署一个原声的前端项目的时候,请求该服务器后端接口时发现出现了CORS跨域的问题,但是服务端已经做了同源策略的兼容,常见问题,遂记录. 报错信息: XMLHttpRequest cannot loa ...

  4. mysql工具——使用mysqlshow查看mysql对象信息，查看mysql表大小

    关键词:查看表大小,mysqlshow mysqlshow --count -uroot -p test

  5. JSP中使用JSTL表达式

    最近写web项目,为了使JSP代码美观好维护,决定采用EL&JSTL表达式.    EL表达式直接就可以用,但是JSTL表达式是属于apache的一个开源库,这个用起来就需要倒入一些jar包之 ...

  6. 【Alpha】任务分解与分配

    Alpha阶段总体任务规划 Alpha阶段我们的任务主要是恢复原先项目的代码运行,并增加一部分物理实验(二)的内容以及完善之前项目未完成的功能,例如后台管理及用户管理界面.在恢复项目部分的主要工作是将 ...

  7. Exponentiation POJ-1001

    http://poj.org/problem?id=1001 //10000000 100000 #include<iostream> #include<cstring> us ...

  8. win10开启 linux Bash命令(win10内置了linux系统支持)

    win10开启 Ubuntu linux Bash命令(win10内置了linux系统支持) 第一步: 先在设置→更新和安全→针对开发人员中选择"开发人员模式",点击后会下载&qu ...

  9. （转）多种方法实现Loading（加载）动画效果

    当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次. 既能让用户知道正在提交中,也能防止二次提交,好处多多呢.

  10. docker相关命令

    1. 进入docker容器 ① 查看运行的容器:docker ps -a ②  进入容器:docker exec -ti [容器id] bash ③ 退出容器:eixt