php实现将设计好的网页图片变成html代码

php实现将设计好的网页图片变成html代码

还记得ps中有个切片导出html吗，其实php也可以实现将设计好的网页变成html网页，具体的原理就是裁剪图片，并且将图片保存到目录中，并将img地址合成拼凑，废话不说了，直接上代码，可直接运行，解决了透明层和黑色底边的问题

<?php
$_temphtml = "bfwtempval";
echo bfwimgtohtml("test.png", 100, 100, "Test", $_temphtml);

/**
 * @param unknown $srcimg 原图片路径
 * @param unknown $sliwidth 裁剪快宽度 如果为0，表示宽度为原图宽度
 * @param unknown $sliheight 裁剪块高度 如果为0，表示高度为原图高度
 * @param unknown $outputpath 输出路径
 * @param unknown $temphtml 网页模板
 */
function bfwimgtohtml($srcimg, $sliwidth, $sliheight, $outputpath, $temphtml)
{
    $maxW = $sliwidth; // 准备将图片裁减成的小图的宽
    $maxH = $sliheight; // 准备将图片裁减成的小图的高
    $img = imagecreatefrompng($srcimg);
    list ($width, $height, $type, $attr) = getimagesize($srcimg);
    if ($sliwidth == 0) {
        $maxW = $width; // 横向切图需要
    }
    if ($sliheight == 0) {
        $maxH = $height; // 横向切图需要
    }
    $widthnum = ceil($width / $maxW);
    $heightnum = ceil($height / $maxH);
    @mkdir($outputpath);
    @mkdir($outputpath . "/image");
    $_html = "";
    // bool imagecopy ( resource dst_im, resource src_im, int dst_x, int dst_y, int src_x, int src_y, int src_w, int src_h )
    // 将 src_im 图像中坐标从 src_x，src_y 开始，宽度为 src_w，高度为 src_h 的一部分拷贝到 dst_im 图像中坐标为 dst_x 和 dst_y 的位置上。
    for ($i = 0; $i < $heightnum; $i ++) {
        if ($widthnum == 1) {
            $_html .= "<div>";
        }else{
            $_html .= "<div style='width:{$width}px;overflow:hidden;height:{$maxH}px;'>";
        }
       // $_html .= "<div>";
        for ($j = 0; $j < $widthnum; $j ++) {
            $_maxW = $maxW;
            $_maxH = $maxH;
            if ($height - $i * $maxH < $maxH) {
                $_maxH = $height - $i * $maxH;
            }
            if ($width - $j * $maxW < $maxW) {
                $_maxW = $width - $j * $maxW;
            }
            $iOut = imagecreatetruecolor($_maxW, $_maxH);
            $color = imagecolorallocate($iOut, 255, 255, 255);
            // 设置透明
            imagecolortransparent($iOut, $color);
            imagefill($iOut, 0, 0, $color);

            imagecopy($iOut, $img, 0, 0, ($j * $maxW), ($i * $maxH), $_maxW, $_maxH); // 复制图片的一部分
            $_imgsrc = "image/" . $i . "_" . $j . ".png";
            if ($widthnum == 1) {
                $_html .= "<img style=\"width:100%;\" src=\"{$_imgsrc}\" />";
            } else {
                $_html .= "<img style=\"float:left;\" src=\"{$_imgsrc}\">";
            }

            imagepng($iOut, $outputpath . "/" . $_imgsrc); // 输出成0_0.jpg,0_1.jpg这样的格式
        }
        $_html .= "</div>";
    }

    $outputhtmlname = pathinfo($srcimg, PATHINFO_FILENAME) . ".html";
    file_put_contents($outputpath . "/" . $outputhtmlname, str_replace("bfwtempval", $_html, $temphtml));
}
?>

非常简单，如果加上人工智能检测图片与文字及空白色的话，会更好，我们可以根据人工智能ai将图片中的小图及文字、单色识别出来，转变成html，再使用css框架进行布局，就完美了，那么前端布局就不用人来写代码了，设计出的网页直接生成有交互效果的网页，以后肯定是这样的。大家觉得呢