将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. jQuery 选择器有61种你都知道了多少

    下面列举了61种jQuery 选择器 参考 选择器 语句 描述 * $("*") 选择所有元素 #id $("#lastname") id=“lastname” ...

  2. 我脑中的JVM大全附带Java8的特性

    Java虚拟机-sun classic vm 世界上第一款商用的Java虚拟机. 只能使用纯解释器的方式来执行Java代码. Java虚拟机-ExactVM Exact Memory Manageme ...

  3. AOD.NET实现数据库事物Transaction

    在开始介绍文章主要内容前先简单说一下事务 1.事务介绍 事务是一种机制.是一种操作序列,它包含了一组数据库操作命令,这组命令要么全部执行,要么全部不执行.因此事务是一个不可分割的工作逻辑单元.在数据库 ...

  4. eclipse 导出 jar包详细步骤

    如图所示:

  5. element实现vue级联多选

    已经有大神完成element的改造github:https://github.com/webCoderJ/ele-multi-cascader#Attributes 已实践可用

  6. RPC 初识

    RPC是什么 RPC(Remote Procedure Call) 释义是远程过程调用,常存在于分布式系统中. 比如说现在有两台服务器A, B,一个在A服务器上的应用想要调用B服务器上的应用提供的某个 ...

  7. 数字，字符串，time模块，文本进度条

    数字和字符串 数字类型 整形 整数, 1/2/3/12/2019 整形用来描述什么, 身高/年龄/体重 age = 18 height = 180 浮点型 浮点数,小数 salary = 10 pri ...

  8. pymysql之有序字典

    #!/usr/bin/env python #-*-coding:utf-8-*- import pymysql import json import collections conn = pymys ...

  9. 流程及迭代驱动测试管理软件， itest 发布到开源中国

    itest 源码已发布到码云 ,项目已被开源中国收录!详见  https://www.oschina.net/p/itest-cn 测试人自己开发,汇聚10年沉淀,独创流程驱动测试.度量展现测试人价值 ...

  10. mysql-存储过程-触发器-事务---4

    本节所讲内容: 存储过程   触发器 事务 一.存储过程 什么是存储过程 大多数SQL语句都是针对一个或多个表的单条语句.并非所有的操作都怎么简单.经常会有一个完整的操作需要多条才能完成.存储过程(S ...