title: How to get multiple selected images from canvas to php?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showimage(a){  
    
    /*$('#sinistra img').click(function () {
      var c = document.getElementById("screensketchCanvas");
      var ctx = c.getContext("2d");
      var imgid = $(this).attr('id');
      var img = document.getElementById(imgid);
      ctx.drawImage(img, 10, 10);
    });  */
  
   // checks if Html5 canvas is supported by the browser.
      if (!canvasSupported()) {
          alert("Screen sketch is not supported in this browser.");
      }
  
      // Access screen sketch object in and after document ready event
      var screenSketch = $("#screensketchCanvas").data("fp-screensketch");
  
      // local sketch image file.
      //var imageUrl = "assets/images/ScreenSketchImage.JPG";
      if(a==2){
          var imageUrl = $("#hiddenScreenSketchImageUrl").val();
          screenSketch.LoadImage(imageUrl);
         
      }
      else{
           $('#sinistra img').click(function () {
              var imgid = $(this).attr('id').slice(3);
              var imageUrl = $("#hiddenScreenSketchImageUrl"+imgid).val();
              screenSketch.LoadImage(imageUrl);
          });       
      }
         
       //}    
      
      // upload sketch file on screenSketch for amendment.
     
  
      // setup Annotation click event, this will be called when user click on annotation number.
      screenSketch.OnAnnotationClick(AnnotationClickHandler);
  
      // setup Annotation remove event, this will be called when user will erase annotation number.
      screenSketch.OnAnnotationRemove(AnnotationRemoveHandler);
  
      // update drawing position on scroll 
      $(".fp-canvas-wrapper").scroll(function () { screenSketch.SetupCanvasPositioning(); });
  
      // update screen sketch toolbox tooltip with current selection.
      $("[data-fp-tool]").on("change", UpdateSelectedToolCaption);
  }
     
  $(function () {
  
      // checks if Html5 canvas is supported by the browser.
      if (!canvasSupported()) {
          alert("Screen sketch is not supported in this browser.");
      }
  
      // Access screen sketch object in and after document ready event
      var screenSketch = $("#screensketchCanvas").data("fp-screensketch");
  
      // local sketch image file.
      //var imageUrl = "assets/images/ScreenSketchImage.JPG";
      if(a==2){
          var imageUrl = $("#hiddenScreenSketchImageUrl").val();
          screenSketch.LoadImage(imageUrl);
         
      }
      else{
           $('#sinistra img').click(function () {
              var imgid = $(this).attr('id').slice(3);
              var imageUrl = $("#hiddenScreenSketchImageUrl"+imgid).val();
              screenSketch.LoadImage(imageUrl);
          });       
      }
         
       //}    
      
      // upload sketch file on screenSketch for amendment.
     
  
      // setup Annotation click event, this will be called when user click on annotation number.
      screenSketch.OnAnnotationClick(AnnotationClickHandler);
  
      // setup Annotation remove event, this will be called when user will erase annotation number.
      screenSketch.OnAnnotationRemove(AnnotationRemoveHandler);
  
      // update drawing position on scroll 
      $(".fp-canvas-wrapper").scroll(function () { screenSketch.SetupCanvasPositioning(); });
  
      // update screen sketch toolbox tooltip with current selection.
      $("[data-fp-tool]").on("change", UpdateSelectedToolCaption);
  });
  
  // checks if Html5 canvas is supported by the browser.
  function canvasSupported() {
      var canvas = document.createElement('canvas');
      return (canvas.getContext);
  }
  
  
  function onSubmit() { 
      // Access screen sketch object
      var screenSketch = $("#screensketchCanvas").data("fp-screensketch");
      // get screen sketch amended object 
      var amendments = screenSketch.GetAmendments();
  
      //      amendments { 
      //      Annotations:[ { ID, Comment}] , // an array of Annotation object
      //      EncodedImageData : "jped encoded image stream"
      //      }
  
      // convert Annotations comments to your specific format.
      var annotations = amendments.Annotations;
      var comments = "";
  
      comments =  $("#soComments").val();
  
      for (index = 0; index &lt; annotations.length; ++index) {
          comments += " [" + annotations[index].ID + "]: " + annotations[index].Comment + ".\r\n";
      }
  
      // use image steam within the page Or post it Server.
      var dataURL = amendments.EncodedImageData;
  
      // hide screen sketch editor
      $("#bodyContent").hide();
  
      // show output from screen sketch editor
      $("#screenSketchOutput").show();
  
      // setup screen sketch editor output
      $("#ssoComments").val(comments);
      $("#modifiedImage").attr("src", dataURL);
      $("#hiddenImageStream").val(dataURL);
  
  
      inputs = document.getElementsByClassName("hdnimage"),
      arr = [];          
          for(var i=0, len=inputs.length; i&lt;len; i++){
          if(inputs[i].type === "hidden"){alert(JSON.stringify($("#hiddenImageStream"+i).val(dataURL)));
            arr.push($("#hiddenImageStream"+i).val(dataURL));
          }
          }$("#hiddenImageStream").val(arr);
  
          //console.log(arr);return false;
  
      $("#myform").submit();
  
     // window.location = dataURL.replace("image/png", "image/octet-stream");
  }
  
  // setup Annotation comment input controls when Annotation is added.
  function AnnotationClickHandler(event, model) {
  
      var annotationBlock = $(".fp-annotation-input-block[data-annid='" + model.AnnotationId + "']");
  
      if (annotationBlock.length == 0) {
          var annotationTemplate = $(".fp-annotation-template").clone();
          annotationTemplate.removeClass("fp-annotation-template");
          annotationTemplate.attr("data-annid", model.AnnotationId);
          annotationTemplate.find(".fp-annotation-input-id").text(model.AnnotationId);
          annotationTemplate.find(".fp-annotation-input").val(model.AnnotationComments);
          annotationTemplate.find(".fp-annotation-input").attr("data-annid", model.AnnotationId);
  
          $(".fp-annotation-block").append(annotationTemplate);
      }
      else {
          $(".fp-annotation-input[data-annid='" + model.AnnotationId + "']").val(model.AnnotationComments);
      }
  }
  
  // hide Annotation comment input controls when Annotation is removed.
  function AnnotationRemoveHandler(event, model) {
      
      $(".fp-annotation-input-block[data-annid='" + model.AnnotationId + "']").remove();
  }
  
  // update Annotation comment when user select's another control.
  $(document).on("focusout", ".fp-annotation-input", function () {
      var screenSketch = $("#screensketchCanvas").data("fp-screensketch");
      if (screenSketch == undefined)
          return;
  
      var annotationId = $(this).attr("data-annid");
      var annotationContent = $(this).val();
  
      if (annotationId &gt; 0) {
          screenSketch.Annotation.UpdateAnnotation(annotationId, annotationContent);
  
      }
  
      return false;
  });
  
  // update screen sketch toolbox tooltip
  function UpdateSelectedToolCaption() {
      var toolType = $(this).data("fp-tool");
  
      switch (toolType) {
          case "pen":
              $(".fp-caption-selection").text("(Pen)");
              break;
          case "eraser":
              $(".fp-caption-selection").text("(Eraser)");
              break;
          case "annotation":
              $(".fp-caption-selection").text("(Add / edit text annotation)");
              break;
          case "move":
              $(".fp-caption-selection").text("(Move Items)");
              break;        
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{extends "main.tpl"}
  {block "pagetitle"}Request Amendments{/block}
  
  {block "extrajs"}
  &lt;script type="text/javascript" src="/assets/jquery/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/assets/js/fabric.js-1.1.0/all.1.4.4.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/assets/Scripts/ScreenSketch-1.0.0.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/assets/Scripts/ScreenSketchPage.js"&gt;&lt;/script&gt;  
  {/block}
  
  {block "extracss"}
  &lt;link rel="stylesheet" href="/assets/css/floorplans.css"&gt;
  {/block}  
  
  {block "welcome"}{/block}
  {block "maincontent"}  
  &lt;literal&gt;
  &lt;style&gt;
  .navbar {    
      display: none !important;
  }
  #main-container, #main-content {
      margin-top: -33px !important;
  }
  &lt;/style&gt;
  &lt;script&gt;
  function sendfile(e){  //alert($('#img1').attr('src'));
      for (i = 1; i &lt; 10; i++) {
          var imgObject = $('#img'+i).attr('src'); 
         // alert(imgObject);
          //var imgSource1 = imgObject.src;
          $("#hiddenScreenSketchImageUrl"+i).val(imgObject);
         
       } 
  }
  
  &lt;/script&gt;
  &lt;/literal&gt;
      
      &lt;div style="background-color: #2a2b2d; margin: -4px -20px 5px;"&gt;
          {if $listfilename|count}
          {assign var=val value=0}
          {foreach $listfilename as $fnm}
              {assign var=val value=$val+1}
              &lt;span style="width:200px; height:200px;padding-right: 0px;margin-left: 22px;" id="sinistra"&gt;
                  &lt;img src="{$fnm}" id="img{$val}" name="img{$val}" class="mg" style="width:200px; height:200px;" onclick="showimage(this)"&gt;
              &lt;/span&gt;
          {/foreach} 
          {else}      
              &lt;span style="width:200px; height:200px;padding-right: 0px;margin-left: 22px" onclick="sendfile()"&gt;
              &lt;img src="{$imgurl}" id="img1" style="width:200px; height:200px;" onclick="showimage(2)"&gt;
              &lt;/span&gt;
          {/if}
      &lt;/div&gt;
  
      &lt;div id="bodyContent" style="background-color: #6c99dc;margin: 0px -20px 0px;"&gt;    
          &lt;div id="headerContainer" data-role="header" style="display: none;"&gt;
              &lt;h1&gt;
                  Request Amendments&lt;/h1&gt;
          &lt;/div&gt;        
              &lt;div id="floorplansContainer" class="fp-canvas-editor"&gt;
              &lt;div class="fp-canvas-wrapper" style="width: 940px; height: 900px;"&gt;
                  &lt;canvas class="fp-canvas" id="screensketchCanvas" style="width: 1000px; height: 800px;"
                      data-fp-canvas="first"&gt;
                  &lt;/canvas&gt;                
              &lt;/div&gt;
              &lt;form action="/?page=clientorder&amp;amp;action=saveamendment" id="myform" method="post" class="form-horizontal" enctype="multipart/form-data"&gt;
              &lt;div class="settings-wrapper" style="padding-left: 10px !important;"&gt;
                  &lt;div class="fp-canvas-settings"&gt;
                      &lt;div&gt;
                            &lt;!--Screen sketch zoom buttons--&gt;
                          &lt;div class="fp-toolbar fp-toolbar-item fp-zoom-wrapper"&gt;
                              &lt;input type="button" value="Reset zoom" class="fp-zoom-item fp-zoomResetBtn" data-fp-zoom="zoomreset"/&gt;                                                    
                              &lt;input type="button"  value="Zoom +" class="fp-zoom-item fp-zoomInBtn" data-fp-zoom="zoomin" /&gt;
                              &lt;input type="button" value="Zoom -" class="fp-zoom-item fp-zoomOutBtn" data-fp-zoom="zoomout" /&gt;                                                        
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;BR/&gt;
                      &lt;div class="fp-toolbar fp-toolbox"&gt;
                          &lt;div class="fp-toolbar-item fp-tools-caption"&gt;
                               &lt;input type="button" value="Reset Pan" class="fp-zoom-item fp-zoomOutBtn" data-fp-tool="pen" /&gt;&lt;br&gt;&lt;br&gt;
                              &lt;label&gt;
                                  &lt;span class="fp-tools-caption-item fp-caption-Tools"&gt;&lt;b&gt;Tools&lt;/b&gt;&lt;/span&gt; 
                                  &lt;span class="fp-tools-caption-item fp-caption-selection"&gt;(Pen)&lt;/span&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;                      
                            &lt;!--Screen sketch Toolbox --&gt;
                          &lt;fieldset&gt;
                              &lt;input type="radio" id="penTool" name="controls" class="fp-toolbox-item" data-fp-tool="pen"
                                  value="toggleDrawing" checked="checked"&gt;
                              &lt;label for="penTool"&gt;
                                  &lt;span class="fp-label fp-icon pen" title="Pen"&gt;&lt;/span&gt;
                              &lt;/label&gt;
                              &lt;input type="radio" id="eraserTool" name="controls" class="fp-toolbox-item" data-fp-tool="eraser"
                                  value="toggleEraser"&gt;
                              &lt;label for="eraserTool"&gt;
                                  &lt;span class="fp-label fp-icon eraser" title="Eraser"&gt;&lt;/span&gt;
                              &lt;/label&gt;
                              &lt;input type="radio" id="annotationTool" name="controls" class="fp-toolbox-item" data-fp-tool="annotation"
                                  value="toggleAnnotation"&gt;
                              &lt;label for="annotationTool"&gt;
                                  &lt;span class="fp-label fp-icon text" title="Annotation"&gt;&lt;/span&gt;
                              &lt;/label&gt;
                              &lt;input type="radio" id="pickerTool" name="controls" class="fp-toolbox-item" data-fp-tool="move"
                                  value="togglePicker"&gt;
                              &lt;label for="pickerTool"&gt;
                                  &lt;span class="fp-label fp-icon move" title="Move"&gt;&lt;/span&gt;
                              &lt;/label&gt;
                              &lt;input type="radio" name="controls" class="SS-tool active" data-type="pan" id="panTool"&gt;
                              &lt;label for="panTool" style="margin:2px 10px 2px 2px"&gt;                        &lt;span class="fp-label fp-icon pan" title="Pan"&gt;&lt;/span&gt;                    &lt;/label&gt;                           
                          &lt;/fieldset&gt;
                      &lt;/div&gt;
                      &lt;BR/&gt;
                      &lt;!--Screen sketch color selection panel --&gt;
                      &lt;div class="fp-toolbar fp-toolbox-settings"&gt;
                          &lt;div class="fp-toolbar fp-toolbox-settings-caption"&gt;
                              &lt;label for="penColourRed"&gt;
                                  &lt;b&gt;Colour&lt;/b&gt;&lt;/label&gt;
                              &lt;fieldset class="fp-toolbox-settings-item"&gt;
                                  &lt;input type="radio" id="penColourRed" name="colourselector" data-fp-pencolour="red"
                                      class="fp-toolbox-settings-item fp-penColourSelector" value="red" checked="checked" /&gt;
                                  &lt;label for="penColourRed"&gt;
                                      &lt;span class="fp-label fp-icon red" title="red"&gt;&amp;nbsp;&lt;/span&gt;
                                  &lt;/label&gt;
                                  &lt;input type="radio" id="penColourGreen" name="colourselector" data-fp-pencolour="green"
                                      class="fp-toolbox-settings-item fp-penColourSelector" value="green" /&gt;
                                  &lt;label for="penColourGreen"&gt;
                                      &lt;span class="fp-label fp-icon green" title="green"&gt;&amp;nbsp;&lt;/span&gt;&lt;/label&gt;
                                  &lt;input type="radio" id="penColourBlue" name="colourselector" data-fp-pencolour="blue"
                                      class="fp-toolbox-settings-item fp-penColourSelector" value="blue" /&gt;
                                  &lt;label for="penColourBlue"&gt;
                                      &lt;span class="fp-label fp-icon blue" title="blue"&gt;&amp;nbsp;&lt;/span&gt;&lt;/label&gt;
                              &lt;/fieldset&gt;
                          &lt;/div&gt;
                          &lt;BR/&gt;
                          &lt;div class="fp-toolbar fp-toolbox-settings-item"&gt;
                           &lt;!--Screen sketch pen thickness selection panel --&gt;
                              &lt;label for="penThickness"&gt;
                                  &lt;b&gt;Thickness&lt;/b&gt;&lt;/label&gt;
                              &lt;input type="range" name="penThickness" class="fp-penThickness" data-fp-penthickness="2"
                                  value="2" min="1" max="10"&gt;
                          &lt;/div&gt;
                          &lt;div&gt;&lt;b&gt;Your annotation – please use annotation tool above marked with(T)&lt;/b&gt;&lt;/div&gt;
                          &lt;div class="fp-annotation-block" style="height:100px; border: 0px !important;"&gt;
                          &lt;div class="fp-annotation-input-block fp-annotation-template"&gt;
                               &lt;span class="fp-annotation-input-id" style="float: left; width:25px;"&gt;&lt;/span&gt;
                               &lt;input type="text" name="annotation" id="annotation" class="fp-annotation-input" style="width: 80%;"
                                  placeholder="Include annotation for sequence" title="Include annotation for sequence" /&gt;
                          &lt;/div&gt;
                          &lt;/div&gt; 
                      &lt;/div&gt;
                      &lt;BR/&gt;
                        &lt;!--Screen sketch comments --&gt;
                      &lt;div class="fp-toolbar fp-canvas-notes"&gt;
                          &lt;span class="fp-canvas-notes-caption"&gt;&lt;b&gt;Your Comments/notes&lt;/b&gt;&lt;br /&gt;&lt;/span&gt;  
                           &lt;div class="" style="height:220px; "&gt;
                              &lt;textarea id="soComments" name="soComments" cols="27" rows="10"&gt;&lt;/textarea&gt;
                          &lt;div style="text-align: right;"&gt;
                           &lt;input type="button" onclick="onSubmit()" value="Submit" style="text-align: right;" /&gt; 
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br /&gt;
                  &lt;div&gt;         
                      {if $listfilename|count}
                      {assign var=hidval value=0}           
                      {foreach $listfilename as $fn}
                           {assign var=hidval value=$hidval+1}
                           &lt;span id="sinistra1"&gt;
                           &lt;input type="hidden" id="hiddenScreenSketchImageUrl{$hidval}" name="hiddenScreenSketchImageUrl{$hidval}" value="{$fn}" runat="server" class="hdbtn"/&gt;
                           &lt;input type="hidden" id="hiddenScreenSketchImagename" name="hiddenScreenSketchImagename{$hidval}" value="{$filename}" runat="server" /&gt;
                          &lt;input type="hidden" id="hiddenImageStream{$hidval}" name="hiddenImageStream[]" class="hdnimage" runat="server" /&gt;
                      {/foreach}
                      {else}                   
                      &lt;input type="hidden" id="hiddenScreenSketchImageUrl" name="hiddenScreenSketchImageUrl" value="{$imgurl}" runat="server" class="hdbtn" /&gt;
                      &lt;input type="hidden" id="hiddenScreenSketchImagename" name="hiddenScreenSketchImagename" value="{$filename}" runat="server" /&gt; 
                      &lt;input type="hidden" id="hiddenImageStream" name="hiddenImageStream" runat="server" /&gt;
                      {/if}
                      &lt;input type="hidden" id="hiddenoid" name="hiddenoid" value="{$oid}" runat="server" /&gt;
                      &lt;input type="hidden" id="hiddenftamd" name="hiddenftamd" value="{$ftamd}" runat="server" /&gt;
                     
                      &lt;input type="hidden" id="hiddenAnnotations" runat="server" /&gt;                                  
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--settings-wrapper--&gt;                   
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="screenSketchOutput" style="display: none;"&gt;
         &lt;div width="50%" style="width: 67%;margin-top: -58px; background-color: #c9e6c9;"&gt;
              &lt;h5&gt;
                  Thank you for submitting your brochure / window card amendments, these have been received by Floorplanz and your amended brochure / window card will be returned to you shortly.
              &lt;/h5&gt;    
          &lt;/div&gt; 
      &lt;/div&gt;
      &lt;/form&gt;
  {/block}</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have a pdf file having multiple images and each selected image is displaying in a canvas after click on the image but problem is that each selected multiple images is unable to get in php. Basically i want to get all selected images in php from canvas. For your reference i am sharing you screenshoot, please check.<a href="https://i.stack.imgur.com/12Cc5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/12Cc5.png" alt="enter image description here"></a></p>