update
This commit is contained in:
+4
-70
@@ -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
|
||||||
?>
|
?>
|
||||||
Reference in New Issue
Block a user