Proxy html2canvas.appspot

[MHase]

Hey

I'm having some issues running your script locally whenever I'm importing some images as you did in your example e.g. <img src="lenna.png" />

After using at least one image the whole script brokes, nothing happens and constantly adds new script tag at the end of the body element -> <script type="text/javascript" src="http://html2canvas.appspot.com/?url=http%3A%2F%2F207.154.195.207%2F~sandu%2Fglitch_test%2Flenna.png&amp;callback=html2canvas_0"></script> I'm getting 500 from this url

As I can see in html2canvas script it is a proxy URL and one way to disable it is to pass proxy: false in the glitch method options, but after that, every image doesn't have a glitch applied

Do you have any idea how to fix that? Or did you use some kind of a trick to make it works in your examples?

[commodo]

hey

apologies for the slow reply; i'm not very active during weekends;

it's been a while since i used/wrote this script; but, i did not write the html2canvas script;

i guess using proxy: false is a good idea; in my case, it never used that http://html2canvas.appspot.com URL;

i use Firefox; are you getting this in Chrome? or some other browser?

i usually put the images in the same location as the HTML pages, so there was never any issue with CORS or proxy; i'm a bit tempted to remove the proxy code; it looks like it could be maliciously used;

[MHase]

thank you for your reply!

I guessed that you've never used this proxy intentionally because it was hidden deep in the html2canvas file ☺️

yes, on daily basis I use Chrome, but I also tested it on Firefox with exactly the same result...

here you can find your repo forked on codesanbox. it doesn't show any errors in the developer console or in DOM, but shows my point 😄 (I made only one change - added text and 3 divs to check if the filter works correctly on other elements than img)

I can only think of one solution for now... it works in your case because it is hosted on "real" server

[commodo]

I can only think of one solution for now... it works in your case because it is hosted on "real" server

it also works locally for me;

[MHase]

I can only think of one solution for now... it works in your case because it is hosted on "real" server

it also works locally for me;

alright, I think I was right with the "real" server I deployed my codesandbox to the Vercel and it works as it should

thank you for your help and your glitch example (it's the best I found on the Internet 🚀 ) :) I will try to find a way to make it work in my environment 😄

EDIT: it works only for self-hosted images :)

[commodo]

in Firefox I get these errors in the console, but it still works:

that line of code is:

                // store the data of the original image for use when offsetting a channel
                srcData = tempCtx.getImageData(0, 0, w, h).data;

if it's something with html2canvas, I could probably try to upgrade it from https://github.com/niklasvh/html2canvas

thank you for your help and your glitch example (it's the best I found on the Internet :rocket: ) :) I will try to find a way to make it work in my environment :smile:

thank you for the feedback; i don't get too much on it, other than the Github forks an stars :)

this project is from 2013; i did it for some other project at the time; and the glitchlib-js was the best i found at the time; since then, i also saw a few other (static) glitch effects (some with CSS?) i wanted an animation (back in 2013)

[MHase]

the upgrade of html2canvas was the very first thing that I wanted to implement, but it appeared to be more complex than I imagined I was able to make it work dynamically but there is only one issue with the z-index of the overlay canvas, but it will be much easier to fix :)

yeah, I saw many different glitch effects on the Internet, event the static ones but it was simply boring... much better is yours which appears out of nowhere and mess up with your screen 😄

[commodo]

yeah, I saw many different glitch effects on the Internet, event the static ones but it was simply boring... much better is yours which appears out of nowhere and mess up with your screen :smile:

that was the whole point of it; it was also fun to mess with some people when opening a website that had this enabled; some people thought i broke their computer;

it was done for thttps://ctf365.com/ [seems the project is still alive] ; but this fits somehow in the hacker/infosec culture vibe, with a flavor of cyberpunk

[commodo]

I was able to make it work dynamically but there is only one issue with the z-index of the overlay canvas, but it will be much easier to fix :)

i vaguely remember having z-index issues as well; this can depend on other elements of the website (CSS and other dynamic stuff); i don't remember how i solved them, they just appeared in some websites;

the upgrade of html2canvas was the very first thing that I wanted to implement, but it appeared to be more complex than I imagined

i may try to upgrade it; will see; i am mostly a low-level embedded developer; this was among the few web-programming things that i did in my years;

[MHase]

i vaguely remember having z-index issues as well; this can depend on other elements of the website (CSS and other dynamic stuff); i don't remember how i solved them, they just appeared in some websites;

It's a little bit tricky, because like you said it depends on elements in DOM (their z-index). the easiest way is to set very high z-index for generated canvases, but it would be simply slobbering

i may try to upgrade it; will see; i am mostly a low-level embedded developer; this was among the few web-programming things that i did in my years;

you can try and use npm instead of static files :) it would be easier to maintain and share among the developers 👍🏻 even if it's one of the few projects you did, it's awesome effect