<!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. python--模块之sys与python解释器交互模块

    作用:sys模块是与python解释器交互的一个接口.它提供了一系列有关python运行环境的变量和函数. 常用函数:import sys sys.argv #命令行参数list,第一个元素是程序本身 ...

  2. rtsp over tcp并设置多个options

    版权声明:本文为博主原创文章,未经博主允许不得转载. var vlc=document.getElementById("vlc"); var options = new Array ...

  3. C语言自问自答

    Windows系统下,最好如何配置环境? notepad++,tdm-gcc,powershell来进行! scanf函数的返回值,和不符合格式如何返回? #include<stdio.h> ...

  4. HyperLedger Fabric 1.4 问题汇总（16）

    16.1 在运行e2e_cli例子时,执行./network_setup.sh up,出现错误:网络搭建之network e2ecli_default not found 问题原因: End-2-En ...

  5. 在线接口文档工具——ShowDoc

    ShowDoc:https://www.showdoc.cc/ --待更.

  6. RF上传图片各种失败坑，使用pywin32来操作windows窗体

    这个上传按钮,使用 Choose File,失败不知道为什么... Name:Choose FileSource:Selenium2Library <test library>Argume ...

  7. Spring全局变量

    压测spring框架的webservice接口,大并发量下响应值与预期值不一致 经查,开发在类中使用全局变量导致: springmvc核心控制器DispatcherServlet 默认为每个contr ...

  8. Java初始化方法：类、容器

    Java初始化方法:类.容器   初始化类(非final): Struts2的DefaultActionMapper类中:      public DefaultActionMapper() {   ...

  9. TW实习日记：第24-25天

    项目的交付期是真的赶...一直在不断地修改一些小bug,然后消息推送功能出了一个问题,就是不知道为什么PC端会发送两次消息到移动端后台.其中第一条正常第二条会有乱码不正常,可以说是很奇怪了,一开始都认 ...

  10. Python爬虫模拟登录带验证码网站

    问题分析: 1.爬取网站时经常会遇到需要登录的问题,这是就需要用到模拟登录的相关方法.python提供了强大的url库,想做到这个并不难.这里以登录学校教务系统为例,做一个简单的例子. 2.首先得明白 ...