1

I'm trying to blend two images using the Pixastic plugin - here's my code.

These images will be dynamic, I'm not really sure why the test isn't working. Chances are I've done something wrong as I don't think I've coded it correctly. Does this have to be working with the jQuery plugin?

Can someone please explain how to get the blending mode working on 2 images, one of which is unknown but the IDs are fixed?

halfer
  • 19,824
  • 17
  • 99
  • 186
Tara Irvine
  • 819
  • 3
  • 22
  • 42
  • What is the demo supposed to do? – JJJ Jul 26 '12 at 17:00
  • Looks like it is working to me - the "worry lines" are superimposed on the model's forehead. – halfer Jul 26 '12 at 17:01
  • neither of those files (blend, pixastic) reference jquery in them, so no they're not dependent on jquery – Kristian Jul 26 '12 at 17:02
  • Thanks guys, the forehead "worry lines" are meant to blend into the picture of the model. Like this http://www.pixastic.com/lib/docs/actions/blend/ I keep getting this error "Unable to get image data from canvas because the canvas has been tainted by cross-origin data. Uncaught Error: SECURITY_ERR: DOM Exception 18 " – Tara Irvine Jul 27 '12 at 07:45
  • Don't you think it would have been a good idea to put the error message in the question in the first place? Anyway, the error means that you're being bitten by the [same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy) which puts limitations to what you can do with the data. Put all the pictures to the same server where the script is and you should be good. – JJJ Jul 27 '12 at 08:26
  • Sorry it was on the Jsfiddle so I thought everyone could see it. I understand, so in order to test, everything needs to be on the same sever. I'll update it now. Thanks – Tara Irvine Jul 27 '12 at 08:29
  • I ended up using this http://stackoverflow.com/questions/3648312/blend-two-images-on-a-javascript-canvas/3648399#3648399 I couldn't get Pixastic to work so I built my own, thanks for the help anyway – Tara Irvine Aug 09 '12 at 11:01

1 Answers1

0
  1. Your second images loaded is retrieving a 404. It means there is any image there.
  2. Your External libraries (pixastic.core.js, blend.js) are retrieving a 404 status too.

  3. You must get the image element on the second line of your javascript.

    var img = new Image(); img = document.getElementById("userImage");

napstercake
  • 1,815
  • 6
  • 32
  • 57