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

这是一款基于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

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-1