其他代码

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

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
也想出现在这里?联系我们
360uxc
免费下载
(0)

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

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Ashade - 作品展示摄影相册WordPress汉化主题

Envato Affiliates

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

嘿,欢迎咨询!