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


相关推荐

  • matlab读取txt文件为数组「建议收藏」

    matlab读取txt文件为数组「建议收藏」clc;clear;closeall;rows=[1180];%4行到17行。cols=[11];%3到8列。[FileName,PathName]=uigetfile(‘*.txt’,’SelecttheTxtfiles’);%弹出对话框,然后选择你要处理的文件fid=fopen([PathNameFileName]);temp=textscan(f…

    2025年9月18日
    6
  • Django 安装_启动redis的命令

    Django 安装_启动redis的命令安装redis1.使用Homebrew安装Redisbrewinstallredis执行上述命令后出现以下内容,则成功安装Downloadfailed:https://mirrors.

    2022年7月31日
    8
  • PL/SQL Developer下载安装及使用[通俗易懂]

    PL/SQL Developer下载安装及使用[通俗易懂]PL/SQLDeveloper下载安装及使用前言PL/SQLDeveloper是什么PL/SQLDeveloper下载PL/SQLDeveloper安装PL/SQLDeveloper使用PL/SQLDeveloper汉化PL/SQLDeveloper修改字体PL/SQLDeveloper编写SQL代码PL/SQLDeveloper连接远程服务器前言古语说的好,工欲善其事必先利其器。在开发中我们乜需要熟悉各种开发工具、数据库集成开发工具、等其他工具的使用。因为笔者在公司所使用的是or

    2022年10月12日
    2
  • PHP中的GetType和SetType

    PHP中的GetType和SetType

    2021年10月15日
    39
  • Laravel Eloquent ORM理解[通俗易懂]

    Laravel Eloquent ORM理解[通俗易懂]laravelEloquentORM文档:https://laravel-china.org/docs/laravel/5.5/eloquent/1332首先,什么是EloqentORM  官方手册是如此解释的:“Laravel的EloquentORM提供了漂亮、简洁的ActiveRecord实现来和数据库的互动。每个数据库表会和一个对应的「模型」互动”,好吧问题来了  …

    2025年8月7日
    2
  • centos7 安装图形界面

    centos7 安装图形界面本人用VMware版本15.0.2build-10952284(关系不大)开启前要在虚拟机–>设置–>3D图形如下如果是云服务器跳过此步yum下载图形界面软件yumgroupinstall”GNOMEDesktop””GraphicalAdministrationTools”修改配置ln-sf/lib/systemd/system…

    2022年5月16日
    41

发表回复

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

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