canvas可拖拽画板(原创)

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

 25047  311  查看评论 (6)
分享到微信朋友圈
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图片裁剪插件Cropper.js

功能非常强大的图片裁剪插件Cropper.js
  图像
 33787  350

canvas图片+文字合成

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

移动端图片滤镜效果

在手机上常用到的图片滤镜效果
  图像
 28230  385

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

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

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

    0
    2024/4/23 14:42:23
    可以添加上传图片功能并且裁切图片吗 回复
    清风 0
    2022/8/16 9:38:30
    大佬,怎么重新设置画板样式 回复
    coco~ 0
    2022/8/11 11:14:30
    大佬 我下载了你这个插件 但是该怎么去掉拖拽 回复
    再度 0
    2022/2/28 1:24:53
    ⭐🍉🍺🍺🍺🍺 回复
    ??倪 0
    2020/1/12 17:40:38
    绘画的形状是不是可以多加几个常用的呢 比如:直线 圆形 矩形 回复
    私はあなたを爱し 0
    2019/2/21 18:00:52
    橡皮擦点击后没有明确的显示,建议附加一个橡皮擦的形状,以便使用 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复