当前位置: 首页 > news >正文

js base64 转成图片上传

 

直接上代码,要点就是把base64转成Blob,添加到FormData传递给后台程序,跟选择图片文件上传时一样的了。

 

var dataurl = canvas.toDataURL('image/png'); //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);
}
var obj = new Blob([u8arr], {type:mime});
var fd = new FormData();
fd.append("upfile", obj,"image.png");
$.ajax({
    url: "/file/upfile",
    type: "POST",
    processData: false,
    contentType: false,
    data: fd,
    success: function (data) {
        console.log(data);
    }
});

//canvas保存图片到本地 
(function(t){
    var dlLink = t || document.createElement("a");
    if(!t){
        dlLink.id='dlLink';
        dlLink.download = '文件名'; 
        document.body.appendChild(dlLink);
    }
    dlLink.href = dataurl;
    dlLink.click();
})(document.querySelector("#dlLink"));

 

转载于:https://www.cnblogs.com/web-fusheng/p/10186496.html

相关文章:

  • 超像素、语义分割、实例分割、全景分割 傻傻分不清?
  • webpack压缩图片之项目资源优化
  • 内存释放
  • 我的译作
  • .net core MVC 通过 Filters 过滤器拦截请求及响应内容
  • 百度排名公式最新版
  • Day6:html和css
  • NAT技术及其应用
  • Verilog实现同步FIFO
  • 做个md5查询站(3)数据格式
  • C语言博客作业06--结构体文件
  • 事件类型
  • 英语数字读法
  • bootstrp的datetimepicker插件获取选定日期
  • 08年cpu
  • 2019.2.20 c++ 知识梳理
  • C++类的相互关联
  • Docker 1.12实践:Docker Service、Stack与分布式应用捆绑包
  • ES6系列(二)变量的解构赋值
  • Intervention/image 图片处理扩展包的安装和使用
  • Javascript设计模式学习之Observer(观察者)模式
  • JDK9: 集成 Jshell 和 Maven 项目.
  • js作用域和this的理解
  • PHP的Ev教程三(Periodic watcher)
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 个人博客开发系列:评论功能之GitHub账号OAuth授权
  • 跨域
  • 力扣(LeetCode)965
  • 浅析微信支付:申请退款、退款回调接口、查询退款
  • 设计模式走一遍---观察者模式
  • 深度学习在携程攻略社区的应用
  • 世界编程语言排行榜2008年06月(ActionScript 挺进20强)
  • 智能合约开发环境搭建及Hello World合约
  • 中国人寿如何基于容器搭建金融PaaS云平台
  • HanLP分词命名实体提取详解
  • 策略 : 一文教你成为人工智能(AI)领域专家
  • 好程序员大数据教程Hadoop全分布安装(非HA)
  • 完善智慧办公建设,小熊U租获京东数千万元A+轮融资 ...
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • # Swust 12th acm 邀请赛# [ K ] 三角形判定 [题解]
  • ###项目技术发展史
  • #HarmonyOS:基础语法
  • (+4)2.2UML建模图
  • (06)Hive——正则表达式
  • (2022版)一套教程搞定k8s安装到实战 | RBAC
  • (android 地图实战开发)3 在地图上显示当前位置和自定义银行位置
  • (Repost) Getting Genode with TrustZone on the i.MX
  • (ZT) 理解系统底层的概念是多么重要(by趋势科技邹飞)
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (附源码)ssm高校运动会管理系统 毕业设计 020419
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • (一)认识微服务
  • (转)原始图像数据和PDF中的图像数据
  • .net Stream篇(六)