导出HTML5 Canvas图片并上传服务器功能


Posted in HTML / CSS onAugust 16, 2019

导出HTML5 Canvas图片,并上传服务器

最近接触的项目中,经常遇到需要canvas绘制图片的需求,比如拼图,比如图片编辑等。canvas处理后的图片必然涉及到保存,

因此,下面方法也许是你需要的~

思路:

1.使用 toDataURL()方法导出canvas图片,此时得到base64的数据

2.将base64数据封装blob对象

3.组装FormData

4.ajax上传

当然,上传过程需要服务端的童鞋来配合,比如设置跨域,比如约定字段。。。

一个简陋的demo:

function handleSave () {
        //导出base64格式的图片数据
        var mycanvas = document.getElementById("mycanvas");
        var base64Data = mycanvas.toDataURL("image/jpeg", 1.0);
        //封装blob对象
        var blob = dataURItoBlob(base64Data);
        //组装formdata
        var fd = new FormData();
        fd.append("fileData", blob);//fileData为自定义
        fd.append("fileName", "123jpg");//fileName为自定义,名字随机生成或者写死,看需求
        //ajax上传,ajax的形式随意,JQ的写法也没有问题
        //需要注意的是服务端需要设定,允许跨域请求。数据接收的方式和<input type="file"/> 上传的文件没有区别
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("POST", “你发送上传请求的url”);
        xmlHttp.setRequestHeader("Authorization", 'Bearer ' + localStorage.token);//设置请求header,按需设定,非必须
        xmlHttp.send(fd);
        //ajax回调
        xmlHttp.onreadystatechange = () => {
            //todo  your code...
        };
    };
function dataURItoBlob (base64Data) {
    var byteString;
    if (base64Data.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(base64Data.split(',')[1]);
    else
        byteString = unescape(base64Data.split(',')[1]);
    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type: mimeString});
};

知识点扩展:

HTML5 Canvas转化成图片后上传服务器

function b64ToUint8Array(b64Image) {
   var img = atob(b64Image.split(',')[1]);
   var img_buffer = [];
   var i = 0;
   while (i < img.length) {
      img_buffer.push(img.charCodeAt(i));
      i++;
   }
   return new Uint8Array(img_buffer);
}
var b64Image = canvas.toDataURL('image/jpeg');
var u8Image  = b64ToUint8Array(b64Image);
var formData = new FormData();
formData.append("image", new Blob([ u8Image ], {type: "image/jpg"}));
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/upload", true);
xhr.send(formData);

用上面这种方式在前端通过js处理,server端不需要进行任何额外处理。

我认为是最方便最直接的办法,反而很多高赞回复,需要server进行各种处理,不推荐。

Had to convert canvas Base64-encoded image to  Uint8Array Blob .

参考: https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server

总结

以上所述是小编给大家介绍的导出HTML5 Canvas图片并上传服务器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 #HTML / CSS
HTML5实现视频弹幕功能
Aug 09 #HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 #HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 #HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 #HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 #HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 #HTML / CSS
You might like
队列在编程中的实际应用(php)
2010/09/04 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现简单温度转换的方法
2015/03/13 Python
Python编程实现蚁群算法详解
2017/11/13 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
python3中property使用方法详解
2019/04/23 Python
Python目录和文件处理总结详解
2019/09/02 Python
python 绘制国旗的示例
2020/09/27 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
八一建军节活动方案
2014/02/10 职场文书
小学老师寄语大全
2014/04/04 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
新教师教学工作总结
2015/08/14 职场文书