canvas可拖拽画板(原创)

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

 16351  215  查看评论 (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;
});
相关插件-图像,丰富的输入

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

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

jQuery图片裁剪插件Cropit

Cropit 是款自定义裁剪和缩放图像的jQuery插件
  图像
 35285  259

svgmap地图

svgmap实现中国地图。
  图像
 48801  388

canvas图片+文字合成

canvas图片+文字合成,实现照片合成效果,界面有点丑但是功能OK的。
  图像
 35314  260

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

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