前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 经验记录 » ThinkJS入门学习实例(4): 网页截图

ThinkJS入门学习实例(4): 网页截图

发布者:前端集合 // 发布时间:2015-02-05 14:43:00 // 分类:经验记录 // 访问: 2,260 次 // 热度: 0人参与

ThinkJS入门学习实例

完整示例代码:

六、网页截图

node.js有十几万个package可供使用,这使得实现各种功能非常方便。

在ThinkJS中使用node.js的package也是一样,npm install后,直接require即可。

网页截图需要使用node-webshotnode-webshot更多设置请参考项目主页:

HTML文件路径为:App/View/Admin/index_screen.html

<div class="row">
    <div class="col-md-2">
        <form action="/admin/index/screen" method="POST">
            <div class="form-group">
                <input class="form-control" type="text" name="url" placeholder="请输入网址" />
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
        </form>
    </div>
</div>

App/Lib/Controller/Admin/IndexController.js

// 网页截图
screenAction: function() {
    var self = this;
    var url = self.post('url');
    var imgName = url.replace(/http.*:\/\//g, '').replace(/[\/]|[\?]/g, '.');

    if (self.isPost()) {
        var options = {
            // 截图视窗宽度
            windowSize: {
                width: 1200
            },
            // 网页截图宽高:width = all 会继承windowSize的设置,height = all表示截取完整网页
            shotSize: {
                width: 'all',
                height: 'all'
            },
            streamType: 'png',
            // 渲染完成后延迟一秒截图
            renderDelay: 1000,
            timeout: 20000,
            defaultWhiteBackground: true
        };

        // 开始截图, 图片保存到 /www/screen/ 下
        webshot(url, 'screen/' + imgName + '.' + options.streamType, options, function(err) {
            if (err == null) {
                self.success('截图成功');
            } else {
                self.error('截图失败');
            }
        });
    } else {
        self.assign({
            'title': '网页截图'
        });
        self.display();
    }

}

如果提示截图成功,那么可以在/www/screen/可以看到图片了。

未完待续。。。

水平有限,如果文章有啥错误,还请不吝赐教 :)

Tags: thinkjs, thinkjs教程, thinkjs实例, thinkjs实例教程, thinkjs入门实例, thinkjs入门教程

2015,新春快乐>>  << ThinkJS入门学习实例(3)
Top