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"));
js base64 转成图片上传的更多相关文章
- base64格式的图片上传阿里云
base64格式的图片上传阿里云 上传图片的时候,除了普通的图片上传,还有一张图片信息是以base64格式发送到后台的. 后台接受base64格式的图片,上传至阿里云代码:(主要是将base64转化成 ...
- Kindeditor JS 富文本编辑器图片上传指定路径
js //================== KindEditor.ready(function (K) { var hotelid = $("#hotelid").val(); ...
- Js 之移动端图片上传插件mbUploadify
一.下载 https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw 提取码:vx7e 二.Demo示例 <div class="weui_uplo ...
- 如何把base64格式的图片上传到到阿里云oss c#版
今天碰到需要把canvas上的的图片转存到阿里云oss,于是百度了半天,一个能打的答案都没有.怒了,自己搞起. 代码超级简单,需要先引入nuget 中啊里云的oss api 1 byte[] arr ...
- js Base64 转化成图片格式
function dataURLtoFile(dataurl, filename = 'file') { let arr = dataurl.split(',') let mime = arr[0]. ...
- PHP多图片上传实例demo
upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
- asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试
1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...
- jQuery图片上传前先在本地预览
js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...
随机推荐
- stringbuffer 和 stringbuilder区别
stringbuffer 和 stringbuilder速度 小于 线程安全 线程非安全 单线程操作大量数据用stringbui ...
- The adidas NMD Singapore is one of the brands top selling
Like pointed out, we've two adidas NMD Singapore releases using the first arriving Blue and Black as ...
- 新版samba安装过程
yum install samba samba-client samba-swat cp -p /etc/samba/smb.conf /etc/samba/smb.conf.orig /bin ...
- postman--实现接口自动化测试
postman使用 开发中经常用postman来测试接口,一个简单的注册接口用postman测试: 接口正常工作只是最基本的要求,经常要评估接口性能,进行压力测试. postman进行简单压力测试 下 ...
- Python基础笔记之同时装了Python3和Python2,怎么在命令行使用pip
我们在安装Python3(>=3.3)时,Python的安装包实际上在系统中安装了一个启动器py.exe,默认放置在文件夹C:\Windows\下面.这个启动器允许我们指定使用Python2还是 ...
- 辅助模块应用(auxiliary/scanner/portscan/tcp)
实验步骤 创建msf所需的数据库 之前我们开启msf时下面总会出现一个红色的小减号,原来是因为没有和数据库键连接,于是首先我们要手动建立一个数据库... 使用命令来实现: service postgr ...
- 项目:Android平台txt阅读软件
项目:Android平台txt阅读软件 项目组成员:20145107李长达.20145110屠轶成.20145120黄玄曦.20145122程智崟 Need: 从古至今,阅读都是人类生活中的一大部分, ...
- 设置WebApi里面命名空间参数
在这种情况下: 如果没有特别处理,会报: 所以要像MVC中的控制器一下配置一个命名空间参数,webapi里面没有自带这个功能 代码: using System; using System.Collec ...
- IDEA上面如何添加创建的文件类型
首先在IDEA --> new 一个文件的时候 以 创建vue文件为例子,来添加vue文件类型文件 选项 edit file templates 添加 这样就OK了 转载需注明出处,谢谢! au ...
- POJ 2337 Catenyms
http://poj.org/problem?id=2337 题意: 判断给出的单词能否首尾相连,输出字典序最小的欧拉路径. 思路: 因为要按字典序大小输出路径,所以先将字符串排序,这样加边的时候就会 ...