导出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实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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 网页过期时间的控制代码
2009/06/29 PHP
php eval函数用法总结
2012/10/31 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php查询及多条件查询
2017/02/26 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Python 装饰器使用详解
2017/07/29 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
社区包粽子活动方案
2014/01/21 职场文书
经典促销广告词大全
2014/03/19 职场文书
跳蚤市场口号
2014/06/13 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
公司欠款证明
2015/06/24 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server