首页 > 编程语言 >视频直播源码,html2canvas 前端保存页面为图片

视频直播源码,html2canvas 前端保存页面为图片

时间:2023-06-16 14:27:01浏览次数:77  
标签:element html2canvas 源码 页面 true 图片

视频直播源码,html2canvas 前端保存页面为图片

转换方法如下:

 


/**
* 将页面指定节点内容转为图片
* 1.拿到想要转换为图片的内容节点DOM;
* 2.转换,拿到转换后的canvas
* 3.转换为图片
*/
// 生成局部图片
GenerateImg() {
  let element = this.$refs.canvasImgObj;
  // console.warn(element);
  html2canvas(element[this.slideIndex], { // 我这里是一个swiper,要是一个页面的话直接element就行
    allowTaint: true,
    useCORS: true,
    tainttest: true, // 检测每张图片都已经加载完成
    logging: true,
    backgroundColor: `rgb(143,40,37)`, // 转换图片可能会有白色底色,你可根据你的页面或者PM要求设置一下背景色,不要的话就null
  }).then((canvas) => {
    //  转成图片,生成图片地址
    let imgUrl = canvas.toDataURL("image/jpeg");
    console.warn(imgUrl); 
  });

以上就是 视频直播源码,html2canvas 前端保存页面为图片,更多内容欢迎关注之后的文章

 

标签:element,html2canvas,源码,页面,true,图片
From: https://www.cnblogs.com/yunbaomengnan/p/17485385.html

相关文章

  • html页面解析
    getElementsByTagName和getElementsByClassName这两个方法查找多个dom元素,返回的是htmlcollection类型,是伪数组而不是真数组,故不能使用数组的方法。我们可以使用数组原型配合slice方法,利用call,apply,bind方法将伪数组转为真数组。varx=document.getElementById("main......
  • 仿奈雪の茶小程序,奶茶小程序模板源码(附下载链接)
    分享一个仿奈雪の茶小程序,奶茶小程序模板源码(兼容H5版本全网首发)完美复刻奈雪の茶小程序,可稍加修改使用。代码结构如下本项目包含:首页点餐(自取和外卖两种方式,有基本的点餐逻辑处理)取餐我的积分商城积分商城详情页积分签到会员码我的卡券收货地址我的资料我的订......
  • vue+html2canvas生成寄几想要的海报
    需求:点击弹出一个弹窗,其中是某个作品内容的海报,需要呈现作品的内容+二维码 思路:获取作品内容渲染到弹窗中,生成包含分享链接的二维码,将整个界面转为图片,用户可以长按保存,并扫描识别。 方案及步骤:1.引入html2canvas实现生成图片的功能npminstall--savehtml2canvas 2......
  • 直播源码搭建平台技术知识:实时语音识别字幕呈现功能
     今天我要分享的直播源码搭建平台技术知识对我们的生活有着极大的帮助,那他是什么技术那?且听我娓娓道来。在日常生活中,大家有没有在嘈杂的地方刷过抖音、快手等短视频而又因为听不清声音而感到苦恼,或是在网络会议和网课老师说的太快听不清而感到焦虑?大部分人可能都会有这些问题,也......
  • .NET源码解读kestrel服务器及创建HttpContext对象流程
    .NET本身就是一个基于中间件(middleware)的框架,它通过一系列的中间件组件来处理HTTP请求和响应。因此,本篇文章主要描述从用户键入请求到服务器响应的大致流程,并深入探讨.NET通过kestrel将HTTP报文转换为HttpContext对象。通过本文,您可以了解以下内容:http的数据流转流程源码解读k......
  • 页面会话技术介绍,什么是Cookie和Session
    页面会话技术Cookie什么是cookie:服务端保存在浏览器端的数据片段。以key/value的形式进行保存。每次请求的时候,请求头会自动包含本网站此目录下的cookie数据。网站经常使用这个技术来识别用户是否登陆等功能。用途:保存登录状态,购物车等缺点:做为请求或响应报文发送,无形中......
  • Vue项目入门实战(07)-想让你的Vue页面更炫酷?来学习样式绑定吧
    1class的对象绑定1.1需求现在要实现点击div区域里的helloworld文本时,文本变成红色。1.2实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Vue中的样式绑定</title><scriptsrc="../vue.js&q......
  • 通过python封装接口获取淘宝商品页面数据、淘宝商品详情数据
    可以使用GET或POST方法,请求参数中应包含商品详情页面数据、标题、价格、图片、库存、销量等信息。解析返回的response中的HTML页面或JSON格式数据,提取需要的商品信息,如商品标题、价格、评价人数等。使用pandas库将提取的商品信息保存到数据框中,以方便后续处理和分析。......
  • wsl编译android13源码并刷入pixel6
    wsl编译环境环境依赖参考编译android10时设置的环境https://www.cnblogs.com/revercc/p/16826591.html,这里注意wsl使用的ext4文件系统,此文件系统区分大小写,而windows由于历史原因使用的是NTFS文件系统,此文件系统默认是不区分大小写的。所以在wsl的共享目录中需要开启区分大小写......
  • uniapp 页面跳转传值(eventChannel)
    在A->B页面时,如果想要将A页面中的数据传给B,可以使用eventChannel方法或者用url拼接,在这里先说明第一种eventChannel方法如何实现。A页面:首先定义了一个点击事件handleItemClick,触发点击事件后再传递数据data(){return{itemData:'123'}}methods:{h......