基于Canvas的Photoshop样式网页涂鸦板

创客云


这是一款基于Canvas的Photoshop样式网页涂鸦板插件,该网页涂鸦板通过jquery和canvas来创建photoshop样式工具栏的网页画图工具。

使用方法

在页面中引入下面的文件。

  1. <link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.6.95/css/materialdesignicons.css" rel="stylesheet">
  2. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  3. <script src="dist/jquery.drawr.combined.js"></script>

HTML结构

  1. <div id="canvas"></div>

初始化插件

  1. $(function(){
  2.   $("#canvas").drawr();
  3. });

配置参数

  • canvas_width:画布的宽度。
  • canvas_height:画布的高度。
  • enable_tranparency:画布是否显示透明的背景。
  • undo_max_levels:设置可以undo的次数。
  • color_mode:指定演示拾取模式。
  • clear_on_init:是否在初始化时清空画布。

方法

  • start:开始画图模式。
  • stop:结束画图模式。
  • load:加载一张图片到画布上。
  • export:导出画布为一张图片。
  • button:添加自定义的按钮。
  • destroy:销毁画布。
  1. $("#canvas").drawr("start");
  2. $("#canvas").drawr("stop");
  3. $("#canvas").drawr("load", file);
  4. $("#canvas").drawr("export", "image/jpeg");
  5. $("#canvas").drawr("button", {
  6.   "icon":"mdi mdi-content-save mdi-24px"
  7. })
  8. $("#canvas").drawr("destroy")

Github网址:https://github.com/lieuweprins/jquery-drawr

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/48048.html
云模板

发表评论