画板
Tag
必须设置控件显示为块级元素,且需要指定控件的宽高。 依赖Jquery,不限制版本
<fd-w000019 id='widget-001' style="display:block;width:300px;height:300px;">
</fd-w000019>
Attributes
max-image-size-kb
允许插入图片和背景图的限制大小,单位kb
default-image
画板默认显示的图片,默认没图片
lang
语言, 默认为中文。可选择(en,cn)等
lock
锁定画板,禁止滚轮的使用
pencil-color
铅笔颜色,(“#000”,”#0366d6”)等
eraser-size
橡皮擦大小,不写默认为3像素值
plugins
设置指定的工具选项/绘图工具/设置,必填项 plugins=”arrowoneside,arrowtwoside,backgroundimage,brushsize,circle,color,colorhtml5,eraser,fullscreenmodebutton,image,imagecrop,line,linewidth,minimizebutton,opacityoption,openpopupbutton,overcanvaspopup,pencil,polygon,rectangle,shapeborder,shapecontextmenu,strokewidth,text,textalign,textbackgroundcolor,textcolor,textdecoration,textfontfamily,textfontsize,textfontstyle,textfontweight,textlineheight,togglevisibilitybutton,triangle,zoom” 详细官网地址https://github.com/carstenschaefer/DrawerJs/wiki
Methods
close_canvas()
关闭画板
get_image()
返回值:
html: string
把画板的内容导出为图片,格式为base64字符串。
get_canvas()
返回值:
html: string
把画板的内容导出为序列化的canvas数据。
set_background_image_from_url()
通过url设置画板背景图
参数:
- url: 图片路径【string】
- position: 图片位置,可选值( ‘stretch’, ‘center’, ‘stretch’, ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’)
set_canvas()
参数:
序列化的canvas数据【String】
返回值:
无
设置画板的内容。
start_edit()
开始编辑。
stop_edit()
停止编辑。调用之后,鼠标点击画板没有反应。若要解除限制请调用start_edit()
Events
fdwe-ready
画板初始化完成的事件
fdwe-after-render
每次渲染之后都会触发fdwe-after-render
事件,包括设置画板背景图。
Example
html
<p>画板</p>
<br>
<fd-w000019 id='widget-001' lang='cn' max-image-size-kb='1024' plugins="pencil,eraser,text,line,arrowoneside,arrowtwoside,triangle,rectangle,circle,image,imagecrop,backgroundimage,polygon,colorhtml5,color,shapeborder,brushsize,opacityoption,linewidth,strokewidth,shapecontextmenu,overcanvaspopup,openpopupbutton,minimizebutton,togglevisibilitybutton,fullscreenmodebutton,zoom,textlineheight,textalign,textfontfamily,textfontsize,textfontweight,textfontstyle,textdecoration,textcolor,textbackgroundcolor" default-image='//gitee.com/uploads/6/1356006_MaShizhen2020.png?1523670711' style="display:block;width:800px;height:500px;">
</fd-w000019>
<input type="button" id="set" value="设置画板内容" />
<input type="button" id="get" value="获取画板内容" />
<input type="button" id="get_img" value="获取图片" />
<img id='img' src='' alt="">
<textarea id='textarea'></textarea>
js
const w = document.querySelector('#widget-001');
const get = document.querySelector('#get');
const get_img = document.querySelector('#get_img');
const set = document.querySelector('#set');
const img = document.querySelector('#img');
const stop = document.querySelector('#stop');
const textarea = document.querySelector('#textarea');
get.addEventListener('click', () => {
const c = w.get_canvas();
console.log(c);
localStorage.setItem('test', c);
textarea.innerHTML = c;
});
set.addEventListener('click', () => {
const c = localStorage.getItem('test');
w.set_canvas(c);
});
get_img.addEventListener('click', () => {
const i = w.get_image();
img.src = i;
});