jQuery plug-in ImageDrawer.js realizes dynamic drawing of picture animation (with source code download)_jquery

ImageDrawer.js is a jQuery plug-in that can dynamically draw image animations. Through the ImageDrawer.js plug-in, you can create a dynamic process of drawing images on the page. You can control parameters such as the duration of the drawing animation, which is very interesting.

Effect display Source code download

How to use

Using this dynamically drawn picture plug-in requires the introduction of imagedrawer.css, jquery and imagedrawer.js files into the page.

<link rel="stylesheet" href="css/imagedrawer.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/imagedrawer.js"></script>

HTML structure

Insert the picture you need to draw into the page.

<div id="container">
<img  src="/static/imghwm/default1.png"  data-src="img.jpg"  class="lazy"  id="example" alt="jQuery plug-in ImageDrawer.js realizes dynamic drawing of picture animation (with source code download)_jquery" >
</div>

Initialize plugin

After the page DOM element is loaded, you can initialize the image drawing plug-in through the following method.

$('div#container').drawImage();

Configuration parameters

ImageDrawer.js image drawing plug-in has the following available configuration parameters.

$(div#container).drawImge({
duration: 20, @number - seconds it's take to draw the entire picture
Instead of specifying the duration on the whole animation,
|| { it's also possible to set the duration of single drawing phases:
borderPencil : 9, @number - seconds it's take to draw the picture by using only the pencil for borders
pencilShades : 6, @number - seconds it's take to draw sharpest shades with black pencil
colorShades : 7.5, @number - seconds it's take to draw first, basic, vanish colors
fullColors : 7.5 @number - seconds it's take to define better all colors on the picture
},
background: '#949494', @string - background color for image while it's been drawing
callback: fn(), @function - function to execute after the last phase
pencil: {
height: '50px',
width : '50px',
src : './img/pencil.png' @string - path to the pencil image
}
});

duration: the duration of drawing animation. Can be an integer or an object:

{
borderPencil : 9, 
pencilShades : 6, 
colorShades : 7.5, 
fullColors : 7.5 
}

borderPencil: The time required to draw the border.
pencilShades: The time required to draw black and white shadows.
colorShades: The time required to draw color shadows.
fullColors; the time it takes to fill colors.
background: The background color of the canvas.

callback: callback function.

pencil: A small pencil icon displayed above the canvas.

The above is the knowledge about the jQuery plug-in ImageDrawer.js introduced by the editor to dynamically draw image animations (source code download attached). I hope it will be helpful to everyone!