Caman: Could not find image or canvas for initialization

Question

I try to use CamanJS for image manipulation. I have the following html file:

<div class="filter-container modal">
    <div class="filter">
        <div class="filter-img"></div>
    </div>
</div>

To create the <img> i do the following in my filter.js:

initialize: function (options) {
    var self = this;

    self.options = options;
    self.promise = $q.defer();

    self.loadImage().then(function (elem) {
        self.imgWidth = elem.naturalWidth;
        self.imgHeight = elem.naturalHeight;
        self.imgOriginal = elem.cloneNode();
        self.imgFilter = elem.cloneNode();

        self.options.modal.el.querySelector(".filter-img").appendChild(self.imgFilter);
    });

    self.options.cancel = this.cancel.bind(this);
    self.options.filter = this.filter.bind(this);
    self.options.previousFilter = this.previousFilter.bind(this);
    self.options.nextFilter = this.nextFilter.bind(this);
},

loadImage: function () {
    var promise = $q.defer();

    angular.element("<img />")
        .bind("load", function (e) {
            promise.resolve(this);
        })
        .bind("error", promise.reject)
        .prop("src", this.options.url)
        .prop("id", IMAGE_ID);

    return promise.promise;
},

When i now want to test a filter:

performFilter: function () {
    Caman(IMAGE_ID, function () {
        this.brightness(10);
        this.contrast(30);
        this.sepia(60);
        this.saturation(-30);
        this.render();
    });
}

I get the error message:

Could not find image or canvas for initialization.

So for me that means the <img> i created does not exist? I have no idea why.

Answer 1

exchange this line:

Caman(IMAGE_ID, function() {

with this line:

Caman(this.imgFilter, function() {