gpt4 book ai didi

javascript - 如何在服务器上保存div内容(img)

转载 作者:太空宇宙 更新时间:2023-11-04 16:17:03 25 4
gpt4 key购买 nike

我正在开发一个 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/en/domxpath.query.php 相比你可以看到该函数返回 DOMNodeList元素(即使什么也没找到,它也会返回没有子对象的对象。然后,您将这个对象传递给 imagecreatefromjpeg($filename) ,它接受字符串作为 $filename,而不是对象。另外,您的 xpath 选择器是错误的,您需要在 id 前面加上 @ ,如下所示: $xpath->query('//img[@id="croppedImage"]');

这里有一些代码可以获取 <img />元素离开页面 id然后下载src的URL属性并保存。您需要确保您正在下载的图像的 src 是 jpg否则归档imagecreatefromjpeg()将失败。您可以使用 CURL 或其他方法来下载图像(这样您也可以获得 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;
}

还应该注意的是,您正在将一个变量分配给一个变量。这样做会使事情很快变得困惑。如果您希望将一个变量称为其他名称,只需在初始化它时设置名称,而不是将其分配给具有您想要的名称的另一个变量(我猜这只是您在尝试一些代码后留下的东西,但仍然值得一提)。

关于javascript - 如何在服务器上保存div内容(img),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41000806/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com