html2canvas生成的图片数据太大传不到后台之解决方法————js转成文件传给后台

最新推荐文章于 2024-05-28 12:04:22 发布

原创

最新推荐文章于 2024-05-28 12:04:22 发布 · 6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#js #html2canvas #MultipartFile

本文介绍如何解决使用html2canvas生成的图片数据过大无法上传到后台的问题。通过JavaScript将大数据转换为文件并上传，提供前端和后端的实现代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

继我的上一篇博客——https://blog.youkuaiyun.com/Sun_of_Rainy/article/details/86693056

现在来解决问题，解决思路（同事帮忙想出来的，我来学习哈，顺便记录下）是通过js将数据放到文件中，将文件传给后台

将画布数据转成文件的方法

我的js截图方法代码贴出来：

function saveUserTemplateAsImageData(){
     var userTemplateId = parent.window.templateId;
     var pic;
     var dataUrl ;
     var canvas2 = document.createElement("canvas");    　　　　　　　//创建一个新的canvas
     let _canvas = document.querySelector('#main');　　　　　 //这里面填写 你需要截图的div
     var w = parseInt(window.getComputedStyle(_canvas).width);
     var h = parseInt(window.getComputedStyle(_canvas).height);
     canvas2.width = w;
     canvas2.height = h;　　　　　　　　　　　　　　//将canvas画布放大2倍或者更多，然后盛放在较小的容器内，就显得不模糊了
     canvas2.style.width = w + "px";