search

codepo8 / canvas-masking

Masking images with canvas - Demo http://codepo8.github.io/canvas-masking/
207 stars 34 forks source link

Problem with image #5

Closed danielkoleski closed 6 years ago

danielkoleski commented 11 years ago

Hello I have a problem with the loading of images with masks, when the screen loads the image flickers but does not show the picture, I saw the html and it generates the image and canvas, at first everything is ok, but does not work. I await your help. Link to visualize what happens is: http://labisdesign.com/roma_hostel/?page_id=4

The times in the first loading it works, but sometimes after updating the page or even go to another page that has the problem of masking it.

tomByrer commented 11 years ago

I tested your link @danielkoleski In FF20, the bell-image did load but fully disappeared. Opened in FireBug, finding this:

<img data-mask="http://labisdesign.com/roma_hostel/wp-content/themes/roma_hostel/img/mask.png" class="mask" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABJQAAAI1CAYAAACAOqA0AAAKHklEQVR4nO3BMQEAAADCoPVPbQ0PoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAjgxvHQABGygMJQAAAABJRU5ErkJggg==">

src="...AAAAAA..." looked strange. Reloaded the webpage, & this is what re-loaded:

<img class="mask" data-mask="http://labisdesign.com/roma_hostel/wp-content/themes/roma_hostel/img/mask.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABJQAAAI1CAYAAACAOqA0AAAgAElEQVR4nOy9d3Rc9b2uz133nhtbbTQq1nQVa3ofaTSaot57d++49y5Lso3BGGM67r3Ikg3GNuAq2dQAoSUhJwVIhUDAEEgoNiTY2M/vj++ekZzDOb9z1z33su45+q71rtHs2XvPlsPaWfvR+76fW24ZWkPr/8EF/DdJw4A0oApov379+tEbN278/MaNG5/fEIsh/e/r+vXrfPvtt1y/fp3B6z/q/P+ec16/fp3r169H9v//u87wvoOP/fbbbyO6du1brl67xt+uXuWrb77hq6vXuPL3q1z5+zcRffn13/jiq6/5/MpXfHb5Cp9f+Ur8fOUr/vrlZf7y+Zd88tnn/Pnzz/n4s8+49Je/cOmTT/nwk0/506ef8qc//5n3L33Ee5c+4t2PLvHOpUv8/sMP+O0Hf+K377/Pb957j1//8Y/8+t13efOdd/jl...uuJkd2L2XJAu50h5pMm45Mu064loLASQKlHKdawh3RmySglVx5s4nOpDSbijS7SjijbBoy7VqxFueIIcehk31MylCcLtepJtelEe/tUokeqXGxtsnOaAGcXEI5DiW59mhy7RKI2dTvKNOqIj1xbN1tUqKSNIuSSYnRTEyIIiUhiomJUgmRJI2LpCUlREsnUhRJEiIF3TU+c9QYUIqPwhtaOYt857pk03gJmJRsiiJZFnqnJESSbBZuJ+F4EstwQaDkiQ/DY5qAK/4D3KYxEBN09Dhjw7EbhMMoKFtsBNbYCGyGMOzGMOyxkThlL5FDXm8zhmGNjcJqjMBm+GcRhZOvsxrCsOknYDdMCDmGLMYJWA0RWA3yNXFhOOLC3vkcztgwXHGReE3ReE3RuOMiQ0DJI3uWXHFRuIyROOVanFO4rP7uMIT/u90Q/sZmiDhlNYStsBk+qEo0TEiUAOnPf3oPkN6f/6LnfwOm/ggBE1wfxQAAAABJRU5ErkJggg==">

& got the <__> mask I think you want! Repeatable. Chrome Canary does not load any src, & will not display the mask or image. Hope this helps!

danielkoleski commented 11 years ago

then this error I had noticed, I do not know what is happening to the error, my images are exactly equal to the demo, and the code also do not understand the problem with the canvas ... I need it urgently

tomByrer commented 11 years ago

Screen shots of what you expect & what is actually happening inside your browsers would be helpful.

codepo8 commented 11 years ago

I think the issue is that you are waiting for the window load event, which only fires when all resources have been loaded. You could call imagemask when the load event on the main image fires, hide it beforehand and only load it once it has been loaded.