直接上代码,要点就是把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. JPA Spring Data 概述

    JPA Spring Data : 致力于减少数据访问层 (DAO) 的开发量. 开发者唯一要做的,就只是声明持久层的接口,其他都交给 Spring Data JPA 来帮你完成! 框架怎么可能代替开 ...

  2. YTD易出现断层问题,请注意!

    declare @table table( company_id int ,--公司编号 quarter_num ),--季度 disti ),--分销商 num int --数量 ) insert ...

  3. 手把手教你学node.js之学习使用外部模块

    学习使用外部模块 目标 建立一个 lesson2 项目,在其中编写代码. 当在浏览器中访问 http://localhost:3000/?q=alsotang 时,输出 alsotang 的 md5 ...

  4. VS2010/MFC编程入门之二十九(常用控件:列表视图控件List Control 下)

    上一节是关于列表视图控件List Control的上半部分,简单介绍了列表视图控件,其通知消息的处理和有关结构体的定义.本节继续讲解下半部分,包括列表视图控件的创建.CListCtrl类的主要成员函数 ...

  5. 【转载】open-falcon部署

    运维监控系统之Open-Falcon   一.Open-Falcon介绍 1.监控系统,可以从运营级别(基本配置即可),以及应用级别(二次开发,通过端口进行日志上报),对服务器.操作系统.中间件.应用 ...

  6. 使用idea 搭建Spring+mybatis

    1.file-new-project 项目的结构如下: 在WEB-INF 下面新建一个 文件夹lib 右键WEB-INF ,new-Directory 所需要的jar 包有: lib下载地址: 网盘地 ...

  7. leetcode刷题吧

    排列 从排序的数组中删除重复项 /** * @param {number[]} nums * @return {number} */ var removeDuplicates = function(n ...

  8. 【Java----正则关键字转义】

    正则需要转义字符:'$', '(', ')', '*', '+', '.', '[', ']', '?', '\\', '^', '{', '}', '|'   问题现象:  替换URL格式的字符串时 ...

  9. [调参]CV炼丹技巧/经验

    转自:https://www.zhihu.com/question/25097993 我和@杨军类似, 也是半路出家. 现在的工作内容主要就是使用CNN做CV任务. 干调参这种活也有两年时间了. 我的 ...

  10. 简单实现Ubuntu16.04 + caffe2 + CUDA9.0 + cuDNN8.0

    在Ubuntu16.04 CUDA9.0 cuDNN8.0的环境下安装caffe2 本博客比较简单,cuda9.0 cudnn8.0部分请看上一篇博客,其中详细讲了: 如何安装驱动 安装cuda 安装 ...