插件 jQuery.Eraser 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.Eraser 中文API文档 https://github.com/boblemarin/jquery.eraser

jQuery.eraser v0.5.2

a jQuery plugin that makes an image erasable (with mouse or touch movements)

This plugin replaces the targeted image by an interactive canvas that can be erased using touch or mouse inputs. You can specify a callback for completion and set the brush size.

Please note that I don’t claim that the completion detection process is ultimately accurate. In fact you should rather use a completeRatio around 0.8 if you want a near-complete erase process.

What’s new in 0.5.2

Added the ‘enable/disable/enabled’ methods (see details in the Usage section)

What’s new in 0.5.1

Added a ‘progress’ method (see details in the Usage section)

What was new in 0.5.0

Eraser now takes care of checking if the target image is already loaded. If not, it registers a callback on the load event and waits for the bitmap data to be available.

You don’t have to worry anymore about anything but erasing.

Usage :

To transform an image or canvas into an erasable canvas, just use this syntax :

$('#yourImage').eraser();

To specify a brush size, add some options (default value is 40) :

$('#yourImage').eraser( { size: 30 } );
// and you can also change the size later :
// $('#yourImage').eraser( 'size', 30 } );

You can reset the canvas (back to the original image) with this code :

$('#yourImage').eraser('reset');

And you can erase all the canvas' content by calling :

$('#yourImage').eraser('clear');

You can change whether erasing is enabled or disabled by calling the enable or disable methods :

$('#yourImage').eraser('enable');
$('#yourImage').eraser('disable');

And you can check whether erasing is enabled or disabled by calling :

$('#yourImage').eraser('enabled');

To get a callback when 50% of the image has been erased, use the following options :

$('#yourImage').eraser( {
    completeRatio: .5,
    completeFunction: showResetButton
});

If you need to manually query the progress of the user, use the progress method :

var progress = $('#yourImage').eraser('progress'); // returns a value between 0 and 1

There is also a progressFunction option where you can provide a function that will be called each time the user erases a new area. It receives as argument the normalized progress value (0.0 to 1.0).

$('#yourImage').eraser( {
    progressFunction: function(p) {
        console.log(Math.round(p * 100) + '%');
    }
});

URLs :

* https://github.com/boblemarin/jQuery.eraser
* http://minimal.be/lab/jQuery.eraser/

Created by @boblemarin


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>