How do you load an image in a canvas using CamanJS?

Question

The example on the CamanJS website (http://camanjs.com/guides/#BasicUsage) looks like this:

Caman("#canvas-id", "path/to/image.jpg", function () {
  // manipulate image here
  this.brightness(5).render();
});

I've tried to run this very first, very basic example on JSBin (http://jsbin.com/uGUPOFo/3/edit?html,js,output) using one of my own images

Caman("#cv", "http://preemiestoday.noahpeters.com/images/feature.png", function () {
  this.brightness(5).render();
});

But it does nothing. Does anyone know what I'm missing? The docs say that it can run "next to jQuery, YUI, Scriptaculous, MooTools, etc." I would like to not use any of those, though I tried loading the latest 1.x jQuery to no effect.

Answer 1

it seems to me that the image is not on your server but remote.

if i were you i'd check out this link: https://github.com/meltingice/CamanJS/wiki/How-to-use#editing-remote-images

"CamanJS can even edit images that are stored remotely. Since the browser enforces a same-origin policy for editing canvas data, we have to load the image data via a local proxy."

"If no proxy is defined when a remote image is attempted to be edited, an error will be thrown."