snipio.js's Introduction

Snipio.js

支持截图、编辑和保存到本地功能，且可扩展

如何使用？

首先需要进行安装：

npm install --save snipio.js

然后在项目中引入：

import Snipio from 'snipio.js'
Snipio({

    /**
     * 启动后是否需要先让用户截图，可选
     * 1、h5 页面截图方式
     * 2、system 系统截图方式
     * 3、none 不截图（默认值）
     */
    snipping: "h5"
})

当然，你也可以使用CDN的方式：

<script src="https://unpkg.com/snipio.js"></script>

然后，在代码开头启动：

Snipio({
    snipping: "system"
})

使用html2canvas截图

0.2.0 新增

截取屏幕你也可以选择使用html2canvas，只需要：

Snipio({
    snipping: "html2canvas",
    html2canvas
});

扩展工具箱

你可以通过下面方式，扩展工具按钮：

Snipio({
    tool: [{
        label: "确认",
        callback: function () {
            console.log("你点击了确认按钮！");
        }
    }]
})

上面我们就给工具箱添加了一个确定按钮。

如果你希望添加的按钮进行更复杂的业务处理，比如类似“画笔”或“马赛克”，你可以这样：

Snipio({
    tool: [{
        label: "马赛克",

        // v0.2.0 新增
        drawHistroy:{
            mosaic:function(history){}
        },

        callback: function () {
            return {
                on:{
                    mouseDown:function(event){},
                    mouseMove:function(event){},
                    mouseUp:function(event){}
                }
            }
        },
        hold: true
    }]
})

其中on的事件会主动触发。

具体代码你可以查看：./src/toolbox/index.js

此外，包括on及其下面的mouseDown等在内的所有配置都可选，且其中的this均一致，格式如下：

this = {
    // 截图
    base64:String,

    // 画布节点
    view: Element,

    // 画布尺寸
    width: Number,
    height: Number,

    // 画笔
    painter,

    // 历史记录
    history: Array,

    // 绘制历史记录，v0.2.0 新增
    drawHistroy: Function,

    // 关闭
    close: Function,

    // 获取当前画布base64
    toDataURL: Function
}