<!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. Mac上使用oh-my-zsh+iterm2

    一.安装oh-my-zsh插件 1.1 下载 git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh 1.2创建新配置 如 ...

  2. robot framework学习笔记之一 资源文件（Resource）和外部资源（External Resources）

    一.资源文件(Resource) 测试套件主要是存放测试案例,资源文件主要是用来存放用户关键字. 添加资源    在目录型的Project/Test Suite下单击鼠标右键,选择『New Resou ...

  3. php防止网站被刷新

    在实际应用中,总会遇到某些页面被恶意用户刷新.当你的系统在某些模块没有使用缓存的时候,频繁的刷新会导致数据库吃紧.下面附上一段代码,防止频繁的刷新造成的死机情况. 主要是从 session方面进行限制 ...

  4. java后台简单从腾讯云下载文件通知前端以附件的形式保存

    腾讯云对象存储和阿里云差不多 这是我的配置 /** * 腾讯云client * @return COSClient */ public static COSClient getCOSClient() ...

  5. django文章收藏

    http://www.cnblogs.com/suoning/p/5818869.html

  6. 【性能压测】：MQ队列异步处理机制导致的系统无法接受请求的问题

    一,最近压测系统交易峰值时,因该支交易采用MQ异步队列处理机制:该增加积分的交易,前段服务器优先返回给客户增加积分成功的结果,后端的MQ队列服务器再慢慢处理该请求: 二,压测过程中出现的问题现象:前几 ...

  7. （五）Audio子系统之AudioRecord.stop

    在上一篇文章<(四)Audio子系统之AudioRecord.read>中已经介绍了AudioRecord如何获取音频数据,接下来,继续分析AudioRecord方法中的stop的实现 函 ...

  8. SpringMVC的 @RestController和@Controller 区别

    @RestController注解,相当于@Controller+@ResponseBody两个注解的结合, 返回json数据不需要在方法前面加@ResponseBody注解了,但使用@RestCon ...

  9. windows mobile ,wince 系统，用代码启动cab文件安装

    有时候需要用代码来启动安装cab,以下是代码.不能实现静默安装. 启动后会提示用户是否安装,需要用户点击是才行. using System; using System.Collections.Gene ...

  10. IO流（三）其他流与File类

    1:其他的流 1: DataOutputStream ;多了一些操作基本数据类型的功能 DataInputStream:读取文件. 用DataOutputStream流写进去的数据,就用DataInp ...