方法一：前端JS生成(推荐)
注意：
这个网页只能截图图片效果代码，其它任何html效果都不能有，不然截图就不准确
<!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, quality = 1.0) {
const link = document.createElement('a');
link.href = dataURL;
link.download = filename;
link.click();
}
// 增强的截图并保存的函数，包含DPR调整和图片质量控制
function captureAndSave() {
const targetElement = document.querySelector('#capture-target');
const dpiScale = window.devicePixelRatio || 1;
html2canvas(targetElement, {
scale: dpiScale, // 考虑设备像素比以提升清晰度
dpi: 300, // 可选：设置DPI，对于打印或某些特定需求有用
logging: false, // 可选：关闭日志，减少噪音
}).then(canvas => {
// 将canvas转换为dataURL时，可以进一步控制图片质量，这里以PNG为例不直接涉及质量参数，但您可以根据所选库的具体功能调整
const imageDataURL = canvas.toDataURL('image/jpeg', 0.95); // 示例中假设使用JPEG并设定一个较高质量，实际应根据需求调整
downloadImage(imageDataURL.replace("image/jpeg", "image/octet-stream"), 'screenshot.jpg', 0.95); // 更改MIME类型以适应某些浏览器的下载需求
// 或者如果坚持使用PNG且库支持质量控制，则需查找相应参数或后处理方法
}).catch(error => {
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博客