前端图片canvas，file，blob，DataURL等格式转换
将file转化成base64
- 方法一：利用URL.createObjectURL()
<!DOCTYPE html>
<html>
<head>
<title>base</title>
</head>
<body>
<input type="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
window.onload = function () {
let $img = document.getElementById('img')
file.onchange = function (e) {
console.log(e.target.files[0])
let file = e.target.files[0]
let fileUrl = window.URL.createObjectURL(file)
$img.src = fileUrl
img.onload = function () {
// 手动回收
URL.revokeObjectURL(fileUrl)
}
}
}
</script>
</body>
</html>
当选择图片后，生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"，能正常显示图片。
- 方法二: 利用FileReader.readAsDataURL()
<!DOCTYPE html>
<html>
<head>
<title>base</title>
</head>
<body>
<input type="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
window.onload = function () {
let $img = document.getElementById('img')
file.onchange = function (e) {
console.log(e.target.files[0])
let file = e.target.files[0]
const fr = new FileReader(file)
fr.readAsDataURL(file)
fr.onload = function () {
$img.src = this.result
}
}
}
</script>
</body>
</html>
img标签的src将会是像这样："data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA==，能够正常显示。
canvas 转为DataURL
场景： canvas画出来的图片，在html中的其他地方显示。这里的方法也是可以将canvas输出为Dataurl的来放到img标签中。
let imgSrc = canvas.toDataURL('image/png')
// canvas.toDataURL('image/jpeg')
canvas转为blob对象
场景： canvas生成的图片，如何上传到七牛云或服务器？答案是将canvas输出为Blob对象，这样就可以像File对象一样操作它了。
canvas.toBlob(function (blobObj) {
console.log(blobObj)
})
canvas.toBlob还有两个参数一个是名称name，另一个是压缩质量quality 0~1
Blob对象显示图片
场景： 获取到的图片是Blob格式的，如何显示在html中？答案还是将Blob对象转换为DataUrl的形式。
canvas.toBlob(function (blobObj) {
let imgSrc = window.URL.createObjectURL(blobObj)
document.getElementById('img').src = imgSrc
})
下载DataURL表示的图片
场景： html中一张用DataURL形式显示出来的图片，可以下载到本地吗？答案是使用一个a标签，并设置download属性，模拟点击。
function downloadImg () {
let aLink = document.createElement('a')
aLink.download = 'fileName.png' // 文件名后缀需要和dataurl表示的相同，否则可能乱码
aLink.href = dataUrl
aLink.click()
}
前端图片canvas，file，blob，DataURL等格式转换的更多相关文章
- [转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript
来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...
- DataURL与File,Blob,canvas对象之间的互相转换的Javascript
canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...
- 前端图片转base64，转格式，转blob，上传的总结
1. 图片文件转base64 <input accept="image/gif,image/jpeg,image/jpg,image/png" type="file ...
- blob canvas img dataUrl的互相转换和用处
blob:代表了一段二进制数据 初始化:var blob = new Blob(array,option)//其中array里面可以包含任意类型对象,option指数据类型如array是['<h ...
- Blob/DataURL/canvas/image的相互转换
函数都比较简单,直接看就ok了 /*-----------------------------------------------------------------------*/ // canva ...
- 上传图片时压缩图片 - 前端（canvas）做法
HTML前端代码: <?php $this->layout('head'); ?> <?php $this->layout('sidebar'); ?> <m ...
- 前端通过canvas实现图片压缩
在一次的项目中,需要用户上传图片,目前市场随便一个手机拍出来的照片都是好几兆,直接上传特别占用带宽,影响用户体验,所以要求对用户上传图片进行压缩后再上传:那么前端怎么实现这个功能呢? 亲测可将4M图片 ...
- canvas压缩、裁切图片和格式转换的方法
按照大小压缩图片,或者按照特定分辨率裁切图片,转为blob数据.自动处理ios中可能存在的照片偏差90°问题. 例如,获取300*300大小的头像,实现以下效果: 使用方式: <!-- 引入js ...
- 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)
把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...
随机推荐
- Java之路---Day16(泛型)
2019-11-02-23:25:26 目录 1.泛型的概念: 2.泛型的定义和使用: 2.1定义和使用含有泛型的类: 2.2定义和使用含有泛型的方法: 2.3定义和使用含有泛型的接口: 泛型的概念: ...
- linux桌面系统的约定
linux系统的桌面系统基本遵循同样的约定. mime类型 在linux下,关于文件类型的信息通常放在/usr/share/mime./usr/local/share/mime和用户目录下,所有应用程 ...
- 「黑客必备技能」Python正则表达式详解
说在前面 正则表达式是一个很强大的字符串处理工具,几乎任何关于字符串的操作都可以使用正则表达式来完成,作为一个爬虫工作者,每天和字符串打交道,正则表达式更是不可或缺的技能. 正则表达式在不同的语言中使 ...
- 003-OpenStack-镜像服务
OpenStack-镜像服务 [基于此文章的环境]点我快速打开文章 1.安装和配置 控制节点(controller) 1.1 创库授权 glance mysql CREATE DATABASE gla ...
- mysql udf提权实战测试
根据前天对大牛们的资料学习,进行一次mysql udf提权测试. 测试环境: 受害者系统:centos 7.7 ,docker部署mysql5.6.46, IP:192.168.226.128 攻击者 ...
- E10【选款式】I don't like that style
核心句型 I don't like that style. 我不喜欢那个款式 场景对话 A:Look at those shoes. They're really nice. 瞧那双鞋.可真漂亮 B: ...
- SQLAlchemy(4)
结果查询 上节课使用query从数据库中查询到了结果,但是query返回的对象是直接可用的吗? 首先导入模块 from connect import session from user_modules ...
- GCC 预处理，汇编，编译，链接，连接静态库，动态库
gcc Record gcc -E file1.c > output gcc -E file1.c -o file1.i gcc -S file1.i -o file1.s gcc -S fil ...
- 201871010133-赵永军《面向对象程序设计（java）》第十周学习总结
201871010133-赵永军<面向对象程序设计(java)>第十周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...
- 201871010133-赵永军《面向对象程序设计（java）》第八周学习总结
201871010133-赵永军<面向对象程序设计(java)>第八周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...