方法一：前端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://GIF
header('Content-Type: image/gif');
header('Content-Disposition: inline; filename="image.gif"');
$result = imagegif($bgimg, $new_filename);
break;
case 2://JPG
header('Content-Type: image/jpeg');
header('Content-Disposition: inline; filename="image.jpg"');
imagejpeg($bgimg, $new_filename);
break;
case 3://PNG
header('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博客
