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

最新推荐文章于 2025-08-19 18:24:00 发布

原创

最新推荐文章于 2025-08-19 18:24:00 发布 · 1.7w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas #ajax #base64 #javascript

本文介绍如何利用HTML5 Canvas导出图片并上传到服务器，包括使用toDataURL方法获取base64数据，转换为Blob对象，封装成FormData并通过Ajax进行上传。示例代码展示了实现过程，同时提及了服务端需配合设置跨域和约定字段。

最近接触的项目中，经常遇到需要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)

最低0.47元/天解锁文章