context.drawImage

Hi, any ideas why .addImage wouldn’t work on a context?

PImage.decodeJPEGFromStream(fs.createReadStream(filePath)).then((img) => {
  var ctx = img.getContext('2d');
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, img.width, img.height);

  var maskCanvas = PImage.make(img.width, img.height);
  var maskCtx = maskCanvas.getContext('2d');

  maskCtx.fillStyle = "black";
  maskCtx.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
  ctx.drawImage(maskCanvas, 0,0);
  

  PImage.encodeJPEGToStream(img, fs.createWriteStream(saveOut)).then(()=> {
    console.log("wrote out the png file to out.png");
  }).catch((e)=>{
    console.log("there was an error writing");
  });
});

Here is a sample where the image should come up black but the drawImage call doesn’t seem to be effective. This should work with any image load, basically just trying to get a working test case before moving on.

[jasonjanofsky]

You know, I actually didn’t need xor, I ended up needing destination-atop. I was able to get the implementation working with canvas@next. I imagine I could get it working much better with PureImage — or at least cleaner without binaries flying all over the place. I have very limited experience with imaging/graphics fundamentals though. Mostly just a consumer of the library with that stuff.

Thanks,

Jason J

On January 11, 2018 at 8:40:53 AM, Josh Marinacci ([e-mail]) wrote:

All of the implementation is from scratch. The many composite ops aren’t implemented yet. However, are you sure you need XOR? That is very rare in modern day graphics systems. What are you trying to accomplish?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/joshmarinacci/node-pureimage/issues/46#issuecomment-356986108, or mute the thread https://github.com/notifications/unsubscribe-auth/AEorqHrQO99sGjiTwlM5y7hFesFHvimzks5tJjmVgaJpZM4RXXNB .

[Gmanicus]

No, it turned out that I needed to wait half a second before encoding the image. Yes, otl -> outline.png. That solved the problem but then revealed another issue 😉. I was able to get around it, but I opened an issue for the functionality.