Hi all,
Is it possible to add an image in my form to draw on it? If yes, how can I do?
Hi, did you get this working ? I updated my post on this thread https://answers.laserfiche.com/questions/121864/Custom-HTML-Drawing-Canvas--How-do-I-convert-to-an-image-so-Forms-retains-drawing-on-Submit#127040
to show how it's possible.
The code is and you'll need a download of sketch.js
//submitted form
//set checkbox value isLocked
if ($('[name=IsLocked]').val() == 'True') {
var myCanvas = document.getElementById('colors_sketch');
var ctx = myCanvas.getContext('2d');
var img = new Image;
//your backgrund image
var image = 'http://localhost/forms/img/vanImage.jpg'
img.onload = function() {
ctx.drawImage(this, 0, 0, myCanvas.width, myCanvas.height);
myCanvas.style.backgroundRepeat = "no-repeat";
myCanvas.style.backgroundImage = 'url('+image+')'
}
//textarea (multi line field) will store your image data
img.src = $('.saveimage .cf-field').text();
}
else {
//fill form
//$.getScript('http://localhost/Forms/js/sketch.js', function() {
$.getScript('http://localhost/forms/js/sketch.js/sketch.js', function() {
//script is loaded and executed put your dependent JS here
$.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
$('#colors_demo .tools').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 10px; background: " + this + ";'></a> ");
});
$.each([3, 5, 10, 15], function() {
$('#colors_demo .tools').append("<a href='#colors_sketch' data-size='" + this + "' style='background: #ccc'>" + this + "</a> ");
});
//$('#colors_sketch').sketch();
$('#colors_sketch').sketch({defaultColor: "#000"});
});
//look for your checkbox DOM to change and save if it is checked and finished
$('.imagefinish input').change(function(){
if(this.checked) {
var myCanvas = document.getElementById('colors_sketch');
$('.saveimage textarea').val(myCanvas.toDataURL());
}
});
}
Hi Alex.
Thank you for your help. Where can I download the sketch.js?
I used the code here https://rawgit.com/intridea/sketch.js/gh-pages/lib/sketch.js and just added it to a JS file in my localhost.
Thank you very much.
Going to try.
Regards
Are there any instructions on how to get this code working?
Hi Olivier
For saving the data and show it on submitted form, there was a similar case in https://answers.laserfiche.com/questions/121864/Custom-HTML-Drawing-Canvas--How-do-I-convert-to-an-image-so-Forms-retains-drawing-on-Submit
It is possible, but it will not be especially easy. I did something similar by adding a custom HTML element to the form, creating a Canvas within that element, and using javascript/jquery to create controls.
Once they draw on the canvas you can have the form capture the canvas' image data and use that to create an actual image file in Workflow or some other method.
This page has a working example of the canvas drawing portion.
And to capture the raw image data, you just do something like this:
//get image data
var image = canvas.toDataURL();
$('#q13 textarea').val(image).change();
Hi Jason,
Thank you for your help.
Actually I'm trying to use canvas and Javascript/Jquery as you said.
It's working outside Laserfiche Form.
Now how can I add the html's page (named "SimpleDrawApp.html") to my form?
The SimpleDrawApp.html is saved on "C:\Program Files\Laserfiche\Laserfiche Forms\Forms\SimpleDrawApp\"
You can't add the HTML page to the form directly. You'll need to add a custom HTML element to the form, drop the HTML code for the canvas/elements in there, then put the CSS and JavaScript code in on the CSS/JavaScript tab for the Form.
Jason,
Of course we can. I did it.
I'll explain how I did.
For now, I have another problem. My form is saved on the laserfiche deposit in PDF format, but I do not see my drawing (just my photo).
I think the problem/confusion is over the terminology you're using. You are adding HTML code/elements, not an HTML page/file.
The drawing is not going to save to the form because there is no Forms variable capturing that data.
Like I was saying earlier. You'll need to use JavaScript to capture the image data and add it on the back end.
Jason,
I used HTML code to add HTML file
Actually I'm trying to "capture/save" my canvas as you said. But I don't know how to do.
Okay, so that is going to pose a challenge since it is technically an external page embedded in the form. You'll need to use javascrpt to access the Canvas object, then use the canvas.toDataURL() function to convert the image data to a string value.
Next, you will need to use that data to update your image. I'm not sure if you can just update that within the form, or if you'll need to do it within workflow.