This commit is contained in:
2023-04-11 16:10:29 +08:00
parent a82132a258
commit 5bd0eed05c
+4 -70
View File
@@ -1,5 +1,4 @@
<?php <?php
echo 123;die;
init(); init();
?> ?>
@@ -58,43 +57,15 @@ init();
function show_index() function show_index()
{ {
$imgUrl1 = "/img/2.jpg";
$imgUrl2 = "/img/1.jpg";
$imgUrl3 = "/img/3.jpg";
ob_start(); ?> ob_start(); ?>
<?php
$list = [$imgUrl1, $imgUrl2, $imgUrl3]
?>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3">
<?php foreach ($list as $row) { ?>
<div class="bg-red-50 md:h-[260px] h-[180px] w-full rounded-xl border-red-100 border-1">
<a href="/">
<img id="image" class="image object-cover h-full w-full rounded-xl" src="<?php echo create_blurred_resized_image(PUBLIC_PATH . $row, 10, 10); ?>" alt="" orgSrc="<?php echo $row ?>">
</a>
</div>
<?php } ?>
<div class="">
<p class="text-2xl">
this is about
</p>
</div> </div>
<script>
const images = document.getElementsByClassName('image');
for (var i = 0; i < images.length; i++) {
const originalImageUrl = images[i].getAttribute("orgSrc");
const img = images[i];
const onLoadHandler = () => {
img.removeEventListener('load', onLoadHandler);
img.src = originalImageUrl;
};
images[i].addEventListener('load', onLoadHandler);
}
</script>
<?php <?php
$html = ob_get_contents(); $html = ob_get_contents();
ob_clean(); ob_clean();
@@ -208,43 +179,6 @@ function show_page()
call_user_func("show_404"); call_user_func("show_404");
} }
} }
function create_blurred_resized_image($source_image_path, $width, $height)
{
$image = imagecreatefromjpeg($source_image_path);
$originalWidth = imagesx($image);
$originalHeight = imagesy($image);
// 计算缩放比例
$ratio = min($width / $originalWidth, $height / $originalHeight);
// 计算缩放后的尺寸
$newWidth = intval($originalWidth * $ratio);
$newHeight = intval($originalHeight * $ratio);
// 创建一个新的空白画布
$resizedImage = imagecreatetruecolor($newWidth, $newHeight);
// 将原始图片缩放并复制到新画布
imagecopyresampled($resizedImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $originalWidth, $originalHeight);
// 模糊程度
$blurFactor = 15;
// 使用 imagefilter 函数实现模糊效果
for ($i = 0; $i < $blurFactor; $i++) {
imagefilter($resizedImage, IMG_FILTER_GAUSSIAN_BLUR);
}
// 将模糊后的图片转换为 base64
ob_start();
imagejpeg($resizedImage);
$contents = ob_get_contents();
ob_end_clean();
imagedestroy($image);
imagedestroy($resizedImage);
return 'data:image/jpeg;base64,' . base64_encode($contents);
}
// common func end // common func end
?> ?>