Question

如果我从外部 URL Fabric js 添加图像，则无法将画布导出到图像

2016-05-26

1311

image fabricjs

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

HTML：

<input type="text" id="IMGbyURL" placeholder="http://"/><a href="#" onclick="ImgPorURL(document.getElementById('IMGbyURL').value)">Agregar</a>

用于添加图像的 Javascript：

function ImgPorURL(srcImg){     
fabric.Image.fromURL(srcImg, function(oImg) {
canvas.add(oImg);
})
}

用于导出的 HTML：

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

用于导出画布的 Javascript：

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

但是不起作用，有趣的是，如果我上传图像，保存到服务器中的任何文件夹并将图像添加到画布，它可以完美运行并且画布被导出为图像，但如果我从外部站点添加图像则不起作用...谢谢！！

Answer 1

有趣的是，正如你所说，它被称为 CORS 。跨源资源共享。

Fabricjs 支持一些 CORS 功能

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

如果这不起作用，那么外部链接的服务器不支持在任何地方共享图像。除了在另一台服务器上共享之外，你几乎无能为力，包括你的。

Answer 2

除了 @AndreaBogazzi 的回答 - 如果 FabricJS 配置 {crossOrigin: 'Anonymous'> 不起作用，您可以使用 PHP 代理脚本（在后端），该脚本会将图像从第三方下载到您的域并使用它们提供结构。以下是示例脚本：

<?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;
            }
        }
    }
}
?>