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

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

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

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

 

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;
}

 

 

    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});
    }

 

//可以将图片转换为base64

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

 

 

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • nslookup命令的使用方法_nslookup测试命令

    nslookup命令的使用方法_nslookup测试命令介绍nslookup(nameserverlookup)是和dig类似的命令,都是用来查询域名信息的指令,但是在功能上没有dig强大,这个指令在Windows系统是自带的,要想在Linux中使用,就需要下载和dig相同的工具包使用nslookupdomain[dnsserver]#domain:要查询的域名dnsserver:指定域名服务器,如果不指定,系统就会使用默认的DNS服务器如果没有指定查询的服务类型,系统会默认查询A记录查询其他的服务nsloo

    2022年10月18日
  • uIP协议栈分析_协议栈

    uIP协议栈分析_协议栈转载地址:http://blog.sina.com.cn/s/blog_abd39cc70101fj1f.htmluIP特性uIP协议栈往掉了完整的TCP/IP中不常用的功能,简化了通讯流程,但保存了网络通讯必须使用的协议,设计重点放在了IP/TCP/ICMP/UDP/ARP这些网络层和传输层协议上,保证了其代码的通用性和结构的稳定性。由于uIP协议栈专门为嵌进式系统而设计,因此还具有…

  • navicat15永久激活码最新【中文破解版】[通俗易懂]

    (navicat15永久激活码最新)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~V…

  • 一种基于Qt的可伸缩的全异步C/S架构server实现(一) 综述

    一种基于Qt的可伸缩的全异步C/S架构server实现(一) 综述

  • 【前端】HTML详细教程(下篇)[通俗易懂]

    【前端】HTML详细教程(下篇)[通俗易懂]❤️HTML必备知识详解❤️☀️第三部分:特殊符号❄️(1)什么是特殊符号?????(2)为什么需要特殊符号?☔️第四部分:表格⛄️(1)什么是表格?????(2)表格如今用来干啥?????(3)表格初识????实现效果:☁️第五部分:表单(很重要哦!!!)⚡️1.是什么&什么作用&哪些应用????(1)表单是什么?????(2)表单的作用?????(3)表单的应用?????2.表单(form)的属性:????3.表单常用的标签:????(1)input标签:????1.input标

  • php源码中powerby,如何去掉织梦dedecms底部调用cfg_powerby的power by dedecms

    php源码中powerby,如何去掉织梦dedecms底部调用cfg_powerby的power by dedecms我们平常使用织梦后台做建站的时候都会发现,如果调用版权信息的时候,在底部使用cfg_powerby调用的时候出现powerbydedecms的链接信息,而这个链接又是个导出链接,我们怎么样才能一劳永逸的直接去掉呐,下面站优云小编就跟大家分享一下。在之前版本我们的解决方法是:1、去掉{dede:globalname=’cfg_powerby’/};2、进入后台,点击系统->系统基本设…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号