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

 

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • internal server error wamp「建议收藏」

    internal server error wamp「建议收藏」找到wamp下的httpd.conf文件开启:mod_rewrite.so然后重启就apache服务就可以了!注:打开httpd.conf文件后搜索“mod_rewrite.so”把前面的#去掉也就是开启此功能了!

    2022年7月12日
    18
  • JRTPLIB_刘伯温传简介

    JRTPLIB_刘伯温传简介jrtplib是一个基于C++、面向对象的RTP封装库,最新的版本是3.9.1(2011年11月)。为了与RFC3550相兼容,3.x.x版本经过完全重写,现在它提供了一些非常有用的组件,这些组件为构建各种各样的RTP应用程序开发提供了有用的帮助。较旧的2.x版本依然可用,但是不兼容RFC3550。1.特性    jrtplib支持定义于RFC3550中的RTP协议,它使得发送和接

    2022年7月28日
    3
  • sqlyog证书密钥(注册码)_SQLyog安装教程

    sqlyog证书密钥(注册码)_SQLyog安装教程SQLyogv12.09(64bit)注册码姓名(Name):cr173序列号(Code):8d8120df-a5c3-4989-8f47-5afc79c56e7c或者(OR)姓名(Name):ttrar序列号(Code):8d8120df-a5c3-4989-8f47-5afc79c56e7c…

    2022年4月20日
    4.6K
  • TDD与FDD技术对比

    TDD与FDD技术对比双工(Duplex)是一种在单一通信信道上实现双向通信的过程,包括两种类型,分别为半双工和全双工。  在半双工系统中,通信双方使用单一的共享信道轮流发送数据。双向广播就采用了这种方式。在一方发送数据时,另一方只能收听。数据发送方通常会发出“Over”的信号,表明本方数据发送结束,对方可以开始发送数据。在实际网络中,两台计算机可以使用一根通信电缆来轮流收发数据。  全双工则是指同时的双向通信

    2022年6月6日
    44
  • qtabwidget设置样式_qt qwidget

    qtabwidget设置样式_qt qwidget1、转载一篇当tab页多时,左侧的曲线问题。下面是原文:当tab个数大于一定个数时,会出现如下图左侧白线所示,这个是Qt自带的,作用是点击回到第一个tab隐藏方法:设置qssQTabBar::tear{width:0px;border:none;}原文链接:https://blog.csdn.net/qq411633267/article/details/1056847582、通用样式:…

    2022年9月24日
    3
  • windows根据端口号杀进程_如何通过端口号查看进程

    windows根据端口号杀进程_如何通过端口号查看进程Window根据端口号杀进程

    2025年9月13日
    9

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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