工作需要使用，所以就做了一个小工具，方便使用

推荐使用 chrome,ff 。 毕竟是个小工具方便自己使用而已，所以没有做浏览器兼容测试了！

代码如下，直接保存为 .html 打开即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ImgToBase64</title>

<style>

body{margin:0px; background-color:#FFF}

</style>

</head>

<body>

<canvas id="can" style="top:0px; left: 0px;"  width="" height=""></canvas>

<textarea id="code" style="width:600px; height:200px;"></textarea>

<input id="uImg" type="file" name="file" accept="image/*" style="left:0px; top:0px;width:300px; height:100px;opacity:1;">

</body>

<script>

var img,canvas,c2d

inIt()

function inIt()

{

    canvas = document.getElementById("can");

    if (canvas == null){alert("请使用支持'HTML5 CANVAS'的浏览器！");return;}

    c2d = canvas.getContext("2d");

    //

    document.getElementById("uImg").addEventListener("change",function(e)

    {

        var files = e.target.files, file;

        if (files && files.length > )

        {

            // 获取目前上传的文件

            file = files[];

            // 来在控制台看看到底这个对象是什么

            console.log(file);

            // 那么我们可以做一下诸如文件大小校验的动作

            if(file.size >  *  * )

            {

                alert('图片大小不能超过 2MB!');

                return false;

            }

            var URL = window.URL || window.webkitURL;

            var imgURL = URL.createObjectURL(file);

            //

            coding(imgURL)

        }

    });

}

function coding(_str)

{

    if(!img){img=new Image()}

    img.onload = function ()

    {

        if(img.width==){c2d.clearRect(,,imgW.width,imgH.height);}

        canvas.width=img.width

        canvas.height=img.height

        c2d.drawImage(img, ,, img.width, img.height);

        //

        var _base64=canvas.toDataURL("image/png");

        console.log(_base64.length)

        if(_base64.length>)

        {

            document.getElementById("code").innerHTML="图片数据较大，避免电脑卡死已自动隐藏字符串"

        }

        else

        {

            document.getElementById("code").innerHTML=_base64

        }

    }

    img.src=_str

}

</script>

</html>

将图片转成base64 小工具的更多相关文章

  1. 批量下载网站图片的Python实用小工具（下）

    引子 在 批量下载网站图片的Python实用小工具 一文中,讲解了开发一个Python小工具来实现网站图片的并发批量拉取.不过那个工具仅限于特定网站的特定规则,本文将基于其代码实现,开发一个更加通用的 ...

  2. delphi将图片转换成Base64编码函数

    {************************************************************************** 名称: BaseImage 参数: fn: TF ...

  3. 图片转换成Base64编码集成到html文件

    首先为什么要这么做?  原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...

  4. java 图片转换成base64字符串

    import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...

  5. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. js绝对地址图片转换成base64的方法

    //将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...

  7. 利用PHP将图片转换成base64编码的实现方法

    先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输. ...

  8. Java对网络图片/本地图片转换成Base64编码和解码

    一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...

  9. php 处理图片 将图片转成base64

    1.直接将图片路径传入下面该方法就可以了//将图片转成base64 public function imgToBase64($img_file){ $img_base64 = ''; if ($img ...

随机推荐

  1. laravel事务小例子

    发生异常则自动回滚,正常则自动提交,示例如下: DB::connection('vshare')->transaction(function() use($id,$reason,$refuser ...

  2. Java中Properties类的使用

    1.properties介绍 java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值&quo ...

  3. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件

    之前,我们已经介绍了 jQuery UI 库,CSS 框架.下面,我们将学习这些有增强可视化效果,高度可配置的用户交互组件. Tab 的特性是,点击 tab 后,会高亮该 tab,并显示他的关联con ...

  4. 阿里云ECS主机多个网站配置，是有先后顺序的

    注意:阿里云ECS主机多个网站配置,是有先后顺序的: 进入路径:/alidata/server/httpd-2.4.2/conf/vhosts/  注意这个2.4.2是自己的版本不一样,但是找到 se ...

  5. Unix/Linux编程实践教程（一：进程、管道）

    execvp在程序中启动新程序: 用fork创建新进程: forkdemo2代码: 测试fork的时候参考<Linux权威指南>阅读笔记(3)  使用了patch: [root@local ...

  6. 逆序数还原(FZU)

    逆序数还原 Accept: 244 Submit: 451 Time Limit: 1000 mSec Memory Limit : 32768 KB Problem Description 有一段时 ...

  7. Python学习笔记-Day1-Python基础

    1.python诞生 关于Python的起源,吉多·范罗苏姆在1996年写到: 六 年前,在1989年12月,我在寻找一门“课余”编程项目来打发圣诞节前后的时间.我的办公室会关门,但我有一台家用电脑, ...

  8. 基于@AspectJ和schema的aop(四)---@AspectJ进阶

    @AspectJ可以使用切点函数定义切点, 我们还可以使用逻辑运算对切点进行复合运算得到复合的切点. 我们还可以对切点进行命名, 从而可以复用切点.当一个连接点匹配多个切点时, 需要考虑增强织入的顺序 ...

  9. vilte/vowifi

    vendor/mediatek/proprietary/packages/services/Ims/src/com/mediatek/ims/ImsService.java ¦ ¦ ¦ ¦ ¦ ¦ v ...

  10. 2016CCPC东北地区大学生程序设计竞赛 1008 HDU5929

    链接http://acm.hdu.edu.cn/showproblem.php?pid=5929 题意:给你一种数据结构以及操作,和一种位运算,最后询问:从'栈'顶到低的运算顺序结果是多少 解法:根据 ...