其他代码

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

面包多

基于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

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!