<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

</head>

<body>

	<img src="" alt="" />

    <script type = "text/javascript">

        function getBase64Image(img) {

            var canvas = document.createElement("canvas");

            canvas.width = img.width;

            canvas.height = img.height;

            var ctx = canvas.getContext("2d");

            ctx.drawImage(img, 0, 0, img.width, img.height);

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

            return dataURL // return dataURL.replace("data:image/png;base64,", "");

        }

        function main() {

            var img = document.createElement('img');

            img.src = 'images/1 (2).jpg';

            img.onload =function() {

                var data = getBase64Image(img);

                console.log(data);

            }

            document.body.appendChild(img);

        }

        main();

    </script>

</body>

</html>

js图片转换为base64的更多相关文章

  1. js 图片转换为base64

    <input id="file" type="file"> <img id="img" style="max-h ...

  2. js 图片转换为base64 (2)

    <input type="file" id="testUpload"> <img src="" id="img& ...

  3. js 图片转换base64 base64转换为file对象

    function getImgToBase64(url,callback){//将图片转换为Base64 var canvas = document.createElement('canvas'), ...

  4. JS 图片转Base64

    JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...

  5. 将图片转换为base64 格式

    1.页面上的图片,转换成base64格式,可以通过canvas 的 toDataURL 例子:给定图片的url 将图片转换为base64 var imageSrc = "../images/ ...

  6. JAVA 将图片转换为Base64编码

    这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...

  7. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. C# 图片转换为base64

    WebRequest webRequest = WebRequest.Create("验证码url"); WebResponse webResponse = webRequest. ...

  9. 【PHP】图片转换为base64，经过post传输后‘+’会变成 ‘空格’

    图片转换为base64,经过post传输后‘+’会变成 ‘空格’, 需要用PHP 处理一下 $str= $_POST['img_data']; $str= str_replace(' ','+',$s ...

随机推荐

  1. Java核心技术36讲----------Exception和Error有什么区别

    1.异常知识点学习实例 代码如下: package fromnet; /** * 参考链接:https://blog.csdn.net/qq_18505715/article/details/7319 ...

  2. 10种简单的Java性能优化

    你是否正打算优化hashCode()方法?是否想要绕开正则表达式?Lukas Eder介绍了很多简单方便的性能优化小贴士以及扩展程序性能的技巧. 最近“全网域(Web Scale)”一词被炒得火热,人 ...

  3. 通过samba服务将centos7指定文件挂载到window下

    做嵌入式开发,windows下编辑代码,虚拟机上编译,为了方便打算在虚拟机下搭一个samba服务器,将文件夹映射到windows下,搜索网上的方法,内容大同小异,试了半天终于成功了.特此记录一下步骤, ...

  4. python2x和python3x的一些区别

    python2x:各种按照自己代码习惯给python贡献源码 python3x:重写之后的源码,优美,清晰,简单 版本 打印函数 rang函数 输入函数 python2x print 或 print( ...

  5. Python学习5——基本格式化输出

    整数的格式化输出 十进制.八进制.十六进制 num01 = 100 print("十进制输出:%d"%num01) print("八进制输出:%o"%num01 ...

  6. （数据科学学习手札44）在Keras中训练多层感知机

    一.简介 Keras是有着自主的一套前端控制语法,后端基于tensorflow和theano的深度学习框架,因为其搭建神经网络简单快捷明了的语法风格,可以帮助使用者更快捷的搭建自己的神经网络,堪称深度 ...

  7. eclipse注释任务标记

     一.概述 TODO: + 说明: 如果代码中有该标识,说明在标识处有功能代码待编写,待实现的功能在说明中会简略说明. FIXME: + 说明: 如果代码中有该标识,说明标识处代码需要修正,甚至代码是 ...

  8. 北京Uber优步司机奖励政策（12月9日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. android 学习十四 探索安全性和权限

    1.部署安全性:应用程序必须使用数字证书才能安装到设备上. 2.执行期间的安全性:    2.1 使用独立进程    2.2 使用固定唯一用户ID    2.3  申明性权限模型   3数字证书   ...

  10. android 学习四 ContentProvider

    1.系统自带的许多数据(联系人,本地信息等)保存在sqllite数据库,然后封装成许多ContentProvider来供其他程序访问. 2.对sqllite数据库的操作,可以在命令行通过adb工具登录 ...