multiple JSON object canvas create multiple Image - Javascript Canvas

Javascript examples for Canvas:image

  1. HOME
  2. Javascript
  3. Canvas
  4. image

Description

multiple JSON object canvas create multiple Image

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script> 
      <style id="compiled-css" type="text/css">

canvas{/*from w w w  .  ja  v  a  2s .  c o m*/
   border:1px solid #000;
}


      </style> 
   </head> 
   <body> 
      <canvas id="ImgCanvas" width="800" height="500"></canvas> 
      <button onclick="makeallImage();">makepng</button> 
      <div id="last_Image" style="background:red"></div> 
      <script type="text/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":500,"width":150,"height":150,"fill":"#fbb802","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(){
    console.log('json length'+json.length);
   for (var v = 0; v < json.length; v++){
      convertImgToBase64(v, "jpg");
        console.log("ksana"+v);
   }
}
function convertImgToBase64(number, outputFormat){
    var tmpData = canvas.loadFromJSON(json[number]);
    toImg(tmpData);
}
function toImg(outputFormat){
   var s = document.getElementById("last_Image");
   var url = canvas.toDataURL();
   var newImg = document.createElement("img"); // create img tag
    console.log(newImg);
   newImg.src = url;
   newImg.width = 150;
    newImg.height = 150;
   s.appendChild(newImg);
    console.log('mpike sto dom');
}

      </script>  
   </body>
</html>

Related Tutorials