将 base64 图像分成几部分 [英] split base64 image into parts

问题描述

我正在尝试将带有 javascript 或 jquery 的图像文件分成四个相等的部分.是否可以将像 280px x 60px 这样的图像分成四个相等的部分，然后将它们用 base64 编码保存到四个变量中?

解决方案

假设我们有一个 Base64 图像:

我们去拿那 4 张图片吧！

<小时>

1. 创建内存中的画布元素并准备它的上下文:

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

2. 让我们准备一个空数组来存储我们的 base64 字符串:

var 部分 = [];

3. 现在我们需要创建一个new 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,//130h2 = img.height/2;//40canvas.width = w2;canvas.height = h2;

5. 绘制我们的画布4次，每次将我们的图像移动到新的XY位置:

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

并且在每次循环迭代中，我们只需将检索到的 Canvas 数据推送到我们的 parts 数组中:

for(var i=0; i<4; i++){var x = (-w2*i) % (w2*2),//新的 X 位置y = (h2*i)<=h2?0 : -h2 ;//新的 Y 位置ctx.drawImage(this, x, y, w2*2, h2*2);//imgObject, X, Y, 宽度, 高度部分.push(canvas.toDataURL());//("image/jpeg") 为 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'),//在内存画布中ctx = canvas.getContext("2d"),part = [],//推入 oud base64 字符串img = 新图片()；函数 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部分推送(canvas.toDataURL())；//("image/jpeg") 为 jpeg//>>仅用于演示var slicedImage = document.createElement("img")slicedImage.src = 部分 [i];var div = document.getElementById("test");div.appendChild(slicedImage);//<<仅用于演示}控制台日志(部分)；};img.onload = split_4;img.src =数据:图像/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 {边距:10px；}

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

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

解决方案

Let's say we have a Base64 image like:

Let's go get those 4 images!

---

1. Create an in-memory canvas element and prepare it's context:

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

2. Than let's prepare an empty Array to later store our base64 strings:

var parts = [];

3. Now we need to create a new Image, assign an onload function and set it's src:

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

4. The split_4 function:

If the image we need to slice is 260×80 means that we need to set our canvas element to 1/4 that size:

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

canvas.width  = w2;
canvas.height = h2;   

5. Paint 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 on each loop iteration we simply push the retrieved 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 retrieve all your image parts from 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 (i.e.) the first image use: 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>

这篇关于将 base64 图像分成几部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！