如何在服务器上保存DIV内容(IMG)



我正在开发一个Web应用程序,用户可以在其中裁剪图像。用户必须能够通过电子邮件发送给URL,以便其他人可以查看裁剪的图像。这意味着每个裁剪的图像必须存储在服务器上,以使URL永远不会死亡。我的HTML的部分包含裁剪图像:

<div class="contain" id="myDiv">
    <img src="" id="croppedImage">
</div>

裁剪功能正常工作,并用JavaScript编写。我正在使用PHP通过DOM解析,提取图像并将其保存在服务器上,但它不起作用。任何帮助将不胜感激。

<?php
$dom = new DOMDocument();
$dom->loadHTML($html);
$xpath = new DOMXPath($dom);
$divContent = $xpath->query('//img[id="croppedImage"]');
$my_server_img = $divContent;
$img = imagecreatefromjpeg($my_server_img);
$path = 'images_saved/';
imagejpeg($img, $path);
?>

查看您的代码并查看您使用的功能后,我查看了此部分:$xpath->query('//img[id="croppedImage"]');,并将其与http://php.net/manual/manual/en/en/domxpath.query.query.php进行了比较。您可以看到该函数返回一个DOMNodeList元素(即使没有找到任何东西,它也不会返回没有孩子的对象。然后,您将其接收到该对象并将其传递给imagecreatefromjpeg($filename),该对象接受字符串作为$ filename,而不是对象。也是一个。您的XPATH选择器是错误的,您需要将id带有@的前缀,例如:$xpath->query('//img[@id="croppedImage"]');

因此,这里有一些代码,它将通过其id从页面上获取<img />元素,然后下载src属性的URL并保存。您将要确保要下载的图像的SRC是jpg文件,否则imagecreatefromjpeg()将失败。您可以使用卷曲或另一种方法下载图像(因此也可以获取PNG图像),但这不在此答案的范围内。

$dom = new DOMDocument();
$dom->loadHTML('
    <html>
        <img src="http://images.freepicturesweb.com/img1/18/02/13.jpg" id="croppedImage2"/>
        <img src="http://images.freepicturesweb.com/img1/18/02/14.jpg" id="croppedImage3"/>
    </html>
');
$xpath = new DOMXPath($dom);
$imageElements = $xpath->query('//img[@id="croppedImage2"]');
// make sure $imageElements isn't empty
if($imageElements->length) {
    // grab first item in list (should only be one)
    /** @var DOMElement $imageElement */
    $imageElement = $imageElements->item(0);
    // get the src attribute off the <img>
    $src = $imageElement->getAttribute('src');
    // download and create image resource based off $src
    $img = imagecreatefromjpeg($src);
    // save image with random name to current directory
    $filename =  __DIR__.'/'.base_convert(sha1(uniqid(mt_rand(), true)), 16, 36).'.jpg';
    imagejpeg($img, $filename);
    echo "File saved to: ".$filename;
}

还应注意,您将变量分配给变量。这样做会很快变得凌乱。如果您希望一个变量被称为其他东西,请在初始化它时设置名称,而不是将其分配给另一个带有所需名称的变量(我猜这只是您尝试过一些代码后剩下的东西,但仍然值得一提的)。

最新更新