直播软件源码,在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在前端生成图片, 更多内容欢迎关注之后的文章

 

posted @ 2023-02-23 14:16  云豹科技-苏凌霄  阅读(45)  评论(0)    收藏  举报