Javascript 将base64映像拆分为多个部分

我试图用javascript或jquery将一个图像文件分成四个相等的部分。

---

是否可以将图像（如280px x 60px）拆分为四个相等的部分，并将它们用base64编码保存为四个变量？

假设我们有一个base64图像，如：

我们去拿那4张照片吧

---

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

然后准备一个空数组，以便以后存储base64字符串：

现在我们需要创建一个新的图像，分配一个onload函数并设置它的src:

拆分_4功能：

如果我们需要切片的图像是260×80意味着我们需要将画布元素设置为该大小的1/4：

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

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

绘制画布4次，每次将图像移动到新的XY位置：

在每次循环迭代中，我们只需将检索到的画布数据推送到我们的

部分
数组中：


要仅获取（即）第一个图像，请使用：
parts[0]


例子：

var canvas=document.createElement（'canvas'），//内存画布中
ctx=canvas.getContext（“2d”），
parts=[]，//推入oud base64字符串
img=新图像（）；
函数拆分_4（）{
var w2=最小宽度/2，
h2=img.高度/2；
对于（变量i=0；i<4；i++）{
var x=（-w2*i）%（w2*2），
y=（h2*i）>仅用于演示
var slicedImage=document.createElement（“img”）
slicedImage.src=零件[i]；
var div=document.getElementById（“测试”）；
附件子项（切片图像）；
//您可以计算4个
canvas
元素所需的图像区域。在内存中创建4个canvas，放置并重新定位图像，只需获得结果的base64编码字符串。
var parts = [];

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

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

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

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

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

}

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="]