Question

Custom HTML Drawing Canvas - How do I convert to an image so Forms retains drawing on "Submit"

Forms

Updated November 5, 2020

asked on May 30, 2017 • Show version history

I have a client that would like to be able to draw on a form and have the drawing save automatically when submitting. Currently, when the user submits, the custom HTML is empty.

I am hoping that a checkbox can act as a trigger for JavaScript to convert the canvas to an image in another hidden field perhaps.

Anyone have any ideas?

Here is my JavaScript:

$(document).ready(function () {
$.getScript('https://intridea.github.io/sketch.js/lib/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"});
  });
});

Here is my CSS:

.tools { margin-bottom: 10px; }
.tools a {
  border: 1px solid black; 
  height: 30px; 
  line-height: 30px; 
  padding: 0 10px; 
  vertical-align: middle; 
  text-align: center; 
  text-decoration: none; 
  display: inline-block; 
  color: black; 
  font-weight: bold;
}

And here is my Custom HTML Box:

<div class="demo" id="colors_demo">
  <div class="tools">
      <a href="#colors_sketch" data-tool="marker">Marker</a>         
      <a href="#colors_sketch" data-tool="eraser">Eraser</a>
      <a href="#colors_sketch" data-download="png" style="float: right; width: 100px;">Download</a>
  </div>
  <canvas id="colors_sketch" width="750" height="500" style="border:2px solid #000000;"></canvas>
</div>

drawing in forms.JPG (46.09 KB)

| Download

0 0

Replies

replied on June 4, 2017

The custom HTML field does not store field value, so you have to store the drawn picture in another field (use multi-line field as it has the largest character limit).

When check the checkbox, get canvas base64 data and put it to the field.

Then to show it on submitted form, get value from that field and draw it on the custom HTML field on form load.

The script could be like this (the checkbox field has CSS class "imagefinish" while the multi-line field has class "saveimage"):

$(document).ready(function () {
  //submitted form
  if ($('[name=IsLocked]').val() == 'True') {
    var myCanvas = document.getElementById('colors_sketch');
	var ctx = myCanvas.getContext('2d');
    var img = new Image;
    img.onload = function() {
      ctx.drawImage(this, 0, 0, myCanvas.width, myCanvas.height);
    }
    img.src = $('.saveimage .cf-field').text();
  }
  else {
  //fill form
  $.getScript('https://intridea.github.io/sketch.js/lib/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"});
    });
    $('.imagefinish input').change(function(){
      if(this.checked) {
        var myCanvas = document.getElementById('colors_sketch');
        $('.saveimage textarea').val(myCanvas.toDataURL());
      }
    });
  }
});

0 0

View 3 previous replies

replied on November 6, 2018 • Show version history

Hello,

I am trying to implement something similar to what Alex did below but build on the image loaded to canvas to be a google map I can edit.

I was just wanting to test getting your version setup first to verify how it will work before I try an load a dynamic image to the script but it is not working as you have here.

The window is being created, but no color tools or the ability to draw within the frame.

All of the CSS and HTML within the custom box is the same as the example above. Using your javascript code given here.

As you can see I've also set the classes on the check box and saveimage multivalue field.

Is the fault at '[name=IsLocked]'? or is that a read-only check?

0 0

replied on November 6, 2018

One thing I did find was the github library was not there so I found another sketch.js library:

https://github.com/soulwire/sketch.js/tree/master/js/sketch.js

It can build the color options but still no ability to draw within the canvas.

0 0

replied on December 31, 2018

I too am running into the issue of not being able to draw on the canvas. I did find that the https://intridea.github.io/sketch.js/lib/sketch.js seems to have been moved to https://github.com/mobomo/sketch.js/tree/master/lib/sketch.js but when I view the page, like Chase, I cannot draw/sketch on the canvas.

0 0

replied on May 26, 2020

Were you able to figure out how to actually draw?

0 0

replied on May 26, 2020

I ended up not using the external sketch.js library and just building it in JavaScript in the form.

0 0

replied on June 1, 2020

I don't know how to do that. I am not an experienced coder. That would be ideal though, especially when working remotely.

Thanks for the advice.

0 0

replied on June 6, 2017 • Show version history

Rui, you are a genius! Thank you, that works! Very much appreciated!!

I did some testing and it seems to be hit and miss; is this due to a character limit on the multi value field?

In that event, it doesn't save the image pages or sometimes does but the drawing is blank.

0 0

View 4 previous replies

replied on June 6, 2017

However, after I just sent the above, I've hid the multi-line field (again) and now the image is displaying every time and in the repository as well. Maybe we just had a glitch going on here with Forms.

0 0

replied on February 22, 2019

Good Morning Shaun, I have this working 90% of the way, and wondered if you could help with that last 10%.

I have the canvas working, it loads up and I can draw, I have a checkbox setup and when I check it, it looks like it dumps the base64 data in a hidden multiline field, but it does not load back up when i bring the form up, or when it is saved to the repository. Is there something I can look at? I have pretty much just copied all of the above javascript (modifying for the new location of sketch.js)

I feel I am almost there in getting this to work.

Regards,

Travis

0 0

replied on February 22, 2019

Travis

How are you hiding the Base64 Data field?

If you use a field rule, make sure to select to save the data when field is hidden.

1 0

replied on February 22, 2019

Hello Bert,

Good catch, I did not have it set like that, but it still is not working.

When I leave the field un-hidden, I can see that information is dumped into it, and when I pull the form back up as a user task, that information is still there, but its not re-generating the sketch.

Regards,
Travis

0 0

replied on February 22, 2019

Here is the output that gets put into my hidden field. I am not super familiar with using base64 data like this, does it look like it should?

Its pretty long so I put it on pastebin.

Regards,

Travis

0 0

replied on February 22, 2019

Ah ha! I wonder if this is a browser display issue. I am using Chrome.

I started a form, made the drawing, saved the data to the hidden field.

When I bring the form up as a user task, the drawing does not appear, however once I approve it, and it then stores in the repository, the drawing shows on the saved form in Laserfiche.

Interesting.

0 0

replied on February 22, 2019

My guess is the issue is in how you are trying to load the image on the Task form.

I do not know what the code refers to in the line

if ($('[name=IsLocked]').val() == 'True') {

Maybe try to check if the imagefinish is checked.

0 0

replied on September 4, 2017 • Show version history

Has anyone ever got this working with a form that has an image already inserted into it?

For example we have to have an image of an accident and then the ability to draw on top and save the image and the drawing together in the repository. At the minute the functionality only extends to saving a blank white image with the drawing on it rather than include both the image and the drawing. Code is exactly the same as above except in the colors_sketch id I have included a link to an image found on the server.

<canvas id="colors_sketch" width="750" height="500" style="border:2px solid #000000; background: url(http://localhost/forms/img/vanImage.jpg"></canvas>
</div>

is the updated canvas html that differs from the above.

EDIT. Got this working with a background image.


  
  //submitted form
  if ($('[name=IsLocked]').val() == 'True') {
    var myCanvas = document.getElementById('colors_sketch');
	var ctx = myCanvas.getContext('2d');
    var img = new 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+')'
    }
    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"});
    });
    $('.imagefinish input').change(function(){
      if(this.checked) {
        var myCanvas = document.getElementById('colors_sketch');
        $('.saveimage textarea').val(myCanvas.toDataURL());
      }
    });
  }

0 0

replied on September 4, 2017

Hi Alex,

It seems that canvas background does not work on printed file;

A workaround is add a div element wrapping the canvas element, and set the background style on the div.

0 0

replied on September 5, 2017

Updated my post, got it working!

0 0

replied on November 5, 2020 • Show version history

Is it possible for someone who has made this work to attach a form incompassing the fields and code they used to make this work.

Thanks

0 0

You are not allowed to follow up in this post.

Question

Question

Custom HTML Drawing Canvas - How do I convert to an image so Forms retains drawing on "Submit"

Replies

Sign in to reply to this post.