Saving images with bubbles (autosave example)

Image with ComicBubbles object (SHOW)

Image with hardcoded speech balloons

function {

bedouin_cb = new ComicBubbles("pict6", {canvas: {width: 'auto', height: 'auto', fontSize: '17px', textAlign: 'center', lineHeight: 1.5, readonly: false}});

bedouin_cb.addBubble({id: 'bedouin1', text: "I wish you\ncould speak", x: 127, y: 210, background: '#b22222', color: '#ffffff', opacity: 0.9, bubbleStyle: 'speak', tailLocation: 'nw', tailX: 105, tailY: 145, visible: false});
bedouin_cb.addBubble({id: 'camel1', text: "I wish you\nhad humps\non your back", x: 221, y: 25, background: '#ffa500', color: '#ffffff', opacity: 0.7, bubbleStyle: 'think', tailLocation: 's', tailX: 295, tailY: 176, visible: false});

var b = bedouin_cb.getBubbleById('bedouin1'), c = bedouin_cb.getBubbleById('camel1'),
    im = document.getElementById("pict8"), im_loader = document.getElementById("img-loader"),
    saving;

b.delay(2000).show(function(){
  c.delay(2000).show();
  bedouin_cb.onBubbleStateChange(function(data){
    clearTimeout(saving);
    saving = setTimeout(function(){
      im_loader.style.display = "block";
      save(bedouin_cb, function(){
        im.onload = function(){
          im_loader.style.display = "none";
        }
        im.src = "cb_images/bedouin.jpg?t=" + new Date().getTime();
      });
    },500);
  });
});

}

function save(comicbubbles_object, updateImage){
  var b_data = comicbubbles_object.getBubblesData();
  b_data['jpg_quality'] = 95;
  var json = JSON.stringify(b_data)
  request = new XMLHttpRequest();
  request.onreadystatechange = function(){
    if (request.readyState == 4 && request.status == 200) {
      if (typeof updateImage === "function") {
        setTimeout(function(){ updateImage(); },500);
      }
    }
  };
  request.open("POST", "comicbubbles_save.php", true);
  request.setRequestHeader("Content-type", "application/json; charset=UTF-8");
  request.send(json);
}

//comicbubbles_save.php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $json = file_get_contents("php://input");
  $bubbles = json_decode($json, true);
  $png_img = $bubbles['png'];
  $jpg_quality = $bubbles['jpg_quality'];
  $image_name = $bubbles['img_src'];
  $new_image = "cb_images/".basename($image_name);
  if (copy($image_name, $new_image)) {
    $new_png_image = $new_image.".png";
    $png = str_replace("data:image/png;base64,", "", $png_img);
    $png = str_replace(" ","+",$png);
    $png_data = base64_decode($png);
    $writing = file_put_contents($new_png_image, $png_data);
    if ($writing) {
      $size = getimagesize($new_image);
      $width = $size[0];
      $height = $size[1];
      $png_bubbles = imagecreatefrompng($new_png_image);
      $jpeg_image = imagecreatefromjpeg($new_image);
      imagecopy($jpeg_image, $png_bubbles, 0, 0, 0, 0, $width, $height);
      imagejpeg($jpeg_image, $new_image, $jpg_quality);
      imagedestroy($jpeg_image);
      imagedestroy($png_bubbles);
      @unlink($new_png_image);
    }
  }
}
?>