Как получить несколько выбранных изображений с холста до php?

Question

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 < 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<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 > 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;        
    }
}

У меня есть файл pdf, содержащий несколько изображений, и каждое выбранное изображение отображается на холсте после щелчка по изображению, но проблема в том, что каждое выбранное несколько изображений невозможно попасть в php. В основном я хочу получить все выбранные изображения в php с холста. Для справки делюсь снимком экрана, проверьте.