Javascript图像处理之平滑处理-Js--- typeof 与 instanceof的区别-jQuery event（下）

当前位置: 编程技术>WEB前端

本页文章导读:

▪Javascript图像处理之平滑处理　　原理来自Justany_WhiteSnow的Javascript图像处理——平滑处理一文。/* * BORDER_REPLICATE: aaaaaaaa|abcdefgh|hhhhhhhh * BORDER_REFLECT: hgfedcba|abcdefgh|hgfedcba * BORDER_REFLECT_101: hgfedcb|abcdefgh|gfedcba * B.........

▪Js--- typeof 与 instanceof的区别早上看到了instanceof，之前没有使用过，于是百度了。资料还非常多。。自已落伍了啊。。网上看了几篇，复制下来，方便以后学习。复制网址就不贴了哈，各个看到一样的请多多包含。。 .........

▪jQuery event（下）前文主要介绍了添加事件监听的方法，本文则主要讲删除事件监听，以及事件模拟。 jQuery.fn.offjQuery.fn.off = function( types, selector, fn ) { var handleObj, type; // 如果types是对象，其实现在.........

[1]Javascript图像处理之平滑处理

来源: 发布时间: 2013-11-06

　　原理来自Justany_WhiteSnow的Javascript图像处理——平滑处理一文。

/*
* BORDER_REPLICATE: aaaaaaaa|abcdefgh|hhhhhhhh
* BORDER_REFLECT: hgfedcba|abcdefgh|hgfedcba
* BORDER_REFLECT_101: hgfedcb|abcdefgh|gfedcba
* BORDER_WRAP: efgh|abcdefgh|abcd
* BORDER_CONSTANT: iiiiiiii|abcdefgh|iiiiiiii with some specified 'i'(default value [0, 0, 0, 255])
*/

(function () {
function imageBlur(iCanvas, url, borderType, orientation, blurType, value) {
this.canvas = iCanvas;
this.iCtx = this.canvas.getContext("2d");
this.url = url;
this.borderType = borderType;
this.orientation = orientation || "bottom";
this.value = value || [0, 0, 0, 255];
this.blurType = blurType || "blur";
}

imageBlur.prototype = {
imread: function (_image) {
var width = _image.width,
height = _image.height;
this.iResize(width, height);
this.iCtx.drawImage(_image, 0, 0);
var imageData = this.iCtx.getImageData(0, 0, width, height),
tempMat = new Mat(height, width, imageData.data);
imageData = null;
this.iCtx.clearRect(0, 0, width, height);
return tempMat;
},
iResize: function (_width, _height) {
this.canvas.width = _width;
this.canvas.height = _height;
},
RGBA2ImageData: function (_imgMat) {
var width = _imgMat.col,
height = _imgMat.row;
var imageData = this.iCtx.createImageData(width, height);
imageData.data.set(_imgMat.data);
return imageData;
},
render: function () {
var img = new Image();
var _this = this;
img.onload = function () {
var myMat = _this.imread(img);
var newImage = null;
if (_this.blurType == "blur") {
newImage = blur(myMat, 11, 11, _this.borderType);
} else if (_this.blurType == "median") {
newImage = medianBlur(myMat, 11, 11, _this.borderType);
} else {
newImage = GaussianBlur(myMat, 11, 11, 0, 0, _this.borderType);
}
var newIamgeData = _this.RGBA2ImageData(newImage);
_this.iCtx.putImageData(newIamgeData, 0, 0);
};
img.src = this.url;
}
};

function Mat(_row, _col, _data, _buffer) {
this.row = _row || 0;
this.col = _col || 0;
this.channel = 4;
this.buffer = _buffer || new ArrayBuffer(_row * _col * 4);
this.data = new Uint8ClampedArray(this.buffer);
_data && this.data.set(_data);
this.bytes = 1;
this.type = "CV_RGBA";
}

function blur(__src, __size1, __size2, __borderType, __dst) {
if (__src.type && __src.type == "CV_RGBA") {
var height = __src.row,
width = __src.col,
dst = __dst || new Mat(height, width, __src.data),
dstData = dst.data;
var size1 = __size1 || 3,
size2 = __size2 || size1,
size = size1 * size2;
if (size1 % 2 !== 1 || size2 % 2 !== 1) {
console.error("size大小必须是奇数");
return __src;
}
var startX = Math.floor(size1 / 2),
startY = Math.floor(size2 / 2);
var withBorderMat = copyMakeBorder(__src, startY, startX, 0, 0, __borderType),
mData = withBorderMat.data,
mWidth = withBorderMat.col;

var newValue, nowX, offsetY, offsetI;
var i, j, c, y, x;

for (i = height; i--;) {
offsetI = i * width;
for (j = width; j--;) {

[2]Js--- typeof 与 instanceof的区别

来源: 发布时间: 2013-11-06

早上看到了instanceof，之前没有使用过，于是百度了。资料还非常多。。自已落伍了啊。。

网上看了几篇，复制下来，方便以后学习。复制网址就不贴了哈，各个看到一样的请多多包含。。

typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。

它返回值是一个字符串，该字符串说明运算数的类型。typeof 一般只能返回如下几个结果：

number,boolean,string,function,object,undefined。我们可以使用 typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错，对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。

如：

alert(typeof (123));//typeof(123)返回"number"

alert(typeof ("123"));//typeof("123")返回"string"

instanceof

a instanceof b?alert("true"):alert("false"); //a是b的实例？真:假

instanceof 用于判断一个变量是否某个对象的实例，如 var a=new Array();alert(a instanceof Array); 会返回 true，同时 alert(a instanceof Object) 也会返回 true;这是因为 Array 是 object 的子类。再如：function test(){};var a=new test();alert(a instanceof test) 会返回true

谈到 instanceof 我们要多插入一个问题，就是 function 的 arguments，我们大家也许都认为 arguments 是一个 Array，但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象，尽管看起来很像。

另外：

测试 var a=new Array();if (a instanceof Object) alert('Y');else alert('N');

得'Y’

但 if (window instanceof Object) alert('Y');else alert('N');

得'N'

所以，这里的 instanceof 测试的 object 是指 js 语法中的 object，不是指 dom 模型对象。

使用 typeof 会有些区别

alert(typeof(window)) 会得 object

本文链接

[3]jQuery event（下）

来源: 发布时间: 2013-11-06

前文主要介绍了添加事件监听的方法，本文则主要讲删除事件监听，以及事件模拟。

jQuery.fn.off

jQuery.fn.off = function( types, selector, fn ) {
var handleObj, type;
// 如果types是对象，其实现在应该说是type，并且拥有preventDefalut和handleObj
if ( types && types.preventDefault && types.handleObj ) {
// 通过types获取handleObj
handleObj = types.handleObj;
// 转成字符串来取消事件
jQuery( types.delegateTarget ).off(
handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,
handleObj.selector,
handleObj.handler
);
return this;
}
// 如果types还是对象，那么认为其是是一个map，key对应事件名，value对应处理函数
if ( typeof types === "object" ) {
// ( types-object [, selector] )
// 遍历所有type
for ( type in types ) {
this.off( type, selector, types[ type ] );
}
return this;
}

// 如果selector为false，或者selector是个函数
if ( selector === false || typeof selector === "function" ) {
// ( types [, fn] )
// 等同于传进来types和fn
fn = selector;
selector = undefined;
}
if ( fn === false ) {
// 如果fn是false，则定义为一个return false的函数
fn = returnFalse;
}
// 遍历所有元素
return this.each(function() {
// 使用jQuery.event.remove删除所有事件处理
jQuery.event.remove( this, types, fn, selector );
});
};

这个方法逻辑还是比较清晰的，尝试处理各种传参方式以后，最终都是利用jQuery.event.remove来删除事件处理函数的。

jQuery.event.remove

jQuery.event.remove = function( elem, types, handler, selector, mappedTypes ) {

var j, origCount, tmp,
events, t, handleObj,
special, handlers, type, namespaces, origType,
// 通过内部缓存获取对象相关数据
elemData = jQuery.hasData( elem ) && jQuery._data( elem );

// 如果没有相关缓存数据，或者缓存中没有相关处理列表，则这个对象没事件可删除
if ( !elemData || !(events = elemData.events) ) {
// 退出
return;
}

// types可能是通过空格分隔的多个type，转成数组
types = ( types || "" ).match( core_rnotwhite ) || [""];
t = types.length;
// 遍历所有type
while ( t-- ) {
// 分解type和namespace
tmp = rtypenamespace.exec( types[t] ) || [];
// 得到type
type = origType = tmp[1];
// 得到namespace
namespaces = ( tmp[2] || "" ).split( "." ).sort();

// 如果type是undefined，即原来的type是.xxx.xxx之类的命名空间
if ( !type ) {
// 从事件列表读取所有事件
for ( type in events ) {
// 添加命名空间，删除掉这些事件
jQuery.event.remove( elem, type + types[ t ], handler, selector, true );
}
continue;
}

// 尝试得到特殊事件
special = jQuery.event.special[ type ] || {};
type = ( selector ? special.delegateType : special.bindType ) || type;
handlers = events[ type ] || [];
tmp = tmp[2] && new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" );

// 删除掉满足的事件
origCount = j = handlers.length;
while ( j-- ) {
// 得到事件对象
handleObj = handlers[ j ];

// 参数mappedTypes存在或当前事件和handleObj中的当前事件相同
if ( ( mappedTypes || origType === handleObj.origType ) &&
// 并且参数handler不存在，或handler的ID与handleObj的ID相同
( !handler || handler.guid === handleObj.guid ) &&
// 并且没有命名空间，或者是handleObj的命名空间子集
( !tmp || tmp.test( handleObj.namespace ) ) &&
// 并且没有selector，或者selector与handleObj的selector相同，