Fabric js从来自另一个url的数据uri加载图像

Question

我知道如何将图像从数据 uri 加载到结构 js 中。但是如果数据 uri 来自另一个 url，我无法弄清楚如何加载图像。我有一个接受图像 URL 并返回 base64 图像数据的 PHP 脚本。

<?php
    $path = $_REQUEST['url'];
    $type = pathinfo($path, PATHINFO_EXTENSION);
    $data = file_get_contents($path);
    $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
    echo $base64;
?>

假设网址是http://example.com/encodeImage.php?url=http://example.com/image.png。我正在尝试将此 URL 用于此功能

fabric.Image.fromURL('http://example.com/encodeImage.php?url=http://example.com/image.png', function(img) {

但它无法加载图像。在控制台中显示unable to load the image

有没有可能用fabric js做点什么？

Answer 1

这样添加图片：

var img = new Image();
    img.onload = function () {
        var imgbase64 = new fabric.Image(img, {
            scaleX: 0.2,
            scaleY: 0.2
        })
        canvas.add(imgbase64);
        canvas.deactivateAll().renderAll();
    }

$.ajax({url: "http://example.com/encodeImage.php?url=http://example.com/image.png", success: function(result){
        img.src = result;
    }});

Answer 2

fabric.Image.fromURL(url, function (img, callback) {
    img.id = imageId;
    img.filters = [new fabric.Image.filters.HueRotation()];
    img.applyFilters()
    var cor = img.set(
        {
            left: left,
            top: top,
            selectable: false,
        }
    )

    canvas.add(img);
});