动态(gif)、静态图片转换成DataURL(base64编码)格式

本文介绍了如何将动态和静态图片转换为DataURL(base64编码)格式。对于远程图片,可以利用canvas的toDataURL方法(仅限静态图片)或结合fetch与FileReader的readAsDataURL方法;对于本地图片,可以通过input标签配合FileReader来完成转换。涉及到的技术包括fetch、jQuery的ajax、canvas以及Data URLs。
摘要由CSDN通过智能技术生成

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方法

  1. 通过Image对象或是img元素发起请求,不存在跨域问题;
  2. 由于canvas固有限制,该方法只能转换静态图片。
let img = new Image();
// 或者
// let img = docum
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值