Blob如何在html里转换成图片,前端图片canvas，file，blob，DataURL等格式转换

前端图片canvas，file，blob，DataURL等格式转换最近用到一些图片相关的操作，记录一下笔记。

将file转化成base64

场景：获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法：方法一：利用URL.createObjectURL()html>

base 复制代码

当选择图片后，生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"，能正常显示图片。方法二: 利用FileReader.readAsDataURL()html>

base 复制代码

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) }) 复制代码

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() }

Blob如何在html里转换成图片,前端图片canvas，file，blob，DataURL等格式转换相关推荐

asp.net pdf如何转换成tif_如何将pdf转换成高清图片？你需要这个软件！|电脑|pdf|转换器...
如今在办公中很多人都喜欢将图片保存为PDF格式,因为PDF格式更便捷.但如果想在PDF文件中选取其中一些图片出来,那么应该如何操作呢?小编在这里给大家分享两个PDF转图片的方法,轻松帮助你解决格式转换 ...
php实现视频转gif,在Linux上将视频转换成动态gif图片
本文记录一下在linux上将视频转换成动态gif图片的方法. 首先,需要在Linux系统上安装FFmpeg,我会用这个工具去解压从视频中解压出视频帧. 下面的指令会解压出独立的视频帧,将它们保存为GI ...
怎么把pdf转换成高清图片
怎么把pdf转换成高清图片?可以使用以下两种方法: 方法一:使用Adobe Acrobat Pro DC 1.打开需要转换的PDF文件,点击"文件"菜单中的"导出为&qu ...
如何将mkv视频转换成gif动态图片
网上很多小动画都是GIF格式的,其中也有很多是从视频转换成gif的.其实GIF是将多幅图像保存为一个图像文件,从而形成动画,最常见的就是通过一帧帧的动画串联起来的gif图.那么视频如何制作gif动态图 ...
c#中将dicom文件格式转换成可读图片
c#中将dicom文件格式转换成可读图片不多说,直接上代码 using System; using System.Collections.Generic; using System.IO; usin ...
如何将PDF文件转换成清晰的图片
将PDF文件转换成图片文件的时候,有些人就是直接用截图的方法,截图虽然简单,但是所截取的图片往往没有原来文件那么清楚,并且对多个页面操作时也会很慢.那如何将PDF文件转换成清晰的图片呢? 打开转换器选 ...
Python：使用 pyts 把一维时间序列转换成二维图片
在之前的一篇博客 -- 将一维时间序列转化成二维图片中,我翻译了一篇文章,说的是将一个时间序列信号转换成二维图片: 然后在文章的最后发了一个 Github 代码,这个代码是原文作者的代码,有人反应代码 ...
24.shell中list详解,定义list,获取List的总个数,获取list的某个元素值,将list的每个元素转换成以空格分隔的字符串,空格分隔的字符串转换成list,for循环list
文章目录前言定义list 获取List的总个数获取list的某个元素值将list的每个元素转换成以空格分隔的字符串空格分隔的字符串转换成list for循环list 总结友情链接前言 s ...
怎样将AutoCAD图转换成jpg等图片格式
2019独角兽企业重金招聘Python工程师标准>>> 经常遇到要将AutoCAD绘制的图形插入到Word等文挡里去的情况,尽管Word能够用插入对象的方法来实现,但插入的图形仍保持 ...

Blob如何在html里转换成图片,前端图片canvas，file，blob，DataURL等格式转换

Blob如何在html里转换成图片,前端图片canvas，file，blob，DataURL等格式转换相关推荐

最新文章

热门文章