将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等格式转换的更多相关文章

  1. [转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript

    来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...

  2. DataURL与File,Blob,canvas对象之间的互相转换的Javascript

    canvas转换为dataURL (从canvas获取dataURL) var dataurl = canvas.toDataURL('image/png'); var dataurl2 = canv ...

  3. 前端图片转base64，转格式，转blob，上传的总结

    1. 图片文件转base64 <input accept="image/gif,image/jpeg,image/jpg,image/png" type="file ...

  4. blob canvas img dataUrl的互相转换和用处

    blob:代表了一段二进制数据 初始化:var blob = new Blob(array,option)//其中array里面可以包含任意类型对象,option指数据类型如array是['<h ...

  5. Blob/DataURL/canvas/image的相互转换

    函数都比较简单,直接看就ok了 /*-----------------------------------------------------------------------*/ // canva ...

  6. 上传图片时压缩图片 - 前端（canvas）做法

    HTML前端代码: <?php $this->layout('head'); ?> <?php $this->layout('sidebar'); ?> <m ...

  7. 前端通过canvas实现图片压缩

    在一次的项目中,需要用户上传图片,目前市场随便一个手机拍出来的照片都是好几兆,直接上传特别占用带宽,影响用户体验,所以要求对用户上传图片进行压缩后再上传:那么前端怎么实现这个功能呢? 亲测可将4M图片 ...

  8. canvas压缩、裁切图片和格式转换的方法

    按照大小压缩图片,或者按照特定分辨率裁切图片,转为blob数据.自动处理ios中可能存在的照片偏差90°问题. 例如,获取300*300大小的头像,实现以下效果: 使用方式: <!-- 引入js ...

  9. 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)

    把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...

随机推荐

  1. Python【day 13】内置函数01

    1.python3.6.2 一共有 68个内置函数2.分成6个大类 1.反射相关-4个 2.面向对象相关-9个 3.作用域相关--2个 1.globlas() #注意:最后是s,复数形式 查看全局作用 ...

  2. 2.原生js实现图片懒加载

    网上查了很多图片懒加载的内容, 但基本上都是jQuery实现的, 没有说清楚其原理, 所以研究了一下 多的不说, 上代码, 看不明白的建议看下我的上一篇文章<1. 图解浏览器和用户设备的宽高等属 ...

  3. Jmeter对服务器进行压力测试

    一.插件准备 下载地址:https://jmeter-plugins.org/downloads/all/ 1.下载插件管理: 2.将管理插件放到jmeter/../ext文件夹中 3.在插件管理中搜 ...

  4. 【已解决】git怎么合并多个分支到主干master

    git支持很多种工作流程,我们采用的一般是这样,远程创建一个主分支,本地每人创建功能分支,日常工作流程如下: 去自己的工作分支$ git checkout workbranch 工作.... 提交工作 ...

  5. 【已解决】git的一些常用命令

    git:分布式的版本管理系统,一般的开发模式: 如果是开发人员,忽略此步骤,从下面大字的开始即可: 项目开始阶段,初始化项目(init),提交本地的代码到仓库,将本地仓库的代码推送到远端库(push) ...

  6. vsftpd服务

    vsftpd服务 文件传输协议(file transfer protocol,FTP),基于该协议FTP客户端与服务端可以实现共享文件,上传文件,下载文件.ftp基于TCP协议生成一个虚拟的连接,主要 ...

  7. c# 第13节 迭代语句、while、do...while、for、foreach、goto

    本节内容: 1:迭代语句是什么 2:迭代语句之while 3:迭代语句之 do...while 4:迭代语句之for 5:迭代语句之foreach: 6:跳转语句break.continue.retu ...

  8. java web问题总结

    1.java web上传附图页面空,无返回 原因:前端页面与后台端口不一致,无页面可返回 2.上传excel导入数据时,只能导入第一条,后面的数据无法导入,缓存设置过小.

  9. Nginx 环境搭建 （windows）

    Nginx 环境搭建 (windows) 资源 # nginx在线文档和支持 For online documentation and support please refer to nginx.or ...

  10. hekaiming专坑

    先挖个 图像去雾之何凯明暗通道先验去雾算法原理及c++代码实现 ICCV 2017:FAIR Mask R-CNN ICCV 2017:FAIR 密集物体检测的 Focal Loss one-stag ...