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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • java.lang.noclassdeffounderro_cannot resolve reference to bean

    java.lang.noclassdeffounderro_cannot resolve reference to bean1.首先创建项目选择版本号跟要导入的包创建项目之后,导包的时候出现了问题找了半天问题我发现是spring-cloud-starter-netflix-eureka-server默认的版本号太高,然后去Maven仓库换了个版本低的,就是下面这个<dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netfl

    2022年8月20日
    3
  • java中遍历数组_java循环取数组值

    java中遍历数组_java循环取数组值第一种方法(传统方法)inta[]={1,2,3,4,5};for(inti=0;i<a.length;i++){System.out.println(a[i]);}第二种方法(非传统方法)inta[]={1,2,3,4,5};for(inti:a){System.out.println(i);}注意:其中i的数据类型要和数组a的数组类型保持一致。第三种方…

    2022年9月19日
    1
  • 01字典树 详解「建议收藏」

    01字典树 详解「建议收藏」欢迎关注我的个人博客:www.zuzhiang.cn以前只知道字典树可以降低空间复杂度,今天无意中接触了01字典树,原来可以用它来降低时间复杂度,下面我就来给大家介绍一下01字典树的原理和应用。01字典树主要用于解决求异或最值的问题。我先放上简单的模板,然后再讲解它的原理。inttol;//节点个数LLval[32*MAXN];//点的值i…

    2022年9月7日
    1
  • 微型计算机的性能主要取决于多选,广东计算机一级考试试题

    微型计算机的性能主要取决于多选,广东计算机一级考试试题广东计算机一级考试试题53、在word的哪种视图方式下,可以显示分页效果()A、普通B、大纲C、页面*D、主控文档54、在word的编辑状态,连续进行了两次”插入”操作,当单击一次”撤消”按钮后()A、将两次插入的内容全部取消B、将第一次插入的内容全部取消C、将第二次插入的内容全部取消*D、两次插入的内容都不被取消55、在WINDOW95中,若在某一文档中连续进行了多次剪切操作,当关…

    2022年6月28日
    23
  • 单例设计模式的几种写法(java版本、超详细)

    单例设计模式的几种写法(java版本、超详细)

    2021年8月4日
    75
  • windows 安装Anaconda和PyCharm 安装配置pytorch环境 伪保姆级教程

    windows 安装Anaconda和PyCharm 安装配置pytorch环境 伪保姆级教程windows安装Anaconda和PyCharm安装配置pytorch环境伪保姆级教程写在前面:如果有刚刚起步的小白,可以先看看这段话,主要是介绍Anaconda、PyCharm的区别,不需要的可以跳过。PyCharm是一种常用的python编程IDE。用来运行和调试python代码。Anaconda指的是一个开源的Python发行版本,其包含了conda、Python等180多个科学包及其依赖项。运行环境和工具包的下载与安装可以由Anaconda进行管理。也就是说如果你装了Ana

    2022年8月28日
    0

发表回复

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

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