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博客

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

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

相关文章

Python爬取淘宝商品评价信息实战:从零到一的高效教程

引言&#xff1a;揭秘淘宝数据金矿 在电商领域&#xff0c;用户评价是衡量产品优劣的金标准。作为Python爬虫工程师&#xff0c;掌握从淘宝这座数据金矿中挖掘宝贵评价信息的技能至关重要。本文将带你手把手实操&#xff0c;用Python爬虫技术获取淘宝商品的评价信息&#xff0…

Docker多阶段构建Node.js应用程序

Node.js 应用程序 创建一个目录来存放你的项目文件&#xff0c;然后在该目录下创建以下文件。 package.json {"name": "docker-node-test","version": "1.0.0","description": "A simple Node.js app for Docker mu…

【折腾笔记】使用 PicList + Lsky Pro 对图片进行双重压缩

前言 因为服务器的带宽比较小,为了提高网站的访问速度,网站内的图片进行压缩是必不可少的。另外将图片转换成WebP的格式可以减小文件大小、加快加载速度、支持高级特性(如透明度和动画),以及减少存储需求,为网站提供了显著的性能。需要提前安装好PicList客户端和Lsky Pr…

最快33天录用!一投就中的医学4区SCI,几乎不退稿~

【SciencePub学术】今天小编给大家推荐2本生物医学领域的SCI&#xff0c;此期刊为我处目前合作的重点期刊&#xff01;影响因子0-3.0之间&#xff0c;最重要的是审稿周期较短&#xff0c;对急投的学者较为友好&#xff01; 医学医药类SCI 01 / 期刊概况 【期刊简介】IF&…

那些好用的 Vue3 的工具搭子!!【送源码】

2020 年 9 月 18 日 Vue3 的正式发布已经过去了大约 3 年 9 个月左右&#xff01;&#xff01;&#xff01; 随着 Vue3 版本的逐渐成熟&#xff0c;我们的前端世界也迎来了一系列令人振奋的更新和工具。Vue 生态圈的持续扩大&#xff0c;无疑为前端开发人员带来了前所未有的便…

通过pycharm使用git和github的步骤

一、在Pycharm工具中配置集成Git和GitHub。 1.集成Git。 打开Pycharm, 点击File-->Settins-->Version Control-->Git 然后在 Path to Git executable中选择本地的git.exe路径。如下图&#xff1a; 2.集成GitHub 打开Pycharm, 点击File-->Settins-->Version…

探索未来远程调试新纪元——《串口网口远程调试软件》:无缝连接,高效调试

文章目录 前言一、无缝连接&#xff0c;突破距离限制二、高效调试&#xff0c;提升工作效率三、安全可靠&#xff0c;保护数据安全四、用户友好&#xff0c;简化操作流程五、软件地址六、远程调试软件 七、基本操作1、订阅主题2、连接3、串口调试4、网口调试 八、软件地址结束语…

PO模式登录测试

项目实践 登陆项目测试 get_driver import page from selenium import webdriverclass GetDriver:driver Noneclassmethoddef get_driver(cls):if cls.driver is None:cls.driver webdriver.Edge()cls.driver.maximize_window()cls.driver.get(page.url)return cls.drivercl…

Java高风险漏洞与修复之——LDAP injection(LDAP注入)

LDAP注入介绍 LDAP注入是一种攻击技术,它可以利用应用程序中的安全漏洞对LDAP(轻量级目录访问协议)服务进行恶意查询或修改操作。当应用程序未能适当地清理用户的输入内容,将其嵌入到LDAP查询中时,就可能发生LDAP注入。攻击者通过注入未经授权的指令或条件来操纵查询结果…

【代码随想录训练营】【Day 66】【图论-3】| 卡码 101-104

【代码随想录训练营】【Day 66】【图论-3】| 卡码 101-104 需强化知识点 103&#xff0c;104 优化思路 题目 101. 孤岛的总面积 此处 area 多余 def dfs(grid, x, y, area):dirs [[0, 1], [0, -1], [1, 0], [-1, 0]]m, n len(grid), len(grid[0])area[0] 1grid[x][y] …

k8s学习笔记——k8s升级

前一段时间&#xff0c;由于搭建k8s集群的硬件设备故障&#xff0c;老化导致k8s需要重装。使用原来的kubeadm安装方式却发现装不了了。查了一下官方文档&#xff0c;说从v1.24版本之后&#xff0c;kubelet移除了容器引擎&#xff0c;容器及镜像管理将有第三方工具来接管&#x…

Vue.js有哪些优点和缺点

Vue.js 作为一个流行的前端框架&#xff0c;具有许多优点和一些潜在的缺点。以下是 Vue.js 的一些主要优点和缺点&#xff1a; 优点&#xff1a; 轻量级和灵活性&#xff1a;Vue.js 的核心库专注于视图层&#xff0c;这使得它非常轻量级&#xff08;压缩后只有几十KB&#xff…

Web 反爬指南

本质上说&#xff0c;防抓的目的在于增加脚本或机器获取你网站内容的难度&#xff0c;而不要影响真实用户的使用或搜索引擎的收录 不幸的是这挺难的&#xff0c;你需要在防抓和降低真实用户以及搜索引擎的可访问性之间做一下权衡。 为了防爬&#xff08;也称为网页抓取、屏幕…

智谱AI: ChatGLM API的使用

一、获取API 1、打开网址&#xff1a;智谱AI开放平台 注册账号登录 2、登录&#xff0c;查看API key (注册后赠送100万token&#xff0c;实名认证后多赠送400万, 有效期一个) 二、安装及调用 安装质谱SDK pip install zhipuai调用方式 流式调用 from zhipuai import ZhipuA…

开放签电子签章,让签字有迹可循

开放签&#xff08;企业版&#xff09;V2.0.5版本上线后&#xff0c;系统支持一键查询电子文件的签署操作记录&#xff0c;支持一键生成详细的签署记录报告&#xff0c;详细请看下图&#xff1a; 1、操作记录详情&#xff1a; 从合同发起、填写、签署、撤销等环节全流程展示操…

【Linux从入门到放弃】探究进程如何退出以进程等待的前因后果

&#x1f9d1;‍&#x1f4bb;作者&#xff1a; 情话0.0 &#x1f4dd;专栏&#xff1a;《Linux从入门到放弃》 &#x1f466;个人简介&#xff1a;一名双非编程菜鸟&#xff0c;在这里分享自己的编程学习笔记&#xff0c;欢迎大家的指正与点赞&#xff0c;谢谢&#xff01; 进…

常见反爬及应对

一&#xff0c;特殊混淆的还原 1.1 还原 AAEncode 与 JJEncode AAEncode是一种JavaScript代码混淆算法&#xff0c;利用它&#xff0c;可以将代码转换成 颜文字 表示的JavaScript代码。 去掉代码最后的 (‘‘)&#xff0c;这是函数的自调用&#xff0c;去除后就是函数的声明…

【CSharp】定义结构体并指定字段对齐

【CSharp】定义结构体并指定字段对齐 1.背景2.代码3.分析1.背景 在 C# 中可以通过 StructLayout 属性来定义结构体并指定字段对齐方式。 在 C# 中,内存对齐是指数据在内存中的排列方式,使用StructLayout 特性用于控制结构体的内存布局。其特性可以指定字段的内存排列顺序(例…

【揭秘】国内十大顶尖AI大模型,引领智能科技新纪元

大模型大模型通常指的是参数量非常大、数据量也非常大的深度学习模型。这些模型由数百万到数十亿甚至更多的参数组成&#xff0c;需要海量的数据和强大的计算资源进行训练和推理学习的模型。大模型设计的目的在于提高模型的表示能力和性能、应对复杂数据集和任务、提升泛化能力…

6、限界上下文:定义领域边界的利器

在DDD限界上下文&#xff1a;定义领域边界的利器领域建模和微服务建设过程中&#xff0c;会有很多项目参与者&#xff0c;包括领域专家、产品经理、项目经理、架构师、开发经理和测试经理等。对于同样的领域知识&#xff0c;不同的参与者可能会有不同的理解。而且有的时候同一个…