canvas可拖拽画板(原创)

所属分类:媒体,输入-图像,丰富的输入

 17394  232  查看评论 (2)
分享到微信朋友圈
X
canvas可拖拽画板(原创) ie兼容9

使用方法

1、在页面中设置一个div,引用所有css以及js文件;

<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/canvas-board.css">
<link rel="stylesheet" href="css/clip.css">
<link rel="stylesheet" href="css/image-clip.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/canvasBoard.js"></script>
<script src="js/image-clip.js"></script>
<script src="js/fileinput.js"></script>
<script src="js/exif.js"></script>

2、设置点击事件并通过

var cav = new CanvasBoard("canvas-container", "");cav.init();

调用插件

3、设置一个img标签放生成的图片

<img src="" alt="" id="imgBox" width="1024" height="auto" />

4、文件下载后若要调试,可将js文件中两段代码注释掉即可。(如下)

$("*").keydown(function(e) {
   //判断按键  
   e = window.event || e || e.which;
   if (e.keyCode == 123) {
       e.keyCode = 0;
       return false;
   }
});
$(document).bind("contextmenu", function(e) {
   return false;
});
相关插件-图像,丰富的输入

jQuery钢笔抠图插件(原创)

通过Canvas实现钢笔抠图效果
  图像
 12856  201

Beer Slider一款轻量级的图片对比插件

它的基本目的是比较图像的两个版本,例如在两个不同时刻拍摄的相同对象,预编辑的照片及其处理版本,草图和完成的插图等。
  图像
 17869  270

jQueryphotoClip图片剪裁插件

jQueryphotoClip是一款支持移动设备触摸手势的图片裁剪jQuery插件。
  图像
 70545  340

jQuery放大镜插件jqzoom.js

jQuery放大镜插件jqzoom.js
  图像
 80743  336

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

    ??倪 0
    2020/1/12 17:40:38
    绘画的形状是不是可以多加几个常用的呢 比如:直线 圆形 矩形 回复
    私はあなたを爱し 0
    2019/2/21 18:00:52
    橡皮擦点击后没有明确的显示,建议附加一个橡皮擦的形状,以便使用 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复