文档章节

img 转为base64

放开那个女孩
 放开那个女孩
发布于 2018/02/01 10:29
字数 261
阅读 33
收藏 2

方法一:canvas

<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/Game of Thrones.jpg';  //此处自己替换本地图片的地址
        img.onload =function() {
            var data = getBase64Image(img);
            var img1 = document.createElement('img');
            img1.src = data;
            document.body.appendChild(img1);
            console.log(data);
        }
    }
    main()

</script>

 

方法二:FileReader

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>通过filereader接口读取文件</title>
    <script type="text/javascript">
        function readAsDataURL()
        {
            if(typeof FileReader=='undifined')          //判断浏览器是否支持filereader
            {
                result.innerHTML="<p>抱歉,你的浏览器不支持 FileReader</p>";
                return false;
            }
            var file=document.getElementById("imagefile").files[0];
            if(!/image\/\w+/.test(file.type))           //判断获取的是否为图片文件
            {
                alert("请确保文件为图像文件");
                return false;
            }
            var reader=new FileReader();
            reader.readAsDataURL(file);
            reader.onload=function(e)
            {
                var result=document.getElementById("result");
                result.innerHTML='<img src="'+this.result+'" alt=""/>'
            }

        }
    </script>
</head>

<body>
<p>
    <label>请选择一个文件:</label>
    <input type="file" id="imagefile" />
    <input type="button" value="读取图像" onClick="readAsDataURL();" />
</p>
<div name="result" id="result">
    <!-- 这里用来显示图片结果-->
</div>
</body>
</html>

 

参考文献: https://www.cnblogs.com/tugenhua0707/p/4666076.html

本文转载自:https://www.cnblogs.com/taxi/p/7717486.html

放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 0
杭州
程序员
私信 提问
前端图片canvas,file,blob,DataURL等格式转换

最近用到一些图片相关的操作,记录一下笔记。 将file转化成base64 场景: 获取到一个file类型的图片,如果直接在html中预览?这里就是利用html5的新特性,将图片转换为Base64的形式显示出来。...

fengxianqi
2018/07/25
0
0
Android 拍照功能的开发

最近在Android上做了拍照功能的开发。 业务场景是:点击界面(HTML5)上的拍照按钮会调用拍照的JS API,获取其返回照片文件的存储路径、扩展名以及照片文件的Base64字符串,然后在界面上显示...

LeoXu
2016/08/16
27
0
C# 图片Base64 编码,图片格式转换

一. Base64的编码规则 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码。它将需要编码的数据拆分成字节数组。以3个字节为一组。按顺序排列24 位数据,再把这24位数据分成4...

鱼煎
2016/12/01
32
0
浏览器问题解决笔记

1.谷歌浏览器图片地址失败显示黑色边框问题 描述:谷歌浏览器在图片地址载入失败时,会提供内部的错误处理机智,加上黑色边框 解决:通过属性选择器,如果img的src为空,我们设置透明度为0 2...

透笔度
2016/12/05
23
0
python PIL/cv2/base64相互转换

PIL和cv2是python中两个常用的图像处理库,PIL一般是anaconda自带的,cv2是opencv的python版本。base64在网络传输图片的时候经常用到。 ##PIL读取、保存图片方法 from PIL import Image img ...

xiaoxin
05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux日志切割工具 logrotate

Linux系统默认安装logrotate,默认的配置文件: /etc/logrotate.conf /etc/logrotate.d/ logrotate.conf:为主配置文件 logrotate.d:为配置相关子系统,用于隔离每个应用配置(Nginx、PHP、...

llzzzz
23分钟前
1
0
不得不收藏的大数据Hadoop教程:Hadoop集群搭建

搭建环境安装时间同步Yum install -y ntpdate 网络时间同步命了 服务器地址是阿里云ntpdate ntp1.aliyun.com 手动时间同步方式date -s "20190622 12:32:00" #yyyymmdd hh:mm:ss完全分布式服务...

好程序员IT
26分钟前
1
0
xhprof php性能分析工具

php7 没有官方版 下载地址git clone https://github.com/longxinH/xhprof cd xhprof/extension/ 进入目录指定phpconfig地址进行安装 extension=xhprof.so xhprof.output_dir=/tmp 安装包中x......

曲文
27分钟前
1
0
CentOS7安装GitLab的过程详解

安装Gitlab Step 1.安准基础依赖 $ yum install -y curl policycoreutils-python openssh-server Step 2.安装Postfix 说明:Postfix是一个邮件服务器,GitLab发送邮件需要用到 $ yum ins...

Linux_Anna
27分钟前
2
0
Centos 用docker安装Confluence

1. 下载官方镜像 docker pull atlassian/confluence-server:6.15.7-alpine 2. 创建并运行容器 docker run -m 1024M --memory-swap -1 -host --net=host --name wiki -d -p 8090:8090 -p 800......

熊小熊会写代码哦
41分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部