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

时间:2015-07-16 02:02:41

标签: javascript php canvas html5-canvas fabricjs

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

class A
  class << self
    attr_accessor :foo
    foo = 'foo'
  end
end

p A.foo # => "nil"

class A
  class << self
    attr_accessor :foo
  end
  self.foo = 'foo'
end

p A.foo # => "foo"

让我们假设网址是<?php $path = $_REQUEST['url']; $type = pathinfo($path, PATHINFO_EXTENSION); $data = file_get_contents($path); $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data); echo $base64; ?> 。我正在尝试将此URL用于此功能

http://example.com/encodeImage.php?url=http://example.com/image.png

但它无法加载图像。在控制台中显示fabric.Image.fromURL('http://example.com/encodeImage.php?url=http://example.com/image.png', function(img) {

是否可以使用fabric js?

1 个答案:

答案 0 :(得分:2)

以这种方式添加图片:

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