jQuery动态绘图插件ImageDrawer.js

所属分类:媒体-图像

 27927  368  查看评论 (2)
分享到微信朋友圈
X
jQuery动态绘图插件ImageDrawer.js ie兼容12

imagedrawer.js

使用方法

使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件。

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script type="text/javascript" src="js/imagedrawer.js"></script>
  <link rel="stylesheet" type="text/css" href="css/imagedrawer.css" />
</head>

 在页面中插入你需要绘制的图片。

<body>
  <div id="container">
  	<img id="imageto-draw" src="./img/myImage.jpg" />
  </div>
</body>

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该图片绘制插件。

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

ImageDrawer.js图片绘制插件有以下一些可用的配置参数。

  • Duration:整个动画或每个步骤的绘制时间(以秒为单位)

  • Background:在绘图时将颜色放在图片上

  • Callback:绘画结束时调用onece的函数

  • Pencil:绘图铅笔图像的选项对象

  • Width:铅笔图像宽度

  • Height:铅笔图像高度

  • marginTop:图片上的铅笔图像上边距

  • Marginalft:图片上的铅笔图像上边距

  • Disappear:绘图完成后,使铅笔消失的秒数

  • fromBottom:从图片的底部开始绘图

  • invertAxis:垂直绘制图像

  • Src:铅笔图像路径

相关插件-图像

jQuery钢笔抠图插件(原创)

通过Canvas实现钢笔抠图效果
  图像
 19940  280

橡皮擦--图片擦除效果

电脑端、移动端(Android、ios等)都可适应!
  图像
 50886  443

jquery.photoClip图片裁剪添加旋转 缩放按钮功能

项目上用的jquery.photoClip 插件,为了更好的用户体验 需要添加 旋转 缩放按钮功能,所以在原有的基础上添加了点功能,希望能帮助各位,写的不好 海涵!
  图像
 27903  319

基于HTML5 Canvas实现的图片马赛克模糊特效

基于HTML5 Canvas实现的图片马赛克模糊特效
  图像
 29354  306

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    栀子花?? 0
    2018/12/6 17:48:40
    首次加载的时候会闪现出原色 回复
    习惯_普普通通 0
    2018/10/26 14:23:54
    一般项目貌似用不到 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复