Image Can´；如果我从外部url fabric js添加图像，则不会导出画布ti图像

您好，我创建了一个从外部URL添加图像的函数：

HTML:

要导出的HTML：

<a href="#" onclick="convertToImagen()">Export</a>

---

但不起作用，有趣的是，如果我上传图像，保存到服务器中的任何文件夹，并将图像添加到画布上，它工作正常，画布作为图像导出，但如果我从外部站点添加图像，则不起作用。。。谢谢

你所说的有趣的事情叫做CORS。 跨来源资源共享

Fabricjs支持一些CORS功能

fabric.Image.fromURL(srcImg, function(oImg) {
canvas.add(oImg);
}, {crossOrigin: 'Anonymous'});

---

如果这不起作用，那么外部链接的服务器就不支持到处共享图像。除了在另一台服务器（包括您的服务器）上共享之外，您几乎没有什么可以做的。

有趣的事情，您称之为CORS。 跨来源资源共享

Fabricjs支持一些CORS功能

fabric.Image.fromURL(srcImg, function(oImg) {
canvas.add(oImg);
}, {crossOrigin: 'Anonymous'});

---

如果这不起作用，那么外部链接的服务器就不支持到处共享图像。除了在另一台服务器上共享之外，除了@AndreaBogazzi的答案之外，你几乎没有什么可以做的，包括你的。

——如果FabricJS配置

{crossOrigin:'Anonymous'}

不起作用，你可以使用PHP代理脚本（在后端）将图像从第三方下载到你的域，并使用它们提供fabric服务。以下是：

---

除了@AndreaBogazzi的答案之外-如果FabricJS配置
{crossOrigin:'Anonymous'}
不起作用，您可以使用PHP代理脚本（在后端）将图像从第三方下载到您的域中，并使用它们提供fabric服务。以下是：


function convertToImagen() {
canvas.deactivateAll().renderAll();  
window.open(canvas.toDataURL('jpg')); 
}

fabric.Image.fromURL(srcImg, function(oImg) {
canvas.add(oImg);
}, {crossOrigin: 'Anonymous'});

<?php
// define absolute path to image folder
$image_folder = '/home/mydomain/upload_folder/';
// get the image name from the query string
// and make sure it's not trying to probe your file system
if (isset($_GET['pic']) && basename($_GET['pic']) == $_GET['pic']) {
    $pic = $image_folder.$_GET['pic'];
    if (file_exists($pic) && is_readable($pic)) {
        // get the filename extension
        $ext = substr($pic, -3);
        // set the MIME type
        switch ($ext) {
            case 'jpg':
                $mime = 'image/jpeg';
                break;
            case 'gif':
                $mime = 'image/gif';
                break;
            case 'png':
                $mime = 'image/png';
                break;
            default:
                $mime = false;
        }
        // if a valid MIME type exists, display the image
        // by sending appropriate headers and streaming the file
        if ($mime) {
            header('Content-type: '.$mime);
            header('Content-length: '.filesize($pic));
            $file = @ fopen($pic, 'rb');
            if ($file) {
                fpassthru($file);
                exit;
            }
        }
    }
}
?>