将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. java中设置session过期时间

    Web容器 apache-tomcat-8.0.26\conf\web.xml中设置 <session-config> <!-- 时间单位为分钟 --> <session ...

  2. window10 蓝牙怎么连接音响或蓝牙耳机

    window10 蓝牙怎么连接音响或蓝牙耳机 1.在电脑上依次点击win图标右键-->设置,打开系统设置窗口. 2.点击“设备”,在窗口左侧选择“蓝牙”,右侧检查并开启电脑的蓝牙设备开关, 3. ...

  3. 关于git回退版本的一点心得

    我由于开发中不小心在master分支上开发,忘记了切换分支,最后我直接在master分支上提交,push,在开发分支上merge了master分支. 然后,同事告诉我他的代码要准备上线了,然而我的代码 ...

  4. es7之修饰器

    什么是修饰器 修饰器其实就是一个普通的函数,用来修饰类以及类的方法. 比如: @test class DecoratorTest { } function test(target) { target. ...

  5. MySql常用操作【基础且详细(●'◡'●)】

    有那么挺长段时间没有敲代码了,今敲起来竟然有些sql都想不起来了

  6. Hive：数据倾斜

    数据倾斜问题 数据倾斜是大数据领域绕不开的拦路虎,当你所需处理的数据量到达了上亿甚至是千亿条的时候,数据倾斜将是横在你面前一道巨大的坎.很可能有几周甚至几月都要头疼于数据倾斜导致的各类诡异的问题. 数 ...

  7. Fundebug后端Node.js插件更新至0.2.0，支持监控Express慢请求

    摘要: 性能问题也是BUG,也需要监控. Fundebug后端Node.js异常监控服务 Fundebug是专业的应用异常监控平台,我们Node.js插件fundebug-nodejs可以提供全方位的 ...

  8. java查看进程：jps命令

    java查看进程:jps命令 jps(Java Virtual Machine Process Status Tool) 是JDK .5提供的一个显示当前所有java进程pid的命令,简单实用,非常适 ...

  9. Appium基础：appium相关API

    1.获取信息类: 1.1 获取当前界面的组件: driver.currentActivity(); //获取当前界面的activity,可用于断言是否跳转到预期的activity 1.2 获取当前页面 ...

  10. 201871020225-牟星源《面向对象程序设计（java）》第十六周学习总结

    201871020225-牟星源<面向对象程序设计(java)>第十六周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...