html2canvas.js 生成图片怎么保存

2025-11-24 04:01:47

1、在文件夹中创建一个html文件test,html2canvas也放进去。

html2canvas.js 生成图片怎么保存

2、在test页面中引入html2canvas。

html2canvas.js 生成图片怎么保存

3、创建一个id为“jietu”的div层,作为要被保存的层。

html2canvas.js 生成图片怎么保存

4、然后在其后面添加script脚本,创建一个方法里面使用html2canvas截取jietu层。

html2canvas(document.querySelector("#jietu")).then(canvas => {

             document.body.appendChild(canvas);

   });

html2canvas.js 生成图片怎么保存

5、执行后我们发现截取的部分以canvas方式显示在后面。

html2canvas.js 生成图片怎么保存

6、现在我们在后面再添加保存图片的方法。

      var imgData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

      window.location.href= imgData;

html2canvas.js 生成图片怎么保存

7、这次我们再次在浏览器打开test就可以保存图片了。

html2canvas.js 生成图片怎么保存

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢