Split base64 image into parts

Question

I am trying to split an image file with javascript or jquery into four equal parts. Is it possible to divide an image, for example 280px x 60px, into four equal parts and save them in base64 encoding into four variables?

Answer 1

Say we have a Base64 image:

Let these 4 images go!

---

1. Create a canvas element in memory and prepare its context :

var canvas = document.createElement('canvas'); var ctx = canvas.getContext("2d"); 

2. Then let them prepare an empty array for further storage of our base lines:

 var parts = []; 

3. Now we need to create a new image , assign the onload function and set it to src:

 var img = new Image(); img.onload = split_4; img.src = "data:image/png;base64,iVBORw0KGgoAAAA.......................etc" 

4. Split_4 function :

If the image we need to cut is 260 × 80, it means that we need to set our canvas element to 1/4 of this size:

 var w2 = img.width / 2, // 130 h2 = img.height / 2; // 40 canvas.width = w2; canvas.height = h2; 

5. Draw our canvas 4 times , each time moving our image to new XY positions :

 // 0 0 1.iteration // -130 0 2.iteration // 0 -40 3.iteration // -130 -40 4.iteration 

and at each iteration of the loop, we simply push the extracted Canvas data into our parts Array:

 for(var i=0; i<4; i++){ var x = (-w2*i) % (w2*2), // New X position y = (h2*i)<=h2? 0 : -h2 ; // New Y position ctx.drawImage(this, x, y, w2*2, h2*2); // imgObject, X, Y, width, height parts.push( canvas.toDataURL() ); // ("image/jpeg") for jpeg } 

Now always inside the onload function you can get all parts of the image from the array:

 console.log( parts ); // ["data:image/png;base64,iV...z9d/oBHAAAAAElFTkSuQmCC", // "data:image/png;base64,iV...yVhNNW1AAAAAElFTkSuQmCC", // "data:image/png;base64,iV...Q2FoAAAAABJRU5ErkJggg==", // "data:image/png;base64,iV...RQXgXQAAAAASUVORK5CYII="] 

To get only (ie) the first use of the image: parts[0];

---

Example:

 var canvas = document.createElement('canvas'), // In memory canvas ctx = canvas.getContext("2d"), parts = [], // to push into oud base64 strings img = new Image(); function split_4() { var w2 = img.width / 2, h2 = img.height / 2; for (var i = 0; i < 4; i++) { var x = (-w2 * i) % (w2 * 2), y = (h2 * i) <= h2 ? 0 : -h2; canvas.width = w2; canvas.height = h2; ctx.drawImage(this, x, y, w2 * 2, h2 * 2); // img, x, y, w, h parts.push(canvas.toDataURL()); // ("image/jpeg") for jpeg //>> JUST FOR DEMO var slicedImage = document.createElement("img") slicedImage.src = parts[i]; var div = document.getElementById("test"); div.appendChild(slicedImage); //<< JUST FOR DEMO } console.log(parts); }; img.onload = split_4; img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAABQCAYAAAD/YAtfAAAD6klEQVR4nO3c6Y0jIRCGYWdCKIRCKIRCKIRCKLU/dlxdzdDQF7ZHfkt6pB3uktbfzmqPhzxEAEAeIo93PwDA5yAQACgCAYAiEAAoAgGAIhAAKAIBgCIQACgCAYAiEAAoAgGAIhAAKAIBgCIQACgCAYAiEAAoAgGAIhAAKAIBgCIQACgCAYAiEAAoAgGAIhAAKAIBgCIQACgCAYAiEAAoAgGAIhAAKAJhJiciSUSK/K8iIuHA/vRzxrv7OMOLSJal8s/Yu9+FLgJhFidLENSVduxPZn0YrI2yDp345t7DRt+jXj6tjy9EIMxSZKki6w+4yPiDYfe6ztos7Spv6ttX70iN3v0f6ONLEQgzBFkq7xi3vKzLd+5JZl2R9W9PRPZ9J3I3+6ZoxmPnXZ/Yx5ciEGbwsvyEdtWcrdbebOZj5w5XneUG46/y7Lu+276r/IE+vhSBMJOvvnayrnp9MHN5cLZdm6q5ZObCi3vu9dea+9Q+vhSB8EpBliqN+WLm/eCsZNaGzj1px7tsZTOeq7k9Pdo9tge/ccedfeAyAuFVnKw/8LGaj2Yuyf8PkO+cZ89yjbueVXa8rS63Mb6nz2DW55+znKyDIkzqA5cRCK+SZV2umi9mzv44N9bW6+t5V501eluU3x/YUL0hHug1ynbV59zZBy4jEF4hyrpiNe+lX7lxpq3WnaP5mqvuS+Zrd7BfJ+0/RsyNs+7uA5cQCLN5WVdurInVmiTjv7dgq3XvaL6lvvP5lqM9l6rfbL4uL+gDpxEIsxVZl2usyWY+mfFkxnO1x1br3tF8i5Pf1XpvT9jRS5zcB04jEGaKsq6wsa6YNd6MezNeOntcNec6+0ay2ZtP9Gz3b/Viz53VB04hEGZxsq7UWWtr71wx465zd7nw5tbZI0d7mdEHTiMQZkmyVBmstbV3zp4fqrlg5tKBN0f5XfFg30d7mdEHTiMQZrHlB2vLxlpvxku1J5q5VM0lMxd3vteZPVnW3/q7A30f7eXuPnAJgTBDkKXyjvXJrE87xh9y/78BiGZPqHqIB3q352z1Ys+7uw9cQiDMkGWpLMsfI1rRrHeyrizjv8j0kPv+lWCs7nqO26rfvOVML3f1gcsIhBn2lt0TOuti566ysafI/l9VbSUzngZv3tLrJUzsA5cRCDMU2Vf1Pi/n/tuxaO4scvy/XrNl7/M73rzlTC9X+8BlBAIARSAAUAQCAEUgAFAEAgBFIABQBAIARSAAUAQCAEUgAFAEAgBFIABQBAIARSAAUAQCAEUgAFAEAgBFIABQBAIARSAAUAQCAEUgAFAEAgBFIABQBAIARSAAUAQCAEUgAFAEAgD1DxOuXDVQeFT8AAAAAElFTkSuQmCC"; 

 img { margin: 10px; } 

 <div id="test"></div>