The algorithm for this would be something like this: Once we have defined the image, we have to wait for it to load, place it into the canvas, and we can proceed to read all the pixels. The base_image.crossOrigin = "Anonymous" part was required because the image was not in the same origin as the web page, and it blocked me from reading the canvas content due to security restrictions. Let's see how this is done step-by-step:įirst, set up the canvas with a particular width and height (I found that using 1216x519 crashed my browser, then opted for a slightly smaller size of 912x389):Įnter fullscreen mode Exit fullscreen mode This is possible by using a canvas and some JavaScript. Now that the image is picked, we have to extract the colors. Still, and as a friendly reminder, this post is about something that probably should never be done. Taking into account an average of 20 characters per shadow ( ABCpx DEFpx #RRGGBB,), just the box-shadow size would be 12.6MB! I never said this was going to be efficient or performant.īut reducing that number is easy though as we'll see later. which is nuts and most browsers won't support, also it would require a HUGE *SS file –the * stands for Cascading 😉–. That would require a maximum of 631,104 individual shadows. The size of that image is 1216x519 pixels. The Wikipedia page for the US one-dollar bill has a nice image of one of it, and I used it as a base. Automatizing the process was a must, and that's where an initial use of JavaScript was needed.īut first, we have to find an image of a dollar bill.
Drawing the dollar bill manually was out of the question since the beginning, it would take too much time and look awful. so, just for fun, I decided to give it a try. Then someone joked about drawing a one-dollar bill with a single HTML element and some CSS.
0 kommentar(er)
