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

当前位置:主页 > Html5库 > html5 canvas > 基于Canvas的Photoshop样式网页涂鸦板插件
基于Canvas的Photoshop样式网页涂鸦板插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2019-05-15
    阅读:
简要教程

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

使用方法

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.6.95/css/materialdesignicons.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="dist/jquery.drawr.combined.js"></script>
                
HTML结构
<div id="canvas"></div>
                
初始化插件
$(function(){
  $("#canvas").drawr();
});      
                

配置参数

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

方法

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

该基于Canvas的Photoshop样式网页涂鸦板插件的github网址为:https://github.com/lieuweprins/jquery-drawr