Can we convert json string into image in php

Question

I have a json string like

$json = '{"objects":[{"type":"i-text","originX":"left","originY":"top","left":67.1,"top":279.68,"width":99.85,"height":32.77,"fill":"#f1e3e5","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"text":"My Text","fontSize":25,"fontWeight":"normal","fontFamily":"otf","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":"","styles":{}}],"background":"#FFF","backgroundImage":{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":230,"height":473.17,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"src":"http://localhost/ohmyfabriq/resources/templates/bg/20160216082540-bg.png","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}}';

This is canvas data and I want to save it as image in php. Is this possible? Can any one help me?

Answer 1

yes! you can convert json to jpeg/png using Imagick Driver (server side i.e using PHP).

create a file naming test.html
{ "width": "2790", "height": "4560", "json_data": { "objects": [{ "type": "image", "originX": "left", "originY": "top", "left": "5", "top": "105", "width": "260", "height": "260", "scaleX": "1", "scaleY": "1", "angle": "0", "opacity": "1", "src": "http://example/fab/map.png" }, { "type": "image", "originX": "left", "originY": "top", "left": "5", "top": "229.5", "width": "260", "height": "11", "scaleX": "1", "scaleY": "1", "angle": "0", "opacity": "1", "src": "http://example/fab/outlined.co_logo.png" }, { "type": "image", "originX": "left", "originY": "top", "left": "51.07", "top": "135.58", "width": "260", "height": "11", "scaleX": "1", "scaleY": "1", "angle": "47.41", "opacity": "1", "src": "http://example/fab/outlined.png" }, { "type": "image", "originX": "left", "originY": "top", "left": "139.71", "top": "104.97", "width": "260", "height": "11", "scaleX": "1", "scaleY": "1", "angle": "89.65", "opacity": "1", "src": "http://example/fab/permission.png" }, { "type": "image", "originX": "left", "originY": "top", "left": "230.78", "top": "146.93", "width": "260", "height": "11", "scaleX": "1", "scaleY": "1", "angle": "134.98", "src": "http://example/fab/rocket.png" }, { "type": "image", "originX": "left", "originY": "top", "left": "265.01", "top": "240.19", "width": "260", "height": "11", "scaleX": "1", "scaleY": "1", "angle": "179.86", "opacity": "1", "src": "http://example/fab/speed.png" }], "background": "#FF00FF" }}

//server side code

     <?php

    error_reporting(E_ALL | E_STRICT);

    try {
        $id = $_GET['id']; // Design ID

        define('DS', DIRECTORY_SEPARATOR);

        $jsonDir   = dirname(__FILE__) . DS . 'media' . DS . 'designs';
        $printData = json_decode(file_get_contents('test.html'));
    }
    catch (Exception $e) {
        echo $e->getMessage();
    }
try {
    $print      = new Imagick();
    // $print->setResolution(200, 200);
    $background = (empty($printData->json_data->background)) ? 'transparent' : $printData->json_data->background;

    $print->newImage($printData->width, $printData->height, new ImagickPixel($background));

    $print->setImageFormat('png32');
    $print->setImageUnits(imagick::RESOLUTION_PIXELSPERCENTIMETER);
}
catch (Exception $e) {
    echo $e->getMessage();
}

// Re-Scaling each Image/Text for Larger Canvas/Image 
foreach ($printData->json_data->objects as $i => $object) {

    if ($object->type == 'image') {
        addImage($object, $print, $printData);
    } else {
        addText($object, $print, $printData);
    }
}

try {
    // Saving High Quality Image in (300 dpi)
    $fileDir = 'canvadata';
    $saved   = $print->writeimage($fileDir . '/test.png');
    header('Content-type: image/png');
    echo $print;
}
catch (Exception $e) {
    echo $e->getMessage();
}

function addImage($object, $print, $printData)
{

    try {
        $widthScale  = ($printData->width / 270);
        $heightScale = ($printData->height / 470);
        $fileDir     = 'canvadata/';
        $src         = new Imagick($fileDir . basename($object->src));

        $size = $src->getImageGeometry();

        $resizeWidth  = ($object->width * $object->scaleX) * $widthScale;
        $resizeHeight = ($object->height * $object->scaleY) * $heightScale;
        $src->resizeImage($resizeWidth, $resizeHeight, Imagick::FILTER_LANCZOS, 1);
        $sizeAfterResize = $src->getImageGeometry();

        $src->rotateImage(new ImagickPixel('none'), $object->angle);
        $sizeAfterRotate = $src->getImageGeometry();


        if (!$object->angle) {
            $left = $object->left * $widthScale;
            $top  = $object->top * $heightScale;
        } else {

            switch ($object->angle) {
                case $object->angle > 315:
                    $left = ($object->left * $widthScale);
                    $top  = ($object->top * $heightScale);
                    break;
                case $object->angle > 270:
                    $left = ($object->left * $widthScale);
                    $top  = ($object->top * $heightScale);

                    break;
                case $object->angle > 225:
                    $left = ($object->left * $widthScale);
                    $top  = ($object->top * $heightScale);
                    break;
                case $object->angle > 180:
                    $left = ($object->left * $widthScale);
                    $top  = ($object->top * $heightScale);
                    break;
                case $object->angle > 135:
                    $left = ($object->left * $widthScale);
                    $top  = ($object->top * $heightScale);
                    break;
                case $object->angle > 90:
                    $left = ($object->left * $heightScale) - ($sizeAfterRotate['width'] / 2);
                    $top  = ($object->top * $heightScale) - ($sizeAfterRotate['width'] / 2);
                    break;
                case $object->angle > 45:
                    $left = ($object->left * $widthScale) - $size['height'] * $widthScale;
                    $top  = ($object->top * $heightScale) - $size['height'] * $heightScale;
                    break;

                default:
                    $left = $object->left * $widthScale;
                    $top  = $object->top * $heightScale;

                    break;
            }
        }

        $print->compositeImage($src, Imagick::COMPOSITE_DEFAULT, $left, $top);
    }
    catch (Exception $e) {
        echo $e->getMessage();
    }
}

Answer 2

yes. we can

You can use json-decode http://php.net/manual/en/function.json-decode.php

$image = json_decode($json)

Then you analyze that array object to get the image link and attribute