Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >js 图片转换base64 base64转换为file对象

js 图片转换base64 base64转换为file对象

作者头像
全栈程序员站长
发布于 2022-07-21 05:31:27
发布于 2022-07-21 05:31:27
9.5K10
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

js 图片转换base64 base64转换为file对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function getImgToBase64(url,callback){
   
   //将图片转换为Base64
  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    function dataURLtoFile(dataurl, filename) {
   
   //将base64转换为文件
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type:mime});
    }
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//可以将图片转换为base64

getImgToBase64('img/test.png',function(data){
   var myFile = dataURLtoFile(data,'testimgtestimgtestimg');
   console.log(myFile);
});

相关: https://www.cnblogs.com/fps2tao/p/9268380.html

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/107436.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月3,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
1 条评论
热度
最新
filename这个形参是什么?文件路径吗,相对路径吗?
filename这个形参是什么?文件路径吗,相对路径吗?
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
图片转换js (img对象,file对象,base64,canvas对象),以及图片压缩方式(转载)
首先想一想我们有哪些需求?大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器;有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库;有时候后它还有可能是一块canvas画布,或者是一个Image对象,或者直接就是一个图片的url地址,我们需要将它们压缩上传到远程;
李维亮
2021/07/08
4.8K0
JS 将 base64编码的图片转化为图片文件【未测试】
需求:将string 类型的base64编码图片转化成File类型的图片文件,用于文件上传
双面人
2019/07/12
5.2K0
base64图片压缩并转换二进制流
base64 压缩 function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; newImage.src = base64.url; newImage.setAttribute('crossOrigin', 'Anonymous'); var imgWidth, imgHeight; newImage.onload = function() { imgWid
我乃小神神
2021/12/07
1.8K0
混合开发 图片上传 base64转file的坑
但是在手机上传确实失败的 ,经过分析发现 手机上base64转 file 生成的file对象和pc版的不同 。
lilugirl
2019/05/28
3K0
base64与二进制互转,保存内容,文件读写:Blob/FileReader/URL/FormData
html5开发常用的对象有:FileReader  FormData File URL  Blob createObjectURL Uint8Array等,这些在日常开发中,需要做图片转base64,base64转而二进制文件,页面截图让用户下载。
周陆军博客
2023/05/07
3K0
面试官昨天问我对base64的理解,着实被问懵了
我们知道一个字节可表示的范围是 0 ~ 255(十六进制:0x00 ~ 0xFF), 其中 ASCII 值的范围为 0 ~ 127(十六进制:0x00 ~ 0x7F);而超过 ASCII 范围的 128~255(十六进制:0x80 ~ 0xFF)之间的值是不可见字符。
用户3806669
2021/03/25
4.6K0
面试官昨天问我对base64的理解,着实被问懵了
base64转file文件源码记录
我们前后端交互图片的时候,一般我们是用base64进行交互的,但是很多时候我们传递图片的时候很多的后端是需要file文件格式的,而不是base64的,所以这个时候是需要进行一个简单的转变
何处锦绣不灰堆
2020/05/28
1.8K0
当前端遇见了强制横屏签字的需求...
在前一阶段的工作中,突然接到了这个需求:_手写签批的页面在移动端竖屏时强制页面横屏展示进行签字_,一开始我觉着只要将页面使用 CSS3 的 transform 进行 rotate 一下就可以了,但是当我尝试后发现并不是像我想象的那样简单。
winty
2023/12/11
5810
当前端遇见了强制横屏签字的需求...
【JS】936- File、Blob、dataURL 和 canvas 的应用与转换
(1) 通常情况下, File 对象是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象,或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
pingan8787
2021/04/26
2.5K0
【JS】936- File、Blob、dataURL 和 canvas 的应用与转换
原生JS调取PC端摄像头源码记录
今天简单的记录一个JS调取摄像头的源码,不是很难,只是为了以后可以直接拿来使用,好的废话不多说,看源码!
何处锦绣不灰堆
2020/05/28
1.9K0
base64转file对象
/** * base64 转 File 对象 * @param url base64 * @param fileName 文件名 */ const base64ToFile = (url: s
小鑫
2022/04/25
2.2K0
高拍仪SDK(文豆FastSnap)
本sdk主要适用于bs(web)架构,可支持谷歌Chrome、火狐Firefox、360极速和安全、Edge、IE10+等支持html5的多种浏览器。
用户11057749
2024/04/30
5730
图片裁切上传插件cropper的使用
图片上传格式一般是文件格式和base64格式,比较方便的是图片格式,后台可以方便的处理上传的图片。
tianyawhl
2019/11/04
2.1K0
js项目中常用的一些工具函数
记录一下在项目中常用的工具函数,随时更新 var utils = { /** * 获取路径参数方法 返回参数值 * @name 参数名字 * */ getQueryString: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); // window.location.search 获取url问号后面部分 v
别盯着我的名字看
2022/06/09
5730
基于vue的图片裁剪插件vue-cropper ,上传图片到腾讯云存储
网上找了点教程,结合之前框架里就有的修改了一下,没做细节优化处理 demo 16:9的尺寸,自己可以修改 步骤: npm install vue-cropper 组件内使用 import { Vue
〆 千寻、
2020/03/11
4.5K0
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
图片压缩对于我们日常生活来讲,是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的。
Vam的金豆之路
2021/12/01
7970
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
cropperjs图片裁剪及数据提交文件流互相转换详解
cropperjs的主要功能是图片裁剪,是一款前端常用的的图片裁剪工具,可根据相关api配置裁剪出符合自己业务需要的图片,具体使用如下:
超级小可爱
2023/12/21
4510
vue+vue-cropper实现上传剪裁图片以及上传时压缩图片
代码暂时都是从项目中抽出来的,只适合借鉴参考,等有时间再单独将这些功能单独写项目,欢迎大家提供更好用的方法或指出不足之处,一起进步。
conanma
2021/11/03
3.6K0
开发中常用的JS知识点集锦
1、对象的深拷贝(一级属性拷贝和多级属性嵌套拷贝) //深拷贝函数(满足属性多级嵌套) function deepCloneObj(sourceObj){ var obj = (sourceO
tandaxia
2018/11/21
5220
ajax+php上传图片,等比压缩,canvas压缩减少上传带宽,优化上传速度
至此后端已经压缩完毕,但是如果上传的图片大多是几M的大图,难免浪费上传带宽,而且会导致速度非常慢,影响用户体验,于是可以使用canvas在上传之前压缩一遍,解决速度慢的问题。
躺平程序员老修
2023/09/05
3410
推荐阅读
相关推荐
图片转换js (img对象,file对象,base64,canvas对象),以及图片压缩方式(转载)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验