使用 html2canvas 将页面中某一部分转为图片下载

2021-04-26 14:29

阅读：700

标签：fonts display body canvas 标题 lob bsp from his

今天在项目中遇到一个需求是将生成的二维码和一些背景作为海报，然后将海报以图片的形式下载

使用了 html2canvas 插件

import html2canvas from "html2canvas";

　　这是要执行的代码片段

downloadFile(data, fileName) {
      if (!data) {
        return;
      }
      let url = window.URL.createObjectURL(data);
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
    },
    downLoadCode(id,name){
      html2canvas(document.getElementById(id),{useCORS:true,logging:true}).then(canvas => {
          canvas.toBlob(blob => {
          this.downloadFile(blob,name);
        }, "image/png");
      });
    },

　　如果要下载的部分有图片内容需要添加

{useCORS:true,logging:true} 允许跨域否则图片的部分会是空白的

使用 html2canvas 将页面中某一部分转为图片下载

标签：fonts display body canvas 标题 lob bsp from his

原文地址：https://www.cnblogs.com/buxiugangzi/p/12219448.html

上一篇：JS代码实现商品价钱总和(模拟购物车功能)

下一篇：初探ASP.NET Core 3.x (3) - Web的运作流程和ASP.NET Core的运作结构

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：使用 html2canvas 将页面中某一部分转为图片下载
文章链接：http://soscw.com/index.php/essay/79827.html

亲，登录后才可以留言！

使用 html2canvas 将页面中某一部分转为图片下载

评论

热门文章

推荐文章

最新文章

置顶文章