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 ...
随机推荐
- MySQL5.7多源复制
MySQL5.7开始支持多源复制,也就是多主一从的复制架构: 使用多源复制的考虑: 1.灾备作用:将各个库汇总在一起,就算是其他库都挂了(整个机房都无法连接了),还有最后一个救命稻草: 2.备份:直接 ...
- What do you think the coming adidas NMD Singapore
adidas NMD Singapore is surprising everybody with a lot of completely new NMD choices combined with ...
- win10用键盘控制鼠标
打开控制面板 进入轻松使用 更改鼠标的工作方式 勾选启用鼠标键 点击设置鼠标键 应用确定 ctrl+shift+numlock开启鼠标键 小键盘8426上下左右,5类似鼠标单击 ctrl+小键盘加速, ...
- uva1416 dijkstra
大白书P330 这题比较麻烦 给出一个n个节点m条边的无向图,每条边上有一个正权.令c等于每对节点的最短路长度之和.例n=3时, c = d(1,1)+d(1,2)+d(1,3)+d(2,1)+d(2 ...
- jQuery源码分析--Event模块(2)
接下来就是触发事件了.事件触发后的处理函数的分发主要靠两个函数,一个jQuery.event.dispatch,一个是jQuery.event.handlers.这个dispatch会调用handle ...
- PostgreSQL 9.3:在windows(包括win7)下的安装与正确配置
首先,以下是常用命令: ③ initdb 初始化 数据库. ④ pg_ctl start 启动数据库 ⑤ pg_ctl stop 停止数据库 ⑥ post_svc -install 建立windows ...
- 20145311 《Java程序设计》第4周学习总结
20145311 <Java程序设计>第4周学习总结 教材学习内容总结 第六章(继承与多态) 6.1继承 6.1.1-继承共同行为:如果在程序设计上存在着重复,那就需要修改,可以吧相同的程 ...
- How to install tensorflow on ubuntu 18.04 64bit
Ans:pip install tensorflow (note: version number of pip and python must be consistent)
- CentOS7.2 安装Redis3.2.8
Redis3.2.8 下载 下载Redis3.2.8.tar.gz 将文件放置在usr/local/redis/中 解压文件 安装: make && make install [roo ...
- maven3常用命令、java项目搭建、web项目搭建
------------------------------maven3常用命令--------------------------- 1.常用命令 1)创建一个Project mvn archety ...