前端图片canvas，file，blob，DataURL等格式转换
最近用到一些图片相关的操作，记录一下笔记。
将file转化成base64
场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法：
方法一：利用URL.createObjectURL()
<!DOCTYPE html> <html> <head> <title>base</title> </head> <body> <input type="file" name="" id="file"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" id="img"> <script type="text/javascript"> window. = 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. = 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" id="img"> <script type="text/javascript"> window. = 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. = 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) }) 复制代码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() }fengxianqi---原文地址：https://juejin.im/post/5b5187da51882519ec07fa41
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦