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

zhibo系統開發發表於2023-02-23

直播軟體原始碼,在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在前端生成圖片, 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2936642/,如需轉載,請註明出處,否則將追究法律責任。

相關文章