将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. Linux CentOS 下安装.net core sdk

    注册Microsoft密钥 sudo rpm -Uvh https://packages.microsoft.com/config/rhel/7/packages-microsoft-prod.rpm ...

  2. 5.InfluxDB-InfluxQL基础语法教程--WHERE子句

    本文翻译自官网,官网地址:(https://docs.influxdata.com/influxdb/v1.7/query_language/data_exploration/) WHERE子句 语法 ...

  3. 关于UE4音效的一些小问题

    前言 前几天实在忍受不了StarterContent默认音效的折磨,去网上翻罗了一下初中时很着迷的游戏<Bounce-Tales>的音效,在导入音效时出了点问题,特此说明一下解决方案,希望 ...

  4. 简单的深度神经网络实现——使用PyTorch

    使用的数据集是MNIST,预期可以达到98%左右的准确率. 该神经网络由一个输入层,一个全连接层结构的隐含层和一个输出层构建. 1.配置库和配置参数 import torch import torch ...

  5. linux (08) nginx入门详解

    一. nginx 入门 nginx 入门学习 web服务器软件 windows IIS服务器 linux nginx apache 收费​lighthttp 公司的技术栈 收费版技术栈 apache ...

  6. c# 第9节 数据类型之值类型

    本节内容: 1:数据类型是什么 1:数据类型是什么 2:数据类型--值类型 3:值类型和引用类型的区分 画图现象: 3:值类型的种类 整数: 浮点数: 字符:

  7. Nginx 环境搭建 （windows）

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

  8. Chrome 禁止 http 自动转化为https

    Chrome 浏览器 地址栏中输入 chrome://net-internals/#hsts 在 Delete domain security policies 中输入项目的域名,并 Delete 删 ...

  9. ESA2GJK1DH1K升级篇: 快速的移植升级程序到自己的项目(BootLoader程序制作)

    前言 此代码兼容STM32F103全系列 为避免添加上升级程序造成内存不足,请使用128KB Flash及其以上的型号 这篇文章是为了能够让大家快速移植我的升级模板程序到自己的项目 BootLoade ...

  10. Python 包制作

    Python 包制作 官方文档 Python 包目录 /package_parent_folder /package /__init__.py 在__init__.py文件内添加name = pack ...