html2canvas生成的图片数据太大导致前台有值传到后台为null

最新推荐文章于 2023-01-09 15:13:05 发布

Sunlalalla

最新推荐文章于 2023-01-09 15:13:05 发布

阅读量4.2k

点赞数

分类专栏：前端文章标签： html2canvas js

本文链接：https://blog.csdn.net/Sun_of_Rainy/article/details/86693056

版权

解决了一个问题，前端使用html2canvas生成的图片数据过大，因Ajax请求限制导致后台接收到的数据为null。减少图片数据量后，传输恢复正常。

摘要由CSDN通过智能技术生成

折腾了一天，终于找到前台有值，后台拿到却是null的原因了，多亏了同事的帮忙

原因是生成的图片数据太大了，ajax请求提交的数据大小是有限制的

做了个测试，将图片数据也就是下面代码中的dataUrl数值改小之后就可以正常传到后台了

function saveUserTemplateAsImageData(){
    debugger;
     var userTemplateId = parent.window.templateId;
     //console.log(userTemplateId);
     var dataUrl ;
     //console.log(main_title);

     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";
     canvas2.style.height = h + "px";
     
     var context