Javascript 如何显示og：在我的链接网站缩略图图像

我有一个输入字段，用户可以在其中输入URL（网站链接、视频链接、谷歌地图链接或任何其他链接）

我想显示这些链接的缩略图和描述作为预览，而不是简单的URL。 我想使用og:image meta来获取缩略图，但我不知道如何存档，应该使用什么技术，或者是否有任何api来获取缩略图。

---

谢谢

您可以使用下面的代码。只需使用

POST

请求将

url

变量传递给

get\u url\u data.php

，您将得到

image

、

description

和

title

获取_url_data.php

<?php

if(isset($_POST['url']) && !empty($_POST['url']) && filter_var($_POST['url'], FILTER_VALIDATE_URL)) {
    //gets the HTML data
    $source = getData($_POST['url']);
    // DOM document Creation
    $doc = new DOMDocument;
    libxml_use_internal_errors(true);
    $doc->loadHTML($source);
    libxml_clear_errors();
    // DOM XPath Creation
    $xpath = new DOMXPath($doc);
    // Gets title
    $title = $xpath->query('//title')->item(0)->textContent;
    if(empty($title))
        $title = "No title found";
    // Gets all Open Graph images
    $events = $xpath->query('//meta[@property="og:image"]/@content');
    $image = "";
    for($i = 0; $i < ($events->length); $i++) {
        $event = $events->item($i);
        $des = $xpath->evaluate('//meta[@property="og:image"]/@content', $event);
        if ($des->length > 0) {
            $image = $des->item(0)->value;
            break;
        }
    }
    if(empty($image))
        $image = "image-not-found.gif";
    // Gets all Open Graph descriptions
    $events = $xpath->query('//meta[@property="og:description"]/@content');
    $description = "";
    for($i = 0; $i < ($events->length); $i++) {
        $event = $events->item($i);
        $des = $xpath->evaluate('//meta[@property="og:description"]/@content', $event);
        if ($des->length > 0) {
            $description = $des->item(0)->value;
            break;
        }
    }
    if(empty($description))
        $description = "-- No description found --";
    //output
    $data = array('title' => $title, 'image' => $image, 'description' => $description);
    echo json_encode($data);
}
//fetches HTML data from a URL
function getData($url)
{   
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
    curl_setopt($ch, CURLOPT_HEADER,0);
    curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 GTB6 (.NET CLR 3.0.4506.2152)");
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);
    curl_setopt($ch, CURLOPT_URL, $url);    
    $content = curl_exec($ch);
    curl_close($ch);
    return $content;
}

loadHTML（$source）；
libxml_clear_errors（）；
//domxpath创建
$xpath=新的DOMXPath（$doc）；
//获得头衔
$title=$xpath->query（'//title'）->item（0）->textContent；
如果（空（$title））
$title=“未找到标题”；
//获取所有打开的图形图像
$events=$xpath->query（'//meta[@property=“og:image”]/@content'）；
$image=“”；
对于（$i=0；$i<（$events->length）；$i++）{
$event=$events->item（$i）；
$des=$xpath->evaluate（'//meta[@property=“og:image”]/@content'，$event）；
如果（$des->length>0）{
$image=$des->item（0）->value；
打破
}
}
if（空（$image））
$image=“未找到图像.gif”；
//获取所有打开的图形描述
$events=$xpath->query（'//meta[@property=“og:description”]/@content'）；
$description=“”；
对于（$i=0；$i<（$events->length）；$i++）{
$event=$events->item（$i）；
$des=$xpath->evaluate（'//meta[@property=“og:description”]/@content'，$event）；
如果（$des->length>0）{
$description=$des->item（0）->value；
打破
}
}
if（空（$description））
$description=“--找不到描述--”；
//输出
$data=array（'title'=>$title，'image'=>$image，'description'=>$description）；
echo json_编码（$data）；
}
//从URL获取HTML数据
函数getData（$url）
{   
$ch=curl_init（）；
curl_setopt（$ch，CURLOPT_RETURNTRANSFER，1）；
curl_setopt（$ch，CURLOPT_头，0）；
curl_setopt（$ch，CURLOPT_USERAGENT，“Mozilla/5.0（Windows；U；Windows NT 5.1；en-US；rv:1.9.1.7）Gecko/20091221 Firefox/3.5.7 GTB6（.NET CLR 3.0.4506.2152）”；
curl_setopt（$ch，CURLOPT_FOLLOWLOCATION，1）；
curl_setopt（$ch，CURLOPT_URL，$URL）；
$content=curl\u exec（$ch）；
卷曲关闭（$ch）；
返回$content；
}

您还可以查看my

git

存储库以了解更多详细信息

---

使用domdocument和xpath解析html和fibd

$xpath->evaluate（'//meta[@name=“description”]/@content'）
<?php

if(isset($_POST['url']) && !empty($_POST['url']) && filter_var($_POST['url'], FILTER_VALIDATE_URL)) {
    //gets the HTML data
    $source = getData($_POST['url']);
    // DOM document Creation
    $doc = new DOMDocument;
    libxml_use_internal_errors(true);
    $doc->loadHTML($source);
    libxml_clear_errors();
    // DOM XPath Creation
    $xpath = new DOMXPath($doc);
    // Gets title
    $title = $xpath->query('//title')->item(0)->textContent;
    if(empty($title))
        $title = "No title found";
    // Gets all Open Graph images
    $events = $xpath->query('//meta[@property="og:image"]/@content');
    $image = "";
    for($i = 0; $i < ($events->length); $i++) {
        $event = $events->item($i);
        $des = $xpath->evaluate('//meta[@property="og:image"]/@content', $event);
        if ($des->length > 0) {
            $image = $des->item(0)->value;
            break;
        }
    }
    if(empty($image))
        $image = "image-not-found.gif";
    // Gets all Open Graph descriptions
    $events = $xpath->query('//meta[@property="og:description"]/@content');
    $description = "";
    for($i = 0; $i < ($events->length); $i++) {
        $event = $events->item($i);
        $des = $xpath->evaluate('//meta[@property="og:description"]/@content', $event);
        if ($des->length > 0) {
            $description = $des->item(0)->value;
            break;
        }
    }
    if(empty($description))
        $description = "-- No description found --";
    //output
    $data = array('title' => $title, 'image' => $image, 'description' => $description);
    echo json_encode($data);
}
//fetches HTML data from a URL
function getData($url)
{   
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
    curl_setopt($ch, CURLOPT_HEADER,0);
    curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 GTB6 (.NET CLR 3.0.4506.2152)");
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);
    curl_setopt($ch, CURLOPT_URL, $url);    
    $content = curl_exec($ch);
    curl_close($ch);
    return $content;
}