<!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. apache2 的https配置和代理https后端nodejs配置

    先进入  /usr/local/apache2/conf  目录 修改 vim httpd.conf  把下面的去掉注释 LoadModule proxy_module modules/mod_pro ...

  2. the type initializer for 'system.drawingcore.gdiplus' threw an exception

    Centos 7 yum install libgdiplus-devel reboot之后生效 apt install libgdiplus cp /usr/lib/libgdiplus.so ~/ ...

  3. P3622 [APIO2007]动物园

    题目链接 题意分析 这是一道状压\(DP\)的题 一个人只可以欣赏到\(5\)只动物 显然可以状压 我们用\(dp[i][j]\)表示当前\([i,i+4]\)中这\(5\)只动物的状态\(j\) 在 ...

  4. java日期时间

    字母 日期或时间元素 表示 示例 G Era 标志符 Text AD y 年 Year 1996; 96 M 年中的月份 Month July; Jul; 07 w 年中的周数 Number 27   ...

  5. ES6之新增set数据结构

    学习set set是ES6中的新增的数据结构,是一种构造函数,类似于数组,但是里面的元素都是唯一的,不重复的. 例如: const set = new Set(); [1,2,3,4,5,2,1,2, ...

  6. TX2 之tensorflow环境部署

    刷机jetpack3.3 首先TX2必须是3.3版本的jetpack,因为截止目前nvidia发布的tensorflow只支持3.3版本的jetpack,刷机的具体步骤可以参考NVIDIA Jetso ...

  7. centos6.5安装docker（亲测）

    centos6.5下安装docker的过程办法 在看了网上N多复制粘贴的文章,又尝试无效后,我把我最终成功的办法发出来,希望能帮到拼命干环境的你. 操作环境: centos6.5(Final) 内核: ...

  8. Mac 10.12安装远程桌面工具TeamViewer

    说明:个人使用时免费的,虽然启动时有弹框,但是不影响使用. 下载: https://www.teamviewer.com/zhCN/

  9. vs2013 调试libevent 源码

    自己内功的提升,无非是向前辈学习和修炼自身,对于编码也是如此,学习优秀的库只有从 源代码学起,才能深刻理解库实现的来龙去脉,加深自己的理解,提升自己的功力. 今天就介绍一下vs2013 下面调试lib ...

  10. Springboot用官方建议访问Html页面并接传值

    Springboot用官方建议访问Html页面并接传值 我们以前通常习惯用webapp来防止jsp页面,但是到了Springboot中,官方建议用Static文件夹来存放及静态的资源, 用templa ...