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 ...
随机推荐
- Linux相关知识总结
查看CPU使用情况 查看内存 ps命令显示所有运行中的进程等命令 top 命令用来显示CPU的使用情况free命令用来显示内存的使用情况 select和epoll区别select,poll,epoll ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON HSerializedItem
zw版[转发·台湾nvp系列Delphi例程]HALCON HSerializedItem procedure TForm1.FormShow(Sender: TObject);var img, im ...
- SQL Server System.Data.SqlClient.SqlException:已成功于服务器建立连接,但是在 登录前的握手期间发生错误
一.错误描述 错误名称如上.整体错误如下: System.Data.EntityException 基础提供程序在Open上失败--> System.Data.SqlClient.SqlExce ...
- WebCollector2.7爬虫框架——在Eclipse项目中配置
WebCollector2.7爬虫框架——在Eclipse项目中配置 在Eclipse项目中使用WebCollector爬虫非常简单,不需要任何其他的配置,只需要导入相关的jar包即可. Netbea ...
- impress.js初体验——前端装X利器
impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具).其功能包括画布的无限旋转与缩放,任意角度放置 ...
- CEF3开发者系列之CefEnableHighDPISupport详解
在CEF3中,CefEnableHighDPISupport()这个接口函数在使用时一般不为人所注意,但是如果稍有不慎,会造成打开的网页不能填满窗口的问题.如果是需要flash插件才能运行的游戏.则会 ...
- 采用注解方式实现security
采用注解方式使用security,首先我们需要用注解方式实现Spring MVC,新建一个Maven项目 本项目目录结构如下: 我们会发现在WEB-INF中没有web.xml文件,下面会介绍,采用j ...
- POJ 2443 Set Operation(压位加速)
http://poj.org/problem?id=2443 题意: 有1000个集合,每个集合有至多10000个数,之后输入多个询问,判断询问的两个数是否位于同一个集合. 思路: 位运算...很强大 ...
- Linux删除重复行 排序和不排序的做法--转载
本文部分翻译自这里,来自 Jadu Saikia 的博客,这个博客上有很多非常有用的小技巧,有空可以多看看. 通常如果我们想获取一个文件里不重复的行的时候,我们可以直接通过 sort -u 命令,先把 ...
- codeforces 55 div2 C.Title 模拟
C. Title time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...