有没有免费的网站空间,网站app开发公司,php网站开发app接口,进一步加强网站建设最近用到一些图片相关的操作#xff0c;记录一下笔记。 将file转化成base64
场景#xff1a; 获取到一个file类型的图片#xff0c;如果直接在html中预览#xff1f;这里就是利用html5的新特性#xff0c;将图片转换为Base64的形式显示出来。有两种方法#xff1a;
方法… 最近用到一些图片相关的操作记录一下笔记。 将file转化成base64
场景 获取到一个file类型的图片如果直接在html中预览这里就是利用html5的新特性将图片转换为Base64的形式显示出来。有两种方法
方法一利用URL.createObjectURL()
!DOCTYPE html
html
headtitlebase/title
/head
body
input typefile name idfile
img src idimg
script typetext/javascriptwindow.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 fileUrlimg.onload function () {// 手动回收URL.revokeObjectURL(fileUrl)}}}
/script
/body
/html当选择图片后生成的img src类似
blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff能正常显示图片。方法二: 利用FileReader.readAsDataURL()
!DOCTYPE html
html
headtitlebase/title
/head
body
input typefile name idfile
img src idimg
script typetext/javascriptwindow.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
/htmlimg标签的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 dataUrlaLink.click()
}参考文章
文件和二进制数据的操作理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型前端图片转base64转格式转blob上传的总结
