直播軟體原始碼，在vue中使用html2canvas在前端生成圖片

直播軟體原始碼，在vue中使用html2canvas在前端生成圖片

1、安裝

npm install html2canvas

2、用法

import html2canvas from 'html2canvas';
 
html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

在vue中使用，轉換成圖片下載至本地

<div ref="imageDom"></div>
         
html2canvas(this.$refs.imageDom,
 {
   useCORS: true, //圖片跨域，開啟跨域配置
   logging: false,//日誌開關，便於檢視html2canvas的內部執行流程
   taintTest: true,//是否在渲染前測試圖片
}).then(canvas => {
  // 轉成圖片，生成圖片地址
  let imgUrl = canvas.toDataURL("image/png"); //可將 canvas 轉為 base64 格式
  let eleLink = document.createElement("a");
  eleLink.href = imgUrl; // 轉換後的圖片地址
  eleLink.download = "名稱";
  document.body.appendChild(eleLink);
  eleLink.click();
  document.body.removeChild(eleLink);
});

 以上就是直播軟體原始碼，在vue中使用html2canvas在前端生成圖片， 更多內容歡迎關注之後的文章