Javascript 对齐拆分底座64个零件

在这里，我已经将Base64图像分为4个不同的部分，效果很好。但我被打动了，我必须将base64与其base64图像对齐。我还附上了实际图像和分割图像的图片

而且我还附上了小提琴

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（“测试”）；
附件子项（切片图像）；
//在CSS
#test{display:flex；flex wrap:wrap；width:260px；}
中，这是答案@Thomas。在答案中发布，我将在CSS
#test{display:flex；flex wrap:wrap；width:260px；}
中投票。在答案中发布，我将投票
    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";