在json上分割图像并导致图像失真

Question

我使用php 5.6发送图像，将它们编码为base64，然后将其与其他数据一起放入json编码对象中，添加到浏览器（Firefox 47以及chrome 52）。在那里我创建了一个数据URI。我正确收到所有数据，但图像有条纹扭曲。

[

PHP：

数据库包含原始图像二进制文件。 queryTableObj（）方法创建一个包含数据库行的对象数组。

        $aMl = $oMl->queryTableObj("
        select
            maengel.idMaengel,
            maengel.Pos,
            .
            .
            .
            maengel.Photo1,
            maengel.Photo2,
            maengel.Photo3,
            maengel.Photo4,
            maengel.mime1,
            maengel.mime2,
            maengel.mime3,
            maengel.mime4
        from maengel
        left join beteiligte on maengel.idBeteiligte=beteiligte.idBeteiligte
        where maengel.idProjekt=$idProjekt
        order by Pos
    ");
    if ($oMl->rows > 0) {
        for ($n=0; $n<count($aMl); $n++) {
            for ($i=1; $i<5; $i++) {
                $ph = "Photo$i";
                $aMl[$n]->$ph = base64_encode($aMl[$n]->$ph);
            }
        }
        $s = json_encode($aMl);
        echo ($s);
    } else {
        echo "NONE";
    }

javascript阅读数据：

    readMaengel: function(func) {
    $.post(location.href, {
        cmd: 'MLreadMaengel'
    }, function(cData) {
        if (cData === 'NONE') {
            ml.aMaengel = [];
        } else {
            ml.aMaengel = JSON.parse(cData);
        }
        if (func) {
            func();
        }
    });
},

javascript显示图片：

       var pp = $('<div/>')
            .attr('id', 'photoPad')
            .appendTo(iv);
    var ix = $(this).parent().parent().attr('ix');
    for (var tn, img, src, ph, mm, i=0; i<4; i++) {
        tn = $('<div/>')
                .attr('imageno', i)
                .addClass('thumbnail')
                .click(function() {
                    ml.selectPhoto($(this).attr('imageno'), ix);
                })
                .appendTo(pp);
        img = $('<img>').appendTo(tn);
        ph = 'Photo'+(i+1);
        mm = 'mime'+(i+1);
        if (ml.aMaengel[ix][ph] !== null) {
            src = ml.aMaengel[ix][mm]+','+ml.aMaengel[ix][ph];
            img.attr('src', src);
        }

    }