将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. Mac下安装npm全局包提示权限不够

    Mac OS下安装npm的全局包,总是出现如下提示Missing write access,需要提升权限才能继续. npm WARN checkPermissions Missing write ac ...

  2. Hive的数据倾斜

    目录 什么是数据倾斜 Hadoop框架的特性 主要表现 容易数据倾斜的情况 产生数据清洗的原因 业务场景 空值产生的数据倾斜 不同数据类型关联产生数据倾斜 大小表关联查询产生数据倾斜 一.什么是数据倾 ...

  3. python 之Lambda表达式

    python 的 lambda 表达式 python写一些执行脚本时,使用lambda就可以省下定义函数的过程,比如说我们只是需要写个简单的脚本来管理服务器时,我们就不用专门定义函数然后再写调用,使用 ...

  4. Java代码实现定时器

    一 import java.util.Timer; import java.util.TimerTask; public class time { public static void main(St ...

  5. AssetBundleMaster_ReadMe_EN

    Before we start use it, you'd better import it to an empty project, following the ReadMe to learn th ...

  6. LNK2001 无法解析的外部符号 __imp__CameraCreateSettingPage@24

    用VS2017,Release X86进行编译时显示如下错误: 1>CWDMDlg.obj : error LNK2001: 无法解析的外部符号 __imp__CameraGetImageBuf ...

  7. luogu P1904 天际线

    分析 都知道是从左向右扫描 可是该维护什么,扫描什么? 注意想想怎么输出, 实际上它要的输出就是图形的轮廓,即每个突出块的左上节点的x,y 所以说, 我们可以把扫描线扫进的楼房放入线段树,扫出的楼房删 ...

  8. 关于setImageURI out of memory的一些解决办法

    http://stackoverflow.com/questions/477572/strange-out-of-memory-issue-while-loading-an-image-to-a-bi ...

  9. node fs相对路径

    如果在js里面使用了node.js的fs,在传入path参数时,如果使用相对路径,按照根目录的层级就是用就好. 比如:目录结构为: a -b -c -c1.js d 在c1.js中调用时,如果需要使用 ...

  10. win10经常无法复制粘贴

    两种方法尝试一下: 1. 在c:\windows\system32 目录下新建文件夹,命名为clip 2. 因为有道词典会监控并占用你的剪贴板,请尝试关闭有道词典的[取词]和[划词]功能,如果还不行就 ...