Loading...
Anno Modal 1.0.0Anno Modal is a jQuery plugin that provides a simple and nice way to create modal dialogs that shows a picture and make annotation possible.
Easy to implement  •  Ready in minutes  •  PHP script included  •  Ai file included  •  For all pages
Key features :
  • Easy installation
  • Annotate images with ease
  • Save original image or annotated images
  • Browse easily between images (also with left and right keys) on your page and make annotations
  • Auto save the annotation
  • zoom in to original size
CSS : default 
                                

.anno-seletedtools[tooltip]:hover:after {
    content: attr(tooltip);
    padding: 4px 8px;
    color: #333;
    position: absolute;
    left:auto;
    right: 105px;
    top: 5px;
    z-index: 20;
    font-size: 15px;
    white-space: nowrap;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #B0EEBA, #88CC7F);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B0EEBA), color-stop(1, #88CC7F));
    background-image: -webkit-linear-gradient(top, #B0EEBA, #88CC7F);
    background-image: -moz-linear-gradient(top, #B0EEBA, #88CC7F);
    background-image: -ms-linear-gradient(top, #B0EEBA, #88CC7F);
    background-image: -o-linear-gradient(top, #B0EEBA, #88CC7F);
}
#anno_this {
    position: absolute;
    display: inline-block;
    border: #eeeeee solid 1px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    height: 200px;
    border-radius: 5px;
    display: none;
    background-color: #f0f0f0;
    -moz-box-shadow: 2px 0 14px 6px #656565;
    -webkit-box-shadow: 2px 0 14px 6px #656565;
    box-shadow: 2px 0 14px 6px #656565;
}
#annomodalcanvas {
    position: absolute;
    left: 15px;
    z-index: 20;
    cursor: crosshair;
}
.anno-seletedtools {
    margin-left: 7px;
    margin-bottom: 10px;
    width: 25px;
    height: 25px;
    padding: 5px;
    border-radius: 7px;
    background-repeat: no-repeat;
    background-size: 23px;
    background-position: center;
    background-color: #DBDBDB;
    border: 2px solid #fff;
    display: inline-block;
}
.anno-seletedtools:hover {
    cursor: pointer;
}
#annomodaltools {
    float: right;
    width: 100px;
    height: 100%;
    left: auto;
    right: 0;
    position: relative;
}
#annomodalpen {
    background-image: url('images/icons-01.svg');
}
#annomodalcirc {
    background-image: url('images/icons-02.svg');
}
#annomodalrect {
    background-image: url('images/icons-03.svg');
}
#annomodalline {
    background-image: url('images/icons-04.svg');
}
#annomodaltext {
    background-image: url('images/icons-05.svg');
}
#annomodalundo {
    background-image: url('images/icons-06.svg');
    background-color: #f0f0f0;
}
#annomodalredo {
    background-image: url('images/icons-07.svg');
    background-color: #f0f0f0;
}
#annomodalclear {
    background-image: url('images/icons-08.svg');
}
#annomodalok {
    background-image: url('images/icons-09.svg');
    background-color: transparent;
}
#annomodalbw {
    background-image: url('images/icons-10.svg');
}
#annomodaldowncanvas {
    background-image: url('images/icons-12.svg');
}
#annomodalsave {
    background-image: url('images/icons-13.svg');
}
#annomodaldownload {
    background-image: url('images/icons-14.svg');
}
#annomodalnext {
    margin-top: 40px;
    background-image: url('images/icons-15.svg');
    margin-bottom: 0;
}
#annomodalprev {
    margin-top: 40px;
    background-image: url('images/icons-16.svg');
    margin-bottom: 0;
}
#annononepart {
    background-image: url('images/icons-17.svg');
}
#annocolorselector {
    background-image: url('images/icons-18.svg');
    background-color: #11BC0F;
    background-size: 35px;
}
#annomodalcanvas hover {
    cursor: crosshair;
}
#annomodalbackdiv {
    background-color: #000000;
    float: left;
    width: 100%;
}
#annozoom {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    overflow: auto;
    z-index: 20000;
    width: 100%;
    height: 100%;
    background-color: #000;
    padding: 15px;
}
.anno-none {
    background-color: #f0f0f0;
}
.anno-none-np {
    background-color: #f0f0f0;
    margin-bottom: 0;
}
.anno-mb {
    margin-top: auto;
    margin-bottom: 0px;
    position: absolute;
    bottom: 0;
}
Anno_modal

Upload the
  • css folder including the sub folder "images"
  • js folder ( or at least the anno_modal_min.js)
  • php folder (or at least the "anno_modal.php" script )
  • uploaded/images folder or create your own location folder on your server (this must have the proper rights (777) so that script may create the images there!)
to your server and add the required files in your page (usually in the head section).

Options
Basic init 

$(function(){
    anno_modal.init({
        Maxsize:900,
        drawColor:"#327615",
        selectedTool:"Pencil",
        saveannoFlatten:true,
        preloadAnotation:true,
        uploadScript:"php/anno_modal.php",
        uploadDir:"../uploaded/images/",
        annoImgDir:"uploaded/images/",
        lineWidth:2,
onSave:function(i){
    $(".anno-this")[i.index].setAttribute('src',i.imagedata);
}
    });
});
This is an example of the scripts thats init the anno_modal.
Init Property Default Description
Maxsize 900 The size of the image in the anno_modal window all in px ( Do not add "px" after the number) every number under 500 will be ignored and set to 500
drawColor "#ffffff" The color to use as the standard to draw with.
lineWidth 3 The draw width of the pen, cicle etc... tools all in px ( Do not add "px" after the number)
selectedTool "Pencil" Options are:
"Pencil"
"Text"
"Line"
"Circle"
"Rectangle"
uploadScript "php/saveupload.php" Location of the php script that stores the created "png" pictures
uploadDir "../uploaded/images/" Location of the directory of the created "png" pictures From the perspective of the "saveupload.php" script. Make sure you add the trailing "/"
annoImgDir "uploaded/images/" Location of the directory of the created "png" pictures From the perspective of your page. Make sure you add the trailing "/"
saveannoFlatten false setting this property to "false make pictures of only the drawm layer and NOT the image it self. (this keeps the created images small)

Setting this property to "true" flattens the the image and drawn layer as one. The original image will not been replaced instead a new image will be created at the max width of the canvas.
preloadAnotation false setting this property to "true" will after pageload replace all the images with the annotated stored images if these exist. This feature only works if "saveannoFlatten" is set to true
Call Back function Description
onSave 




onSave:function(i){
    $(".anno-this")[i.index].setAttribute('src',i.imagedata);
}
function returns an Object
Only when "saveannoFlatten" set to true this function will be called.

format:
{index:0, imagedata:'data:image/png;base64, iVBORw....''}

"index" is the currently saved image index
"imagedata" is the base 64 datastring of the annotated image

This function will not be called when the "filename" atribute of de image is not set.
anno_modal has been developed by Jan-Peter Bom - Contact me for any support.