CODEWITHSUNDEEP
javascriptphpcanvashtml5-canvasfabricjs
Khawer Zeshan
Khawer Zeshan

Reputation: 9646

Fabric js load image from data uri coming from another url

I know how to load image from data uri into fabric js. But i am not able to figure out how to load image if the data uri is coming from another url. I have a PHP script which accepts the image URL and returns the base64 image data.

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

Lets assume the url is http://example.com/encodeImage.php?url=http://example.com/image.png. I am trying to use this URL into this function

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

But it is not able to load the image. In the console it says unable to load the image

Is it something even possible to do with fabric js?

Upvotes: 0

Views: 5433

Answers (2)

CodingXone
CodingXone

Reputation: 1

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

Upvotes: 0

SilentTremor
SilentTremor

Reputation: 4902

Add image in this way:

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

Upvotes: 2

Related Questions