将base64图像拆分为多个部分 [英] split base64 image into parts
问题描述
我正在尝试将带有javascript或jquery的图像文件分成四个相等的部分。
是否可以将像280px x 60px这样的图像分成四个相等的部分,并将它们用base64编码保存为四个变量?
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 an image like:
作为base64字符串,如: data:image / png; base64,iVBORw0KGgoAAAA
.......
as a base64 string like: data:image/png;base64,iVBORw0KGgoAAAA
.......
让我们去看看这4张图片!
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
2。比让我们准备一个空数组以便以后存储我们的base64字符串:
2. Than let's prepare an empty Array to later store our base64 strings:
var parts = [];
3。现在我们需要创建一个 new Image ,分配一个 onload 函数并设置它的 src :
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。 split_4 功能:
如果 slice 所需的图片 260× 80 意味着我们需要将 canvas 元素设置为1/4大小:
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。 绘制我们的画布 4次,每次将图像移动到新的XY位置:
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
和每次循环迭代我们只需将检索到的Canvas数据推送到我们的部分
数组:
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
}
现在总是在 onload
函数内,您可以从数组中检索所有图像部分:
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="]
仅获得(即)使用第一张图片: parts [0];
To get only (i.e.) the first image use: parts[0];
<div id="test"></div>
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 );
};
这篇关于将base64图像拆分为多个部分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!