直接上代码,要点就是把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. Python---1. 基础数据类型

    转载:  Py西游攻关之基础数据类型

  2. CentOS7安装mysql-python模块

    # sudo pip install mysql-python 此时会提示找不到mysql-config文件,我们安装一下mysql-community-devel # sudo yum instal ...

  3. ubuntu update-alternatives

    update-alternatives是ubuntu系统中专门维护系统命令链接符的工具,通过它可以很方便的设置系统默认使用哪个命令.哪个软件版本,比如,我们在系统中同时安装了open jdk和sun ...

  4. 【pycharm】pycharm中设置virtualenv的虚拟环境为开发环境

    pycharm中设置virtualenv的虚拟环境 因为在pycharm写代码比较方便 但是有时候virtualenv安装的环境在pycharm中会有红色波浪线报语法错误.作为一个强迫症,这怎么能忍, ...

  5. 生成对抗网络(Generative Adversarial Network)阅读笔记

    笔记持续更新中,请大家耐心等待 首先需要大概了解什么是生成对抗网络,参考维基百科给出的定义(https://zh.wikipedia.org/wiki/生成对抗网络): 生成对抗网络(英语:Gener ...

  6. poj1434 Fill the Cisterns!

    地址:http://poj.org/problem?id=1434 题目:Fill the Cisterns! Fill the Cisterns! Time Limit: 5000MS   Memo ...

  7. 实现Vue-MVVM-step1

    一个利用defineProperty实现的MVVM双向数据绑 <!DOCTYPE html> <html lang="en"> <head> & ...

  8. FromBottomToTop团队项目总结

    FromBottomToTop团队项目总结 项目实现情况 关于塔防游戏项目,已实现下列内容 - 游戏设有菜单,附有简介与游戏玩法 - 游戏设有不同的场景地图可供玩家选择 - 通过智能算法,计算小怪的路 ...

  9. springboot中websoket的使用

    知识点:springboot项目中,websoket实时推送技术的介绍与使用      一.双向通信 http协议通信只能由客户端发起请求,服务端返回查询结果,如果我们想定时获取服务端的状态变化,相对 ...

  10. A TLS packet with unexpected length was received 解决方法

    参考:A TLS packet with unexpected length was received. 系统环境 主系统 OS X,虚拟机 Ubuntu 14.04 64bit. 问题描述 在git ...