做网站优化的工资有多高,wordpress 插件 语言包,福州专业网站设计团队,百度的关键词优化方法一#xff1a;前端JS生成(推荐)
注意#xff1a;
1.这个网页只能截图图片效果代码#xff0c;其它任何html效果都不能有#xff0c;不然截图就不准确
2.如果要生成的图片DIV内容中引用了第三个方的图片#xff0c;就是不使用同一个域名下的图片#xff0c;需要把后…方法一前端JS生成(推荐)
注意
1.这个网页只能截图图片效果代码其它任何html效果都不能有不然截图就不准确
2.如果要生成的图片DIV内容中引用了第三个方的图片就是不使用同一个域名下的图片需要把后端把图片转为Base64才可以生成截图、不然会造成跨域的问题生成的图片会是空白的
图片转为Base64后的显示方式
img srcdata:image/jpeg;base64,{$PosterParameters[imgp_Base64]} /
例子 div classcontainer idcapture-targetdiv classimg{notempty name$PosterParameters[img_Base64]}img srcdata:image/jpeg;base64,{$PosterParameters[img_Base64]} /{/notempty}/divdiv classusernamep{notempty name$PosterParameters[name]}{$PosterParameters[name]}{/notempty}/p/divdiv classinvite_textp{notempty name$PosterParameters[invite_text]}{$PosterParameters[invite_text]}{/notempty}/p/divdiv classlive_time_dayp{notempty name$PosterParameters[day]}{$PosterParameters[day]}{/notempty}/p/divdiv classlive_timep{notempty name$PosterParameters[hi]}{$PosterParameters[hi]}{/notempty}/p/divdiv classimgp{notempty name$PosterParameters[imgp_Base64]}img srcdata:image/jpeg;base64,{$PosterParameters[imgp_Base64]} /{else /}{notempty name$PosterParameters[imgp]}img src{$PosterParameters[imgp]} /{/notempty}{/notempty}/divdiv classtitlep idmyDiv{notempty name$PosterParameters[title]}{$PosterParameters[title]}{/notempty}/p/divdiv classqr-codeimg src{notempty name$PosterParameters[QRcodeUrl]}{$PosterParameters[QRcodeUrl]}{/notempty} width160px height160px //div/div
!DOCTYPE html
html langen
headmeta charsetUTF-8title网页内容转图片示例/title!-- 引入html2canvas库 --script srchttps://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js/script
/head
body!-- 截图内容 --
div idcapture-targeth1欢迎来到我的网站/h1p这是一个用于演示如何将网页内容转换成图片的例子。/p
/div!-- 按钮触发截图 --
button onclickcaptureAndSave()点击截图保存/buttonscript// 图片下载函数增强对不同浏览器的支持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 $type0){$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 [statustrue, 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_perfalse, $text, $s_width0, $s_height0){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; filenameimage.gif);$result imagegif($bgimg, $new_filename);break;case 2://JPGheader(Content-Type: image/jpeg);header(Content-Disposition: inline; filenameimage.jpg);imagejpeg($bgimg, $new_filename);break;case 3://PNGheader(Content-Type: image/png);header(Content-Disposition: inline; filenameimage.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_perfalse){list($width, $height, $dst_type)getimagesize($filename);if($is_per){$per0.3;$n_w$width*$per;$n_h$height*$per;}switch ($dst_type) {case 2://JPG$imgimagecreatefromjpeg($filename);break;case 3://PNG$img imagecreatefrompng($filename);break;default:break;}$newimagecreatetruecolor($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 生成二维码并与背景图、文字组合生成分享海报_tp5phpqrcode二维码下方带文字-CSDN博客
