htmlCanvas2生成图片，并把图片保存到后台

最新推荐文章于 2025-03-27 16:59:54 发布

树欲静而风不止-ing

最新推荐文章于 2025-03-27 16:59:54 发布

阅读量3.8k

点赞数 1

分类专栏： htmlcanvas2 base64 网页生成图片文章标签： htmlcanvas2 图片路径保存到后台 base64

本文链接：https://blog.youkuaiyun.com/qq_35616853/article/details/91788643

版权

本文介绍了如何使用htmlCanvas2将网页内容转换为图片，并通过base64编码保存到后台。首先创建canvas元素，设置大小并渲染网页内容，然后将canvas转换为dataURL，通过Ajax以form表单格式发送到后台。

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

最近做了一个把网页生成图片，并保存到的功能，知道了还有base64这个东西，写个博客来记录。

先做好网页代码，

初始化页面就把图片生成后并传到后台：

//useCORS:true, logging:true, 解决跨域

var fileurl = '';
   function load(){
var dataUrl;
   var canvas2 = document.createElement("canvas");
   let _canvas = document.querySelector('div');
   var w = parseInt(window.getComputedStyle(_canvas).width);
   var h = parseInt(window.getComputedStyle(_canvas).height);
   canvas2.width = w * 2;
   canvas2.height = h * 2;
   canvas2.style.width = w + "px";
   canvas2.style.height = h + "px";
   var context = canvas2.getContext("2d");
   context.scale(2, 2);
   html2canvas(document.querySelector('div'), { canvas: canvas2,useCORS:true, logging:true }).then(fun