Multiple JSON to Image

by MULLAINATHAN MANICKAM

HTML

<canvas id="ImgCanvas" width="400" height="400"></canvas>
<button onclick="makeallImage();">makepng</button>
<div id="last_Image"></div>

CSS

canvas{
    border:1px solid #000;
}

JavaScript

var canvas = window._canvas = new fabric.Canvas('ImgCanvas');

var json1 = '{"objects":[{"type":"rect","originX":"center","originY":"center","left":300,"top":150,"width":150,"height":150,"fill":"#29477F","overlayFill":null,"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":{"color":"rgba(94, 128, 191, 0.5)","blur":5,"offsetX":10,"offsetY":10},"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0}],"background":""}'

var json2 = '{"objects":[{"type":"circle","originX":"center","originY":"center","left":300,"top":400,"width":200,"height":200,"fill":"rgb(166,111,213)","overlayFill":null,"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":{"color":"#5b238A","blur":20,"offsetX":-20,"offsetY":-10},"visible":true,"clipTo":null,"radius":100}],"background":""}'

var json3 = '{"objects":[{"type":"rect","originX":"center","originY":"center","left":300,"top":150,"width":150,"height":150,"fill":"#151515","overlayFill":null,"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":{"color":"rgba(94, 128, 191, 0.5)","blur":5,"offsetX":10,"offsetY":10},"visible":true,"clipTo":null,"rx":0,"ry":0,"x":0,"y":0}],"background":""}'

var json = [];

json.push(json1);
json.push(json2);
json.push(json3);

function makeallImage(){
	for (var v = 0; v < json.length; v++){
		convertImgToBase64(v, "png");
        console.log(v);
	}
}

function convertImgToBase64(number, outputFormat){  
    var tmpData = canvas.loadFromJSON(json[number]);
    toImg(tmpData);
}

function toImg(outputFormat){
    var s = document.getElementById("last_Image");
    var...