将base64图像拆分为多个部分
我试图用javascript或jquery将图像文件分成四个相等的部分。 是否可以将像280px x 60px这样的图像分成四个相等的部分，并将它们用base64编码保存为四个变量？
jsFiddle演示
假设我们有一个像这样的图像：
作为base64字符串，如： data:image/png;base64,iVBORw0KGgoAAAA …….
我们去看看那4张照片吧！
1.创建一个内存中的canvas元素并准备它的上下文 ：
var canvas = document.createElement('canvas'); var ctx = canvas.getContext("2d");
2.让我们准备一个空数组以便以后存储我们的base64字符串：
var parts = [];
3.现在我们需要创建一个新的 Image ，分配一个onload函数并设置它的src ：
var img = new Image(); img.onload = split_4; img.src = "data:image/png;base64,iVBORw0KGgoAAAA.......................etc"
4. split_4 函数 ：
如果我们需要切片的图像是260×80意味着我们需要将canvas元素设置为1/4那个大小：
var w2 = img.width / 2, // 130 h2 = img.height / 2; // 40 canvas.width = w2; canvas.height = h2;
5.每次将canvas绘制 4次 ，每次将图像移动到新的XY位置 ：
// 0 0 1.iteration // -130 0 2.iteration // 0 -40 3.iteration // -130 -40 4.iteration
在每次循环迭代中，我们只需将检索到的Canvas数据推送到我们的parts数组中：
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 }
现在总是在onload函数中，您可以从数组中检索所有图像部分：
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="]
仅获得（即）第一个图像使用： parts[0];
代码：
var canvas = document.createElement('canvas'), // In memory canvas ctx = canvas.getContext("2d"), parts = [], // to store base64 strings img = new Image(); 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"; function split_4(){ var w2 = img.width / 2, // 130 h2 = img.height / 2; // 40 canvas.width = w2; canvas.height = h2; for(var i=0; i<4; i++){ var x = (-w2*i) % (w2*2), y = (h2*i)<=h2? 0 : -h2 ; ctx.drawImage(this, x, y, w2*2, h2*2); // img, x, y, w, h parts.push( canvas.toDataURL() ); // ("image/jpeg") for jpeg // ---------- JUST TO TEST var slicedImage = document.createElement("img"); slicedImage.src = parts[i]; var div = document.getElementById("test"); div.appendChild( slicedImage ); // ---------- } console.log( parts ); };