php - Seding images over json and result in distorted image -

i sending images using php 5.6 encoding them base64 , putting in json encoded object additional data, browser (firefox 47 chrome 52). there create data uri. data receive correctly images distorted having stripes.

[

php:

the database contain raw image binary. querytableobj() method creates array of objects containing database rows.

        $aml = $oml->querytableobj("         select             maengel.idmaengel,             maengel.pos,             .             .             .             maengel.photo1,             maengel.photo2,             maengel.photo3,             maengel.photo4,             maengel.mime1,             maengel.mime2,             maengel.mime3,             maengel.mime4         maengel         left join beteiligte on maengel.idbeteiligte=beteiligte.idbeteiligte         maengel.idprojekt=$idprojekt         order pos     ");     if ($oml->rows > 0) {         ($n=0; $n<count($aml); $n++) {             ($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 reading data:

    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 displaying image:

       var pp = $('<div/>')             .attr('id', 'photopad')             .appendto(iv);     var ix = $(this).parent().parent().attr('ix');     (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);         }      }