Draw On Image In Form

(Erik Pampalone) #1

I have created a Layout Based Form and would like to add an image that I can draw on. I want to save the combined image/drawing every time I use that form.

The purpose is to document Botox and Filler injections. The image is of facial muscle and I would like to place dots on the image that represent the injections, to document each procedure.

Is there currently away to do this?

Image Canvas in LBF with background from patient image records
(Sherwin Gaddis) #2


There is a form that does something similar named the graphic pain map. You can install it and relabel it for your use. If you are a little techie, you can change the image to a face close up.

(Brady Miller) #3

hi @naya ,
Check out the ’ Image canvas’ data type in the LBF. I think that should get what you are looking for. Looks like it will take an image name in the description (or at least that’s what it looks like in the code at:
openemr/options.inc.php at master · openemr/openemr · GitHub

(Erik Pampalone) #4

Thank you both for your replies. Because I would like the drawing/image to be one of several data points, I am going to try using the Image Canvas first. If I can’t get that to work, I will try the using the pain map approach.

Here is the form I have so far.

I looked at the code Brady sent, and added an image to the folder shown below.

I added the image name to the description (see below).

I also tried adding the image to the directory /sites/images, but that didn’t work either.

Can you tell me if I am reading this right?


(Brady Miller) #5

Hi @naya ,

In the Description on the LBF editor, try:


(Brady Miller) #6

Definitely let us know if this works. If so, then this is a real jewel of a feature that I was not even aware of, so will be good to get it documented somewhere.

Control Clinico Dental
(Erik Pampalone) #7

This worked perfectly!

Thanks. Would you like me to write it up? If so, can you give me guidelines for the writeup?


(Brady Miller) #8

hi @naya ,


Just document your steps here (pics are always nice) and then I’ll copy it over to the wiki (I won’t make you learn wiki language especially since we are hoping to migrate to a modern doc engine in hopefully near future).


(Brady Miller) #9

btw, @sunsetsystems , this is an awesome feature that you added to LBF!

(Rod Roark) #10

Thanks! And I am very happy to see the documentation effort.

(Erik Pampalone) #11

Let me know if this works.

Draw On Image Using Image Canvas in Layout Based Form

  1. Upload your image to the directory

[web root]/openemr/sites/default/images/YourImageName.ext

Note: The options.inc.php file holds the code for this functionality

  1. Create Layout Based Form
  • Data Type: Image Canvas
  • Description: image=YourImageName.extension

  1. Before drawing on image in form

  1. After drawing on image in form

(James Kay) #12

Is there a way to make the Image Canvas larger?

(Erik Pampalone) #13

Hi @drkay,

Yes. There is a way to make the canvas larger. As @brady.miller pointed out to me, you can make changes in the Layout gui for size width and height. Your picture is in pixels, so in the example below, I matched the Image Canvas size to the image size in pixels.
You can see I set the size width to 500 and the size height to 750.

My image is 500X700 pixels and here how it looks on the form. You can see there are 50 pixels at the bottom of the form.


(James Kay) #14

Oh, this is great. Thank you!!

(Maricarmen Yañez) #15

Hola, estoy comenzando a utilizar openemr, como hicieron para agregar el cuadro para la imagen y posteriormente agregar la imagen, ingresaron directo al código?

(Luis Angel Uriarte) #16

It is explained above:
1 place the image in the openemrdirectory / sites / images directory
2 You create a form LBF Administration -> Layout -> New Layout
3 You create the field where you want to put the image. The Data Type must be Image Canvas, and in description you must place image = TuImagen.extension. In size, you can place the size of the images in pixels.

Esta explicado mas arriba:
1 colocas la imagen en el directorio openemrdirectory/sites/images
2 Creas un formulario LBF Administracion -> diseño -> Nuevo Diseño
3 Creas el campo donde quieres poner la imagen. El Tipo de Dato debe ser Image Canvas, y en descripción debes colocar image=TuImagen.extension. En tamaño, puedes colocar el tamaño de la imágenes en pixeles.

(Maricarmen Yañez) #17

Hola, hice todos los pasos pero sigue sin funcionar, la extensión de la carpeta images es: xampp/htdocs/openemr/sites/default/images
Sabe cuál puede ser el problema?

(Maricarmen Yañez) #18

Hola, al crear el formulario se debe completar algún campo en especial?

(Luis Angel Uriarte) #19

Yes, in the form you must place a field where the Data Type is Image Canvas and in the description of the field you must place image=name_of_your_file.jpg (the name of the file you placed in xampp/htdocs/openemr/sites/default/images)

In Spanish:
Si, en el formulario debes colocar un campo donde el Tipo de Datos es Image Canvas y en la descripción del campo debes colocar image=nombre_de_tu_archivo.jpg (el nombre del archivo que colocaste en xampp/htdocs/openemr/sites/default/images)


(Jeremiah Ocasio) #20

Is there a method to enable loading images to the patient record and using them as a canvas background to draw on?