前端vue3——html2canvas给网站截图生成宣传海报

文章目录

    • ⭐前言
    • ⭐选择html2canvas实现网页截图
      • 💖 截图
    • ⭐图片url截图显示不出来问题
      • 💖 解决
    • ⭐最终效果
      • 💖 定义海报
    • ⭐总结
    • ⭐结束

yma16-logo

⭐前言

大家好,我是yma16,本文分享关于 前端vue3——html2canvas给网站截图生成宣传海报。
vue3系列相关文章:
vue3 + fastapi 实现选择目录所有文件自定义上传到服务器
前端vue2、vue3去掉url路由“ # ”号——nginx配置
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板
认识vite_vue3 初始化项目到打包
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容
canvas

JavaScript Canvas is a web technology that allows you to dynamically draw and manipulate graphics on a webpage using JavaScript. With Canvas, you can create complex graphics, animations, and interactive applications that respond to user input. It is a 2D drawing API that provides a set of methods and properties to create and manipulate graphics, images, and animations.

JavaScript Canvas 是一种 Web 技术,允许您使用 JavaScript 在网页上动态绘制和操作图形。使用 Canvas,您可以创建复杂的图形、动画和交互式应用程序,以响应用户输入。它是一个 2D 绘图 API,它提供了一组用于创建和操作图形、图像和动画的方法和属性。

前端截图

前端截图通常使用浏览器提供的 API,例如,利用 HTML5 的 canvas 元素,使用 JavaScript
绘制网页内容,并将结果输出到图片;或者使用浏览器提供的 window 和 document
对象,将内容转换成图片。另外,也可以使用第三方库,例如,html2canvas 和
Puppeter,它们将网页转换为图片并提供了更多功能和控制选项。无论是使用浏览器自带的 API
还是第三方库,它们都需要运行在具有一定的运算和内存资源的计算机上,并且相关的代码需要在浏览器环境中执行。

⭐选择html2canvas实现网页截图

npm安装——html2canvas

$ npm install html2canvas

安装成功!
在inscode环境运行
install-p
使用示例: html2canvas(element, options)
返回html的canvas对象

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

💖 截图

js实现html2canvas截图

import html2canvas from 'html2canvas';
/** 下载图片 */
const downloadBase64 = (content,fileName) => {const base64ToBlob = function (code) {let parts = code.split(';base64,');let contentType = parts[0].split(':')[1];let raw = window.atob(parts[1]);let rawLength = raw.length;let uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}return new Blob([uInt8Array], {type: contentType});};let aLink = document.createElement('a');let blob = base64ToBlob(content);aLink.download = fileName + '.png';aLink.href = URL.createObjectURL(blob);aLink.click();
};// 截图
const shotAction=()=>{html2canvas(document.getElementById('render-id')).then(function(canvas) {console.log('canvas',canvas)const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');const base64img = `data:image/png;base64,${base64}`;downloadBase64(base64img, state.current);// document.body.appendChild(canvas);
});
}

vue3评论分析页面
commit

生成截图效果评论
shot

⭐图片url截图显示不出来问题

html2canvas默认能加载图片。
特殊情况由于图片img使用url,导致html2canvas截图的内容显示不出来

💖 解决

解决方案:

  1. url转为base64
  2. 配置html2canvas参数useCORS,proxy
    配置文档:https://html2canvas.cn/html2canvas-configuration.html

添加参数

// 截图
const shotAction=()=>{html2canvas(document.getElementById('render-id'),{useCORS:true,proxy:'inscode.csdn.net'}).then(function(canvas) {console.log('canvas',canvas)const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');const base64img = `data:image/png;base64,${base64}`;downloadBase64(base64img, state.current);// document.body.appendChild(canvas);
});
}

vue3 html页面
city-game

截图效果如下
截图结果
inscode项目

⭐最终效果

csdn 查分截图
search-grade

csdn 赛道可视化截图
game

csdn 分析评论截图
commit

💖 定义海报

封装截图方法

/** 下载图片 */
const downloadBase64 = (content:any,fileName:any) => {const base64ToBlob = function (code:any) {let parts = code.split(';base64,');let contentType = parts[0].split(':')[1];let raw = window.atob(parts[1]);let rawLength = raw.length;let uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}return new Blob([uInt8Array], {type: contentType});};let aLink = document.createElement('a');let blob = base64ToBlob(content);aLink.download = fileName + '.png';aLink.href = URL.createObjectURL(blob);aLink.click();
};// 截图
const shotAction=(dom:any)=>{console.log('dom',dom)html2canvas(dom,{allowTaint:true,useCORS:true,proxy:'localhost',scale:1}).then(function(canvas) {console.log('canvas',canvas)const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');const base64img = `data:image/png;base64,${base64}`;downloadBase64(base64img, '邮件');// document.body.appendChild(canvas);});
}

使用grapesjs-mjml定制网站海报
react-mjml:https://yongma16.xyz/react-mjml/
将截图放入html拖拽设计从上而下排版的海报
shot-p
截图选取iframe生成html海报结果如下
iframe

⭐总结

htmlcanvas使用时不能传递jsdom,正确的用法是传递浏览器渲染的真实dom。

  • 图片加载不出来可以使用配置参数useCORS,proxy,allowTaint
  • 图片模糊可以配置 scale

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!
sence

👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 感谢你的阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/170457.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM字节码文件的相关概述解读

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 1、字节码文件 从下面这个图就可以看出&#xff0c;字节码文件是可以跨平台使用的 想要让一个Java程序正确地运行在JVM中&#xff0c;Java源码就必须要被编译为符合JVM规范的字节码。 https://docs.oracle.com/java…

C++面试,const的使用

#include <iostream> #include <cstring>int main() {const int x 1;int b 10;int c 20;const int* a1 &b;int* const a2 &b;const int* const a3 &b;x 2;a1 &c;*a1 1;a2 &c;*a2 1;a3 &c;*a3 1;return 0; }错误1&#xff1a;…

3. 深入探究文件 IO

3. 深入探究文件 IO 1. Linux 系统如何管理文件1.1 静态文件与inode1.2 文件打开时的状态 2. 返回错误处理与errno2.1 strerror 函数2.2 perror 函数 3. 空洞文件4. O_APPEND 和 O_TRUNC5. 多次打开同一个文件6. 复制文件描述符6.1 dup6.2 dup2 7. 文件共享7.1 同一个进程中多次…

Mono 8、Mono 10、Mono 10 Packed、Mono 12、Mono 12 Packe等像素格式简介

Mono 8、Mono 10、Mono 10 Packed、Mono 12、Mono 12 Packed这几种像素格式在灰度图中的区别和联系如下&#xff1a; Mono 8&#xff1a;每个像素使用8位&#xff08;1字节&#xff09;表示灰度值&#xff0c;范围是0-255。这种格式在处理黑白图像时非常常见。 Mono 10&#…

Python 测试框架 Pytest 的入门

简介 pytest 是一个功能强大而易于使用的 Python 测试框架。它提供了简单的语法和灵活的功能&#xff0c;用于编写和组织测试代码。 1、简单易用&#xff1a;pytest 的语法简洁明了&#xff0c;使得编写测试用例更加直观和易于理解。它使用 assert 语句来验证预期结果&#x…

接口测试 — 到底在做什么?

1、常见的接口面试问题 1、http网络协议的介绍 是否了解网络协议是否了解接口的数据通信是否了解常用的接口请求方法接口测试的核心底层逻辑 2、接口的健全机制 cookie、Session、token三者的用途&#xff0c;以及各自的机制 3、接口关联的测试实现 基于集权机制、基于网…

从0到0.01入门 Webpack| 005.精选 Webpack面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

【蓝桥杯】刷题

刷题网站 记录总结刷题过程中遇到的一些问题 1、最大公约数与最小公倍数 a,bmap(int,input().split())sa*bwhile a%b:a,bb,a%bprint(b,s//b)2.迭代法求平方根(题号1021) #include<stdio.h> #include<math.h> int main() {double x11.0,x2;int a;scanf("%d&…

【RTP】RTPSenderAudio::SendAudio

RTPSenderAudio 可以将一个opus帧封装为rtp包进行发送,以下是其过程:RTPSenderAudio::SendAudio :只需要提供payload部分 创建RtpPacketToSend 并写入各个部分 填充payload部分 sender 本身分配全session唯一的twcc序号 if (!rtp_sender_->

时间序列预测实战(十九)魔改Informer模型进行滚动长期预测(科研版本)

论文地址->Informer论文地址PDF点击即可阅读 代码地址-> 论文官方代码地址点击即可跳转下载GIthub链接 个人魔改版本地址-> 文章末尾 一、本文介绍 在之前的文章中我们已经讲过Informer模型了&#xff0c;但是呢官方的预测功能开发的很简陋只能设定固定长度去预测未…

Git控制指令

git status查看当前本地分支的修改状态 git diff 文件路径 查看具体文件的修改内容 git log打印用户信息 git remote -v查看远程地址 git checkout -- *还原被删除的文件 git rm -r --force .删除本地所有文件 git commit -m "Remove all files from repositor…

Xilinx Zynq-7000系列FPGA实现视频拼接显示,提供两套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐FPGA图像处理方案FPGA视频拼接叠加融合方案推荐 3、设计思路详解Video Mixer介绍 4、工程代码1&#xff1a;2路视频拼接 HDMI 输出PL 端 FPGA 逻辑设计PS 端 SDK 软件设计 5、工程代码2&#xff1a;4路视频拼接 HDMI 输出PL 端 FPGA 逻辑设…

BER编码规则

文章目录 一、BER 编码规则介绍二、BER编码数据组成三、Identifier octets Type1. tag class 分类2. p/c 分类3 tag type4. ASN.1的原始数据类型&#xff08;TAG&#xff09; 四、 Length octets1、定长的短格式2、不定长格式3、保留格式 五、Contents octets六 、BER编码番外 …

百战python04-循环结构

文章目录 趣味进度条:通过一个简单的进度条来进入循环的世界吧for-in循环语法内置函数range()练习:累和下面是使用for循环对字符串(第一个for)、range函数的循环取值示例for循环对字典、列表取值(后面会讲解字典,列表)while循环while循环实现猜数字小游戏结束循环的操…

【数据库篇】关系模式的表示——(2)规范化

范式&#xff1a;范式是符合某一种级别的关系模式的集合 规范化&#xff1a;是指一个低一级的范式的关系模式&#xff0c;通过模式的分解转换为若干个高一级范式的关系模式的集合。 1NF 每个分量必须是不可分开的数据项&#xff0c;满足这个条件的关系模式就是1NF。 2NF 若…

信息检索指标直接优化的通用近似框架

1、直接优化信息检索指标的背景 1.1、存在问题 直接优化信息检索的指标是信息检索的一大方向。主要包含两类方法&#xff0c;一类是将IR指标作为上界进行优化&#xff1b;另一类是使用平滑函数近似表示IR指标进行优化。 直接优化IR指标方式很自然&#xff0c;但没有提供理论…

【Unity】接入MAX聚合广告SDK Applovin + GoogleAdmob

版本&#xff1a; Unity&#xff1a;2019.4.35f1gradle plugin: 4.2.0 &#xff08;实际要7.0 对应build_tools:34.0.0) gradle: 6.7.1 &#xff08;实际要7.0 对应build_tools:34.0.0) jdk: 1.8.0_241build_tools: 34.0.0 ndk: android-ndk-r19 文档&#xff1a; 6.0.1(Andro…

基于springboot+Web实现社区医院管理服务系统项目【项目源码+论文说明】计算机毕业设计

基于springbootWeb实现社区医院管理服务系统演示 摘要 在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括社区医院管理服务系统的网络应用&#xff0c;在外国线上管理系统已经是很普遍的方式&#xff0c;不过国内的管理系统可…

【深度学习笔记】01 数据操作与预处理

01 数据操作与预处理 一、数据操作1.1 基本数据操作1.2 广播机制1.3 索引和切片1.4 节省内存1.5 转换为其他Python对象 二、数据预处理读取数据集处理缺失值转换为张量格式练习 一、数据操作 1.1 基本数据操作 导入torch import torch张量表示一个由数值组成的数组&#xff…

Redis分片集群

文章目录 Redis分片集群搭建分片集群散列插槽插槽原理小结 集群伸缩需求分析创建新的redis实例添加新节点到redis转移插槽 故障转移自动故障转移手动故障转移 RedisTemplate访问分片集群 Redis分片集群 搭建分片集群 主从和哨兵可以解决高可用、高并发读的问题。但是依然有两…