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 с холста. Для справки делюсь снимком экрана, проверьте.