直接上代码,要点就是把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. php中使用Curl、socket、file_get_contents三种方法POST提交数据

    抓取远程内容,之前一直都在用file_get_content函数,其实早就知道有curl这么一个好东西的存在,但是看了一眼后感觉使用颇有些复杂,没有file_get_content那么简单,再就是需求 ...

  2. Openstack(十四)创建虚拟机

    启动虚拟机之前需要先做一些前期准备,比如网络和IP地址分配.虚拟机:类型创建等等,具体如下: 14.1网络规划及IP划分 #官网安装文档:https://docs.openstack.org/ocat ...

  3. [svc]ip地址划分

    网络界有2个计算题,一个是子网掩码,另一个就是三次握手,四次回收序列号计算了. 学会如何划分等长子网 学会如何合并网段 学会ip是否能分配 理解特殊的ip地址 ip头部 ip地址分类 现在的IP网络使 ...

  4. 主从同步DNS(BIND)

    看着别人搭建很简单,其实到自己做的时候需要考虑更多的问题. 1.环境 1)操作系统最好一样,配置一样 2)关闭防火墙,selinux,时间要同步(我就是用的纽约的时区,同步中国的时间,虽然时间是相同的 ...

  5. sql server 将时间中的时分秒改为00:00:00

    select convert(varchar(10),getdate(),120

  6. uva1391 2-SAT 问题

    题意在大白书上. 有3 种工作 abc 大于等于平均年龄的可以去做a c 工作, 小于平均年龄的可以去做 bc , 同样转化为2 -sat 去做, 因为对于每个人也只有2 种情况可以作为选择 #inc ...

  7. centos设置代理上网

    centos设置代理上网   假设我们要设置代理为 IP:PORT 1.网页上网 网页上网设置代理很简单,在firefox浏览器下 Edit-->>Preferences-->> ...

  8. Cup fungus in Corvobado Nation Park,Costa Rica

  9. SQL Server2008安装图解

    1).双击set.up安装:

  10. ESP8266调试笔记

    ESP8266 新款版本使用用简要: 此版本若想从FLASH启动进入AT系统,只需中间四个脚接VCC高电平即可,其中GPIO0为高电平代表从FLASH启动,GPIO0为低电平代表进入系统升级状态,此时 ...