<!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. MYSQL处理高并发，防止库存超卖（图解)

    抢购场景完全靠数据库来扛,压力是非常大的,我们在最近的一次抢购活动改版中,采用了redis队列+mysql事务控制的方案,画了个简单的流程图: 先来就库存超卖的问题作描述:一般电子商务网站都会遇到如团 ...

  2. Python 魔法方法查询表 -- 总结篇

    据说,Python 的对象天生拥有一些神奇的方法,它们总被双下划线所包围,他们是面向对象的 Python 的一切. 他们是可以给你的类增加魔力的特殊方法,如果你的对象实现(重载)了这些方法中的某一个, ...

  3. C++与C的区别一

    1. C++风格数组初始化: #include <iostream> #include <array> using namespace std; void main() { / ...

  4. springboot自定义配置文件

    前言:如果你一点spring的基础没有,建议你不要学习springboot,至少先有一个spring的项目经验或者自己搭建过spring的项目再学习springboot,这样你会发现在spring中搞 ...

  5. Machine learning 第7周编程作业 SVM

    1.Gaussian Kernel function sim = gaussianKernel(x1, x2, sigma) %RBFKERNEL returns a radial basis fun ...

  6. STL项目-学校演讲比赛

    // 学校演讲比赛.cpp : 此文件包含 "main" 函数.程序执行将在此处开始并结束. // #include "pch.h" #include < ...

  7. rbac - 介绍

    找到了上学期末压箱底的rbac组件,这里总结下. 介绍: rbac组件:一个基于角色的权限访问控制系统的组件. 目录:

  8. Android之build.prop属性详解

    注:本篇文章是基于MSD648项目(AndroidTV)的prop进行说明. Android版本:4.4.4 内核版本:3.10.86 1.生成build.prop build.prop的生成是由ma ...

  9. js 实现星级评分

    最近的项目中有一个星级评分的需求,  自己就写了一下, 由于可能一个页面要用到多个,就采用了面向对象的写法. 用到的png图片也放到这里.    js要用到jquery. css: .sr-star{ ...

  10. java并行之parallelStream与CompletableFuture比较

    1. import java.util.Arrays; import java.util.List; import java.util.concurrent.CompletableFuture; im ...