直接上代码,要点就是把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"));

js base64 转成图片上传的更多相关文章

  1. base64格式的图片上传阿里云

    base64格式的图片上传阿里云 上传图片的时候,除了普通的图片上传,还有一张图片信息是以base64格式发送到后台的. 后台接受base64格式的图片,上传至阿里云代码:(主要是将base64转化成 ...

  2. Kindeditor JS 富文本编辑器图片上传指定路径

    js //================== KindEditor.ready(function (K) { var hotelid = $("#hotelid").val(); ...

  3. Js 之移动端图片上传插件mbUploadify

    一.下载 https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw 提取码:vx7e 二.Demo示例 <div class="weui_uplo ...

  4. 如何把base64格式的图片上传到到阿里云oss c#版

    今天碰到需要把canvas上的的图片转存到阿里云oss,于是百度了半天,一个能打的答案都没有.怒了,自己搞起. 代码超级简单,需要先引入nuget 中啊里云的oss api 1 byte[] arr ...

  5. js Base64 转化成图片格式

    function dataURLtoFile(dataurl, filename = 'file') { let arr = dataurl.split(',') let mime = arr[0]. ...

  6. PHP多图片上传实例demo

    upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  8. asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  9. jQuery图片上传前先在本地预览

    js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...

随机推荐

  1. Nodepad++ 资料整理

    http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/webhelp/use_sbracket_lite_autocomplete_ ...

  2. java之简单工厂

    1.使用步骤 创建抽象/接口产品类,定义具体产品的公共接口方法:(产品接口类) 创建具体产品类,是继承抽象产品类的:(产品接口实现类) 创建工厂类,通过创建静态方法根据传入不同参数从而创建不同具体产品 ...

  3. http之状态码含义

    状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别: 1xx:指示信息--表示请求已接收,继续处理 2xx:成功--表示请求已被成功接收.理解.接受 3xx:重定向--要完成请求必须进行 ...

  4. FTRL与Online Optimization

    1. 背景介绍 最优化求解问题可能是我们在工作中遇到的最多的一类问题了:从已有的数据中提炼出最适合的模型参数,从而对未知的数据进行预测.当我们面对高维高数据量的场景时,常见的批量处理的方式已经显得力不 ...

  5. .net core 2.2 & Mongodb

    .net core 2.2 API项目中使用Mongodb 简单的CRUD封装 创建FoodPlan.Core 项目 创建IEntityBase.cs 接口约束 创建Single.cs 实体 IEnt ...

  6. 高可用Mysql架构_Haproxy+keepalived+mycat集群的配置

    接上一篇文章http://www.cnblogs.com/wt645631686/p/8310891.html,虽然已经在原有两台mycat基础上增加了Haproxy作为mycat的中间服务器,不足的 ...

  7. TrueCrypt简介及TrueCrypt 7.1a Source.zip源码在VS2008下的编译过程

    转载:http://blog.csdn.net/cncrypt/article/details/51565493 转载:http://www.cnblogs.com/shenjieblog/p/521 ...

  8. ESXi上的固态硬盘识别为非SSD

    启动ESXi的SSH服务 通过SSH远程连接ESXi主机 输入如下命令 # esxcli storage nmp device list        #列出储存清单(SSD设备的“device na ...

  9. [参考]用递归的方法获取 字符 对应的 二进制字符串 (C/C++)

    将字符转换为16进制字符串.十进制字符串可以参考这里:https://www.cnblogs.com/stxs/p/8846545.html 代码及调试结果 举例:字符'a',查ASCII码表它对应的 ...

  10. class文件的结构

    任何一个class文件都对应着唯一一个类或接口的定义信息,但反过来说,类或接口的定义信息并不一定都在文件里(比如类或接口也可以通过类加载器直接生成) class文件是一组以8位字节为基础单位的二进制流 ...