TP8 JS(html2canvas) 把DIV内容生成二维码并与背景图、文字组合生成分享海报
方法一：前端JS生成(推荐)
注意：
1.这个网页只能截图图片效果代码，其它任何html效果都不能有，不然截图就不准确
2.如果要生成的图片DIV内容中引用了第三个方的图片，就是不使用同一个域名下的图片，需要把后端把图片转为Base64才可以生成截图、不然会造成跨域的问题，生成的图片会是空白的
图片转为Base64后的显示方式：
<img src="data:image/jpeg;base64,{$PosterParameters['imgp_Base64']}" />
例子：
<div class="container" id="capture-target"><div class="img">{notempty name="$PosterParameters['img_Base64']"}<img src="data:image/jpeg;base64,{$PosterParameters['img_Base64']}" />{/notempty}</div><div class="username"><p>{notempty name="$PosterParameters['name']"}{$PosterParameters['name']}{/notempty}</p></div><div class="invite_text"><p>{notempty name="$PosterParameters['invite_text']"}{$PosterParameters['invite_text']}{/notempty}</p></div><div class="live_time_day"><p>{notempty name="$PosterParameters['day']"}{$PosterParameters['day']}{/notempty}</p></div><div class="live_time"><p>{notempty name="$PosterParameters['hi']"}{$PosterParameters['hi']}{/notempty}</p></div><div class="imgp">{notempty name="$PosterParameters['imgp_Base64']"}<img src="data:image/jpeg;base64,{$PosterParameters['imgp_Base64']}" />{else /}{notempty name="$PosterParameters['imgp']"}<img src="{$PosterParameters['imgp']}" />{/notempty}{/notempty}</div><div class="title"><p id="myDiv">{notempty name="$PosterParameters['title']"}{$PosterParameters['title']}{/notempty}</p></div><div class="qr-code"><img src="{notempty name="$PosterParameters['QRcodeUrl']"}{$PosterParameters['QRcodeUrl']}{/notempty}" width="160px" height="160px" /></div></div><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网页内容转图片示例</title><!-- 引入html2canvas库 --><script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body><!-- 截图内容 -->
<div id="capture-target"><h1>欢迎来到我的网站</h1><p>这是一个用于演示如何将网页内容转换成图片的例子。</p>
</div><!-- 按钮触发截图 -->
<button onclick="captureAndSave()">点击截图保存</button><script>// 图片下载函数，增强对不同浏览器的支持function downloadImage(dataURL, filename) {const link = document.createElement('a');link.href = dataURL;link.download = filename;document.body.appendChild(link); // 确保元素添加到DOM中以触发点击事件link.click();document.body.removeChild(link); // 下载后移除元素}// 增强的截图并保存的函数，优化参数处理与错误提示async function captureAndSave() {try {const targetElement = document.querySelector('#capture-target');const dpiScale = window.devicePixelRatio || 1;const qualityFactor = 0.9; // 默认质量因子，可以根据需要调整const format = 'image/png'; // 图片输出格式，可根据需要更改为 'image/png' 等const scale = dpiScale >= 2 ? dpiScale : 2; // 动态调整缩放比例，优先考虑DPR，至少为2以保证清晰度const canvas = await html2canvas(targetElement, {scale,dpi: 300,logging: false,useCORS: true,allowTaint: true,});// 根据图片格式动态调整dataURL的mime类型const mimeType = format === 'image/jpeg' ? 'image/jpeg' : 'image/png';const imageDataURL = canvas.toDataURL(mimeType, qualityFactor);// 动态检测浏览器对MIME类型的兼容性，必要时转换为Blob下载if (navigator.msSaveBlob) { // IE/Edge 特殊处理const blob = await (await fetch(imageDataURL)).blob();navigator.msSaveBlob(blob, 'screenshot.' + (format === 'image/jpeg' ? 'jpg' : 'png'));} else {downloadImage(imageDataURL.replace(mimeType, 'image/octet-stream'), 'screenshot.' + (format === 'image/jpeg' ? 'jpg' : 'png'));}} catch (error) {//alert('截图保存时发生错误，请检查浏览器控制台详情。'); // 提供用户友好提示console.error('截图时发生错误:', error);}}
</script>方法二：后端生成(没有测试)
/*** @name 生成海报* @author 峰神* @date 2024-06-28* @param array $postData 必填 提交数组* @param int [必填/选填] type 生成类型 默认0=伪直播邀请海报* @ruturn array*/public function CreatePoster(array $postData=[],int $type=0){$tmp_bg_image = 'static/images/live_share.png';//背景图路径//获取二维码,调用了上边那个方法$qrcode_img = 'static/images/portrait.png';// $qr_res = $this->extendQrcode();// if($qr_res['status']){// $qrcode_img = $qr_res['data'];// }//新文件名$share_path = 'upload/share/';is_dir($share_path) OR mkdir($share_path, 0777, true);$share_img = $share_path.'1.jpg';$this->composite_picture($tmp_bg_image, $qrcode_img, $share_img, false, '', '', false, '', 150, 510); //模板背景, 二维码, 海报, 二维码是否缩小, 二维码缩小的宽度，二维码缩小的高度，是否等比例缩放, 文字, 二维码在x轴的位置, 二维码在y轴的位置$result = ['status'=>true, 'data'=>$share_img];return json_encode($result, 320);}/** 合并图片* @ $bg_img 背景图片* @ $qrcode_img 二维码图片* @ $new_filename 新文件名* @ $is_suoxiao 组合的图片是否缩小* @ $n_w 缩小的宽* @ $n_h 缩小的高* @ $is_per 是否按比例缩小* @ $text 文字* @ $s_width 要组合的图片在x轴的位置* @ $s_height 要组合的图片在y轴的位置*/public function composite_picture($bg_img, $qrcode_img, $new_filename, $is_suoxiao, $n_w='', $n_h='', $is_per=false, $text='', $s_width='0', $s_height='0'){if($is_suoxiao){$src_im = $this->imgsuoxiao($qrcode_img, $n_w, $n_h, $is_per);}else{$src_im = $qrcode_img;}$bgimg = imagecreatefromstring(file_get_contents($bg_img));//背景图$src = imagecreatefromstring(file_get_contents($src_im));//组合图list($src_w, $src_h) = getimagesize($src_im);imagecopy($bgimg, $src, $s_width, $s_height, 0, 0, $src_w, $src_h);list($bgimg_w, $bgimg_h, $bgimg_type) = getimagesize($bg_img);switch ($bgimg_type) {case 1://GIFheader('Content-Type: image/gif');header('Content-Disposition: inline; filename="image.gif"');$result = imagegif($bgimg, $new_filename);break;case 2://JPGheader('Content-Type: image/jpeg');header('Content-Disposition: inline; filename="image.jpg"');imagejpeg($bgimg, $new_filename);break;case 3://PNGheader('Content-Type: image/png');header('Content-Disposition: inline; filename="image.png"');imagepng($bgimg, $new_filename);break;default:break;}imagedestroy($bgimg);imagedestroy($src);if($text){$newss = $this->numimage($text,$new_filename,15,3,230,720);return $newss;}else{return $new_filename;}return $new_filename;// exit;}//缩小图片public function imgsuoxiao($filename, $n_w, $n_h, $is_per=false){list($width, $height, $dst_type)=getimagesize($filename);if($is_per){$per=0.3;$n_w=$width*$per;$n_h=$height*$per;}switch ($dst_type) {case 2://JPG$img=imagecreatefromjpeg($filename);break;case 3://PNG$img = imagecreatefrompng($filename);break;default:break;}$new=imagecreatetruecolor($n_w, $n_h);//copy部分图像并调整imagecopyresized($new, $img,0, 0,0, 0,$n_w, $n_h, $width, $height);//图像输出新图片、另存为imagejpeg($new, $filename);imagedestroy($new);imagedestroy($img);return $filename;}/*** 像图片中添加文字* @param $txt 文本文字* @param $image 图片路径* @param $size 文字大小* @param $scale 文字旋转度* @param $x 在x轴上的位置* @param $y 在y轴上的位置* @param $color 字体颜色*/public function numimage($txt,$image,$size,$scale,$x,$y, $color="黑色"){list($dst_w, $dst_h, $dst_type) = getimagesize($image);switch ($dst_type) {case 2://JPG$im = imagecreatefromjpeg($image);break;case 3://PNG$im = imagecreatefrompng($image);break;default:break;}$textcolor = imagecolorallocate($im, 0, 0, 0);if($color=="白色"){$textcolor = imagecolorallocate($im, 255, 255, 255);}$qr_size = imagesx($im);$font = realpath('static/STSONG.TTF'); //引入字体imagettftext($im, $size,0,$x,$y, $textcolor, $font, $txt);$myImage = ImageCreate(245,245); //参数为宽度和高度imagecopyresampled($myImage, $im, 0, 0, 0, 0, 0, 80, 10, 10); //重新组合图片并调整大小header("Content-type: image/jpeg");imagejpeg($im, $image);imagedestroy($im);return $image;}
Thinkphp5 生成二维码并与背景图、文字组合生成分享海报_tp5+phpqrcode二维码下方带文字-CSDN博客
相关文章：
 把DIV内容生成二维码并与背景图、文字组合生成分享海报)
TP8 JS(html2canvas) 把DIV内容生成二维码并与背景图、文字组合生成分享海报
方法一：前端JS生成(推荐) 注意： 1.这个网页只能截图图片效果代码，其它任何html效果都不能有，不然截图就不准确 2.如果要生成的图片DIV内容中引用了第三个方的图片，就是不使用同一个域名下的图片，需要把后…...
计算机科学中的接口（Interface）介绍
计算机科学中的接口（Interface）介绍 计算机科学中，接口是一个广泛的概念，在不同上下文中有不同含义： 1.任何两电路或设备间的连接电路，用于连接CPU与内存、CPU与外设之间。这是一个重要的硬件层面的接口概…...
大创项目推荐 题目：基于深度学习卷积神经网络的花卉识别 - 深度学习 机器视觉
文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 基…...
黑芝麻科技A1000简介
文章目录 1. A1000 简介2. 感知能力评估3. 竞品对比4. 系统软件1. A1000 简介...
详解C语言分支与循环语句
分支语句 if elseswitch 循环语句 whilefordo while goto语句 文章目录 1.什么是语句2.分支语句（选择结构）2.1 if语句2.1.1 悬空else2.1.3 练习 2.2 switch语句2.2.1 在switch语句中的break2.2.2 default子句 3.循环语句3.1 while循环3.1.1 while语句中…...
Python商务数据分析知识专栏（五）——Python数据分析的应用③使用Pandas进行数据预处理
Python商务数据分析知识专栏（五）——Python数据分析的应用③使用Pandas进行数据预处理 使用Pandas进行数据预处理1.合并数据2.清洗数据3.标准化数据4.转换数据 使用Pandas进行数据预处理 1.合并数据 2.清洗数据 3.标准化数据 4.转换数据...
Nosql期末复习
mongodb基本常用命令（只要掌握所有实验内容就没问题） 上机必考，笔试试卷可能考： 1.1 数据库的操作 1.1.1 选择和创建数据库 （1）use dbname 如果数据库不存在则自动创建，例如，以下…...
Pytest+Allure+Yaml+PyMsql+Jenkins+Gitlab接口自动化（四）Jenkins配置
一、背景 Jenkins（本地宿主机搭建） 拉取GitLab(服务器)代码到在Jenkins工作空间本地运行并生成Allure测试报告 二、框架改动点 框架主运行程序需要先注释掉运行代码（可不改，如果运行报allure找不到就直接注释掉） …...
SQL面试题练习 —— 查询前2大和前2小用户并有序拼接
目录 1 题目2 建表语句3 题解 1 题目 有用户账户表，包含年份，用户id和值,请按照年份分组，取出值前两小和前两大对应的用户id，需要保持值最小和最大的用户id排首位。 样例数据 ------------------------- | year | user_id | v…...
Arthas常见使用姿势
文章目录 Arthas常见使用姿势官网基本命令通用参数解释表达式核心变量说明常用命令一些常用特殊案例举例其他技巧关于OGNLOGNL的常见使用OGNL的一些特殊用法与说明OGNL内置的虚拟属性OGNL的个人思考OGNL的杂碎，收集未做验证 Arthas常见使用姿势 官网 https://arth…...
Apache Kylin的入门学习
Apache Kylin的入门学习可以从以下几个方面进行： 1. 了解Kylin的基本概念 定义：Apache Kylin是一个开源的分布式分析引擎，它基于Hadoop和HBase构建，提供Hadoop/Spark之上的SQL查询接口及多维分析（OLAP）能…...
React@16.x（46）路由v5.x（11）源码（3）- 实现 Router
目录 1，Router 的结构2，实现2.1，react-router1，matchPath.js2，Router.js3，RouterContext.jsx4，index.jsx 2.2，react-router-domBrowserRouter.jsxindex.jsx 1，Router 的结…...
openGauss真的比PostgreSQL差了10年？
前不久写了MogDB针对PostgreSQL的兼容性文章，我在文中提到针对PostgreSQL而言，MogDB兼容性还是不错的，其中也给出了其中一个能源客户之前POC的迁移报告数据。 But很快我发现总有人回留言喷我，而且我发现每次喷的这帮人是根本不看文…...
【国产开源可视化引擎Meta2d.js】快速上手
提示 初始化引擎后，会生成一个 meta2d 全局对象，可直接使用。 调用meta2d前，需要确保meta2d所在的父容器element元素位置大小已经渲染完成。如果样式或css（特别是css动画）没有初始化完成，可能会报错&…...
c#与倍福Plc通信
bcdedit /set hypervisorlaunchtype off...
【OceanBase诊断调优】—— 如何通过trace_id找到对应的执行节点IP
1. 前言 OceanBase作为分布式数据库，查问题找对节点很关键。好在OceanBase执行的每一条SQL都能通过trace_id来关联起来，知道trace_id怎么知道是在哪个节点发起的呢，请看本文。 2. trace_id生成规则 ob内部trace_id的生成函数如下࿰…...
鸿蒙开发Ability Kit（程序访问控制）：【使用粘贴控件】
使用粘贴控件 粘贴控件是一种特殊的系统安全控件，它允许应用在用户的授权下无提示地读取剪贴板数据。 在应用集成粘贴控件后，用户点击该控件，应用读取剪贴板数据时不会弹窗提示。可以用于任何应用需要读取剪贴板的场景，避免弹窗…...
PL/SQL入门到实践
一、什么是PL/SQL PL/SQL是Procedural Language/Structured Query Language的缩写。PL/SQL是一种过程化编程语言，运行于服务器端的编程语言。PL/SQL是对SQL语言的扩展。PL/SQL结合了SQL语句和过程性编程语言的特性，可以用于编写存储过程、触发器、函数等…...
双非本 985 硕，我马上要入职上海AI实验室大模型算法岗
暑期实习基本结束了，校招即将开启。 不同以往的是，当前职场环境已不再是那个双向奔赴时代了。求职者在变多，HC 在变少，岗位要求还更高了。 最近，我们又陆续整理了很多大厂的面试题，帮助一些球友解惑答疑&…...
C盘清理和管理
本篇是C盘一些常用的管理方法，以及定期清理C盘的方法，大部分情况下都能避免C盘爆红。 C盘清理和管理 C盘存储管理查看存储情况清理存储存储感知清理临时文件清理不需要的 迁移存储 磁盘清理桌面存储管理应用存储管理浏览器微信 工具清理 C盘存储管理 查…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
: K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？)
云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？
大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
条件运算符
C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...
江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。 跨国回收网络：废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...