动态(gif)、静态图片转换成DataURL(base64编码)格式
DataURL简介
Data URLs,即为前缀为 data:scheme 的URL,其允许内容创建者向文档中嵌入小文件。
Data URLs 由四个部分组成:前缀(数据:),指示数据类型的MIME类型,如果非文本则为可选的base64令牌,数据本身:
data:[<mediatype>][;base64],<data>
如:”data:image/png;base64,iVBORw0KGgoAAA…”
详见MDN Web技术文档:Data URLs
转换远程图片
借助canvas的toDataURL方法
- 通过Image对象或是img元素发起请求,不存在跨域问题;
- 由于canvas固有限制,该方法只能转换静态图片。
let img = new Image();
// 或者
// let img = document.createElement('img');
img.onload = function(){let canvas = document.createElement('canvas'),width = img.width,height = img.height;canvas.width = width;canvas.height = height;canvas.getContext('2d').drawImage(img, 0, 0, width, height);console.log( canvas.toDataURL() );// => "data:image/png;base64,iVBORw0KGgoAAA..."
};
// 因Image的src一旦赋值,便立即发起请求,故onload应写在src之前
img.src = '/path/to/target.png';
借助FileReader的readAsDataURL方法
- 通过fetch或是ajax发起请求,受跨域问题限制;
- 该方法可以转换任意文件,不仅仅是图片。
使用异步交互新星fetch
使用fetch获取远程文件,再调用readAsDataURL方法将其转换DataURL数据
fetch('/path/to/target.gif').then(respone => respone.blob()) // 将响应体转换成blob格式数据.then(blob => {let reader = new FileReader(); reader.onloadend = function(){console.log(reader.result); // 输出DataURL数据};reader.readAsDataURL(blob); // 将blob数据转换成DataURL数据}).catch(console.error);
使用jQuery的ajax方法
ajax的用法与fetch相近,值得注意的是, XMLHttpRequest Level 2才支持设置响应数据类型为blob格式
$.ajax('/path/to/target.gif', {xhrFields: {responseType: 'blob' // 指定响应数据类型为blob格式}}).then(blob => {let reader = new FileReader(); reader.onloadend = function(){console.log(reader.result);};reader.readAsDataURL(blob);}).catch(console.error);
转换本地图片
通过input标签获取本地文件,再借助readAsDataURL方法将其转换成DataURL数据
<input type="file" onchange="toDataURL(this)" />
<script type="text/javascript">function toDataURL(el){let reader = new FileReader(); reader.onloadend = function(){console.log(reader.result);};reader.readAsDataURL(el.files[0]); // el.files[0]为选中的文件}
</script>
动态(gif)、静态图片转换成DataURL(base64编码)格式相关推荐
- python将图片转换成动漫,python实现图片转换成素描和漫画格式
本文实例为大家分享了python实现图片转换成素描和漫画格式的具体代码,供大家参考,具体内容如下 原图 图片转换后的成果 源码 # -*- coding: utf-8 -*- import cv2 f ...
- pythonmat文件转excel_利用python将图片转换成excel文档格式详解
本文主要介绍了关于利用python将图片转换成excel文档的相关内容,编写了一小段Python代码,将图片转为了Excel,纯属娱乐,下面这篇文章主要给大家介绍了关于利用python将图片转换成ex ...
- python图片转成素描_巧用python实现图片转换成素描和漫画格式
[相关学习推荐:python教程] 本文实例为大家分享了python实现图片转换成素描和漫画格式的具体代码,供大家参考,具体内容如下 原图 图片转换后的成果 源码# -*- coding: utf-8 ...
- python风格变换图片_巧用python实现图片转换成素描和漫画格式
[相关学习推荐:python视频教程] 本文实例为大家分享了python实现图片转换成素描和漫画格式的具体代码,供大家参考,具体内容如下 原图 图片转换后的成果 源码# -*- coding: utf ...
- python照片转化为漫画_巧用python实现图片转换成素描和漫画格式
[] 本文实例为大家分享了python实现图片转换成素描和漫画格式的具体代码,供大家参考,具体内容如下 原图 图片转换后的成果 源码# -*- coding: utf-8 -*- import cv2 ...
- python漫画滤镜怎么实现的_python实现图片转换成素描和漫画格式
本文实例为大家分享了python实现图片转换成素描和漫画格式的具体代码,供大家参考,具体内容如下 原图 图片转换后的成果 源码 # -*- coding: utf-8 -*- import cv2 f ...
- python将图片转动漫_python实现图片转换成素描和漫画格式
本文实例为大家分享了python实现图片转换成素描和漫画格式的具体代码,供大家参考,具体内容如下 原图 图片转换后的成果 源码 # -*- coding: utf-8 -*- import cv2 f ...
- python将图片转换成动漫_python图片转换成素描和漫画格式的方法
python图片转换成素描和漫画格式的方法 发布时间:2020-08-20 09:30:41 来源:亿速云 阅读:79 作者:小新 小编给大家分享一下python图片转换成素描和漫画格式的方法,相信大 ...
- python将图片转换成动漫_python实现图片转换成素描和漫画格式
本文实例为大家共享了python实现图片转换成素描和漫画格式的详细代码,供大家参考,详细内容如下 原图 图片转换后的成果 源码 # -*- coding: utf-8 -*- import cv2 f ...
最新文章
- C++:运算符重载函数之成员运算符重载函数
- 如何使用SMTPDiag 工具
- VTK:Parallel之ExodusIIWriter
- centos 需要哪些常用端口_Docker 最常用的镜像命令和容器命令
- Nginx进程间的通信机制
- 【干货】如何搭建靠谱的数据仓库.pdf(附下载链接)
- 【Javascript第二重境界】序
- obs之lame编码
- java hough_java – 如何实现Hough变换?
- windows环境下使用virtualenv对python进行多版本隔离
- 第二章 oracle 10g体系结构及安全管理
- 系统集成项目管理工程师-历年真题分析与解答 Android版
- linux MySQL .sock_Linux 下找不到 mysql.sock 的解决方法
- linux sd卡修复工具,免费的SD卡数据恢复工具介绍
- css中flex设置为1是什么意思
- 模拟题【枚举计数】咒语
- 中望3D2022 草图综合训练
- 三星schi779 android版本更新,SCH-I779
- 想用Charles抓包,某些app不让抓怎么办
- 群晖NAS的公网、NAT、DDNS、证书等配置二