I was surprised at what could be achieved with when I wrote this answer. IrfanView: Change the canvas size to square (manually). Use the File > Export > Save for the web (Legacy) option to finally export the image’s slices/tiles to separate images. You may well find a approach to be even faster. Use the Slice tool to divide the image into 4 slices (2 rows and 2 columns). With the modified code, execution time on my computer halved from about 1200 - 2000 ms to 600 - 1000 ms. But beware, this is not yet well supported in browsers. using a template literal to build the background-position string.avoiding the need to multiply by -1 (twice) by counting backwards in the for(.) expressions,.avoiding assignments (other than loop counters) in the nested loops,.cloning a basic div created outside the nested loops,.Playing around with the code, I found all of the following to make a difference : $basicDiv.clone().css().appendTo($wrapper) Var $wrapper = $('#wrapper').width(width + length * 2) Also, #wrapper's width can be set here. Do it once and assign the returned jQuery collection. 'background-image': 'url(' + img.src + ')' create a with all basic characteristics, to be cloned over and over in the loops below. I was thinking maybe creating rows or columns in batches somehow since they'll all share the same background position on either the X or Y level, like first row will all have a Y offset of 0, but I'm not sure how or if that will help.īefore you opt for a solution you might try adapting your current code with a few go-faster tricks. "background-image" : 'url(' + img.src + ')' I have created the function successfully but with a high length/height it takes a long time to create that many DOM elements sure to the nester loop, for example 100 x 100 is 10,000 divs being created and having math applied to their backgrounds. Given the number of tiles for height and length I want and the image to Rasterbate I want the function to draw the split up image with a little padding in between. I want to create a function that splits an image into many separate blocks that when put together look like the image as a whole, often called a Rasterbator.
0 Comments
Leave a Reply. |