TP8 JS(html2canvas) 生成二维码并与背景图、文字组合生成分享海报

方法一：前端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博客