CODEWITHSUNDEEP
javascripthtmlnode.jscanvas
fancy
fancy

Reputation: 51333

Use canvas to remove pixels from image?

Can I remove pixels from an image by color using canvas, making that area transparent?

If so...

Can I do this with images hosted on other servers?

Would it be better to do this server-side? https://github.com/LearnBoost/node-canvas

Thanks!

Upvotes: 1

Views: 1739

Answers (3)

Dessus
Dessus

Reputation: 2177

This has been done here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas

It has a live example which seems to work nicely. I recommend you check it out.

Upvotes: 2

Shamaila Tahir
Shamaila Tahir

Reputation: 998

Pixel Manipulation

check the above link. The articles discusses how you can manipulate pixels in a canvas. About displaying images from cross domain server, you cannot do so using canvas, you will get a security exception. To load the images from other server you can use your own server as a proxy, call a method at your server with complete image path and your server should download it image from other server and send it back to you. This way you can show the images from other domains.

Upvotes: 1

Ian Devlin
Ian Devlin

Reputation: 18870

As others have said, this is possible and Dessus' link will help with that.

However you won't be able to do this with images hosted on other servers for security reasons. If you write a remote image to canvas, it treats the canvas as "tainted" and will through a JavaScript security exeption. So you'll only be able to do it on images that are on the same server as the code that performs the manipulation.

Upvotes: 1

Related Questions