
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
canvas-tablet
Advanced tools
Tablet是一个轻量级的基于canvas的在线画板,无其他依赖,`传统网站`或`vue`、`react`、`angular`等单页面应用皆可使用!兼容各种移动设备!
Tablet是一个轻量级的基于canvas的在线画板,无其他依赖,
传统网站
或vue
、react
、angular
等单页面应用皆可使用!兼容各种移动设备!
Tablet is a lightweight canvas-based online drawing board with no other dependencies. It can be used by traditional websites
or single-page applications such as vue
, react
, and angular
! Compatible with all kinds of mobile devices!
这是Tablet2.0
文档,Tablet1.0文档请前往
npm install canvas-tablet -S
将/dist/Tablet-2.0.1.min.js下载下来即可
<div class="tool-bar">
<div class="tablet-btns" style="padding: 10px;">
<input class="-color-picker color-color" type="text" value="字体颜色" id="colpick" readonly/>
<input class="-color-picker bg-color" type="text" value="背景颜色" id="colpick2" readonly/>
<div class="clear-canvas">清屏</div>
<div class="save-canvas-to-img">保存图片</div>
<span>
画笔粗细
<select>
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="8">8</option>
<option value="10" selected>10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<!--<select>
<option value="0">正常</option>
<option value="90">顺时针旋转90度</option>
<option value="-90">逆时针旋转90度</option>
<option value="180">旋转180度</option>
</select>-->
<button type="button" class="get_blob">获取blob对象</button>
<button type="button" class="set-img">设置背景图片</button>
<button type="button" class="backOneStep">撤回</button>
</span>
</div>
</div>
<div class="container" id="container"></div>
<script src="./dist/Table.2.0.1.min.js"></script>
<script>
var tablet;
$(function () {
tablet = new Tablet("#container", {
// 画笔默认颜色
defaultColor: "#2e76da",
// 默认背景色
defaultBackgroundColor: '#f60',
// canvas画布是否响应式
// response: true,
// canvas的宽度,宽高都可以传递函数
// width: 0,
// height: 0,
// 前面板的额外class
// extraClass: "",
// 设置获取到的图片的类型,可选值png、jpg,默认png
// imgType: "png",
// 清除画布前执行的函数,如果该函数返回false,则不会进行清除
// onBeforeClear: function () {},
// 清除画布后执行的函数
// onClear: function () {},
autoResize: true, // 浏览器窗口改变时是否重新绘制
// 画布初始化后的回调
onInit: function () {
var that = this,
container = this.container;
$(".-color-picker").each(function () {
var self = this,
$self = $(this);
if ($self.hasClass('color-color')) {
$self.colpick({
color: that.config.defaultColor,
layout: 'hex',
submitText: "确定",
onSubmit: function (hsb, hex, rgb, el, bySetColor) {
var color = "#" + hex;
$(el).css({
//color: color,
"border-color": color
}).colpickHide();
el.selectedColor = color;
that.color = color;
that.setColor(color);
}
});
$self.css({
"border-color": that.config.defaultColor
});
} else if ($self.hasClass('bg-color')) {
$self.colpick({
color: that.config.defaultBackgroundColor,
layout: 'hex',
submitText: "确定",
onSubmit: function (hsb, hex, rgb, el, bySetColor) {
var color = "#" + hex;
$(el).css({
//color: color,
"border-color": color
}).colpickHide();
el.selectedColor = color;
//that.bgColor = color;
that.setBackgroundColor(color);
// 重绘背景图后必须刷新一下,否则偶尔会出现最后一个线条被重复绘制一遍问题
var timer = setTimeout(function (){
clearTimeout(timer);
that.refresh();
}, 0);
}
});
$self.css({
"border-color": that.config.defaultBackgroundColor
});
}
});
$('.clear-canvas').on('click', function () {
that.clear();
})
$(".tablet-btns select").eq(0).on("change", function () {
that.setLineWidth($(this).val());
});
$(".save-canvas-to-img").on("click", function () {
console.log(that.getBase64());
if (!that.isMobile) {
alert("请按f12打开控制台查看base64图片数据!");
}
});
$(".get_blob").on("click", function () {
console.log(that.getBlob());
});
$(".set-img").on("click", function () {
that.setBackgroundImage(document.getElementById('bg_img'));
// 重绘背景图后必须刷新一下,否则偶尔会出现最后一个线条被重复绘制一遍问题
var timer = setTimeout(function (){
clearTimeout(timer);
that.refresh();
}, 0);
});
$(".backOneStep").on('click', function () {
that.revoke();
});
}
});
console.log(tablet);
});
</script>
效果如图:
refresh(refreshWH)
刷新画布,线条及背景将会重绘,返回当前Tablet实例;如果refreshWH
为true,则会重新计算画布宽高
hasCanUseLine
判断是否有可用的线条,可以用来判断用户是否有绘制内容,返回值类型:boolean
getRect
获取画布位置及宽高;返回值类型:{x: number, width: number, y: number, height: number}
getBase64(type, angle)
将画布内容转换成base64数据,并返回;返回值类型:string
type
:图片类型,只有jpg
、png
两个选项,默认png
angle
:旋转角度,默认为0,角度支持90的整数倍
getBlob(type, angle)
将画布内容转换成blob数据,并返回;返回值类型:blob
type
:图片类型,只有jpg
、png
两个选项,默认png
angle
:旋转角度,默认为0,角度支持90的整数倍
getMax(xPoints, yPoints)
获取x、y轴的最大、最小值;xPoints, yPoints
分别为x轴、y轴所有坐标;返回值类型:{top: number, left: number, bottom: number, right: number}
setColor(color)
设置画笔颜色;color
为颜色值,可以是任何css的颜色表达式;返回当前Tablet实例
setLineWidth(width)
设置画笔粗细;width
为粗细值,number类型
;返回当前Tablet实例
setBackgroundColor(bgColor, x, y, width, height, addToOperationRecord)
设置画布背景颜色;返回当前Tablet实例
bgColor
:颜色值,可以是任何css的颜色表达式x
:绘制起始x点,默认为0y
:绘制起始y点,默认为0width
:绘制宽度,默认为整个画布宽度height
:绘制高度,默认为整个画布高度addToOperationRecord
:是否将此操作添加到操作历史中,默认为true
setBackgroundImage(img, x, y, width, height, onImgLoading, onFail, addToOperationRecord)
设置画布背景颜色;返回当前Tablet实例
img
:背景图片,值可以为图片url或者Image对象x
:绘制起始x点,默认为0y
:绘制起始y点,默认为0width
:绘制宽度,默认为整个画布宽度height
:绘制高度,默认为整个画布高度onImgLoading
:图片加载中回调onFail
:图片加载失败回调addToOperationRecord
:是否将此操作添加到操作历史中,默认为true
setCanvasWH(width, height)
设置画布的宽高;width, height
分别为画布宽高,如果不传宽高则会自动计算;返回当前Tablet实例
canvasReset
重置canvas画笔属性,使用最后一次的属性进行重置,返回当前Tablet实例;
revoke
回退一步,返回当前Tablet实例;
clear(clearPoints)
clear
方法用于清空画布,返回值当前Tablet实例;如果clearPoints
为true,则会将之前绘制的线条及操作步骤清空
hasContent(singleColorCountMin, totalColorCountMin)
v2.0.5新增
判断画布是否有内容,画布中有可用线条或画布中颜色数量大于等于totalColorCountMin
都认为有内容
singleColorCountMin
:单个颜色最少数量,默认5totalColorCountMin
:总颜色数量,默认为2
getTabletImageColors
v2.0.5新增
获取画布中内容的颜色(16进制)
FAQs
Tablet是一个轻量级的基于canvas的在线画板,无其他依赖,`传统网站`或`vue`、`react`、`angular`等单页面应用皆可使用!兼容各种移动设备!
The npm package canvas-tablet receives a total of 3 weekly downloads. As such, canvas-tablet popularity was classified as not popular.
We found that canvas-tablet demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.