wardrobe/tm-vuetify/tool/function/crender/class/crender.class.js

import color from '../color'
import bezierCurve from '../bezier-curve'

import {
	deepClone
} from '../plugin/util'

import allGraph from '../config/graphs'

import Graph from './graph.class'


/**
 * @description           Class of CRender
 * @param {Object} canvas Canvas DOM
 * @return {CRender}      Instance of CRender
 */
export default class CRender {
	constructor(canvas, t, cav) {
		if (!canvas) {
			console.error('CRender Missing parameters!')

			return
		}
		if (cav) {
			this.cav = cav;
		} else {
			this.cav = null;
		}
		const ctx = canvas;
		this.t = t;
		// const { clientWidth, clientHeight } = canvas

		const area = [ctx.width, ctx.height]

		// canvas.setAttribute('width', clientWidth)
		// canvas.setAttribute('height', clientHeight)

		/**
		 * @description Context of the canvas
		 * @type {Object}
		 * @example ctx = canvas.getContext('2d')
		 */
		this.ctx = ctx
		/**
		 * @description Width and height of the canvas
		 * @type {Array}
		 * @example area = [300，100]
		 */
		this.area = area
		/**
		 * @description Whether render is in animation rendering
		 * @type {Boolean}
		 * @example animationStatus = true|false
		 */
		this.animationStatus = false
		/**
		 * @description Added graph
		 * @type {[Graph]}
		 * @example graphs = [Graph, Graph, ...]
		 */
		this.graphs = []
		/**
		 * @description Color plugin
		 * @type {Object}
		 * @link https://github.com/jiaming743/color
		 */
		this.color = color
		/**
		 * @description Bezier Curve plugin
		 * @type {Object}
		 * @link https://github.com/jiaming743/BezierCurve
		 */
		this.bezierCurve = bezierCurve
		// t.mousedown = mouseDown.bind(this);

		// bind event handler
		// canvas.addEventListener('mousedown', mouseDown.bind(this))
		// canvas.addEventListener('mousemove', mouseMove.bind(this))
		// canvas.addEventListener('mouseup', mouseUp.bind(this))
		// console.log(canvas);
	}
}

/**
 * @description        Clear canvas drawing area
 * @return {Undefined} Void
 */
CRender.prototype.clearArea = function() {
	const {
		area
	} = this

	this.ctx.clearRect(0, 0, ...area)
}

/**
 * @description           Add graph to render
 * @param {Object} config Graph configuration
 * @return {Graph}        Graph instance
 */
CRender.prototype.add = function(config = {}) {
	const {
		name
	} = config

	if (!name) {
		console.error('add Missing parameters!')

		return
	}

	const graphConfig = allGraph.get(name)

	if (!graphConfig) {
		console.warn('No corresponding graph configuration found!')

		return
	}

	const graph = new Graph(graphConfig, config)

	if (!graph.validator(graph, this.ctx)) return

	graph.render = this

	this.graphs.push(graph)

	this.sortGraphsByIndex()

	this.drawAllGraph()

	return graph
}

/**
 * @description Sort the graph by index
 * @return {Undefined} Void
 */
CRender.prototype.sortGraphsByIndex = function() {
	const {
		graphs
	} = this

	graphs.sort((a, b) => {
		if (a.index > b.index) return 1
		if (a.index === b.index) return 0
		if (a.index < b.index) return -1
	})
}

/**
 * @description         Delete graph in render
 * @param {Graph} graph The graph to be deleted
 * @return {Undefined}  Void
 */
CRender.prototype.delGraph = function(graph) {
	if (typeof graph.delProcessor !== 'function') return

	graph.delProcessor(this)

	this.graphs = this.graphs.filter(graph => graph)

	this.drawAllGraph()
}

/**
 * @description        Delete all graph in render
 * @return {Undefined} Void
 */
CRender.prototype.delAllGraph = function() {
	this.graphs.forEach(graph => graph.delProcessor(this))

	this.graphs = this.graphs.filter(graph => graph)

	this.drawAllGraph()
}

/**
 * @description        Draw all the graphs in the render
 * @return {Undefined} Void
 */
CRender.prototype.drawAllGraph = function() {
	this.clearArea()
	this.graphs.filter(graph => graph && graph.visible).forEach(graph => graph.drawProcessor(this, graph))

	if (this.ctx?.draw) {
		this.ctx.draw(true)
	}

}

/**
 * @description      Animate the graph whose animation queue is not empty
 *                   and the animationPause is equal to false
 * @return {Promise} Animation Promise
 */
CRender.prototype.launchAnimation = function() {
	const {
		animationStatus
	} = this

	if (animationStatus) return

	this.animationStatus = true

	return new Promise(resolve => {
		animation.call(this, () => {
			this.animationStatus = false

			resolve()
		}, Date.now())
	})
}

function requestAnimationFrame(callback) {
	// var now = Date.now();
	// var lastTime = 0;
	// var nextTime = Math.max(lastTime + 16, now);
	// // var idd=555
	// // clearTimeout(idd)
	// return new Promise(resolve=>setTimeout(function() { callback(resolve(lastTime = nextTime)); },nextTime - now));
	let lastFrameTime = 0
	var currTime = new Date().getTime();
	var timeToCall = Math.max(0, 16 - (currTime - lastFrameTime));
	var id = setTimeout(function() {
		callback(currTime + timeToCall);
	}, timeToCall);
	lastFrameTime = currTime + timeToCall;
	return id;

};

/**
 * @description Try to animate every graph
 * @param {Function} callback Callback in animation end
 * @param {Number} timeStamp  Time stamp of animation start
 * @return {Undefined} Void
 */
function animation(callback, timeStamp) {
	const {
		graphs
	} = this

	if (!animationAble(graphs)) {
		callback()

		return
	}

	graphs.forEach(graph => graph.turnNextAnimationFrame(timeStamp))

	this.drawAllGraph()

	// #ifdef H5
	window.requestAnimationFrame(animation.bind(this, callback, timeStamp));
	// #endif
	// #ifndef H5
	if (this.cav) {
		this.cav.requestAnimationFrame(animation.bind(this, callback, timeStamp));

	} else {
		requestAnimationFrame(animation.bind(this, callback, timeStamp))
	}

	// #endif

}


/**
 * @description Find if there are graph that can be animated
 * @param {[Graph]} graphs
 * @return {Boolean}
 */
function animationAble(graphs) {
	return graphs.find(graph => !graph.animationPause && graph.animationFrameState.length)
}
CRender.prototype.animateAble = function(graphs) {

	return this.graphs.find(graph => !graph.animationPause && graph.animationFrameState.length)
}
/**
 * @description Handler of CRender mousedown event
 * @return {Undefined} Void
 */
function mouseDown(e) {
	const {
		graphs
	} = this
	const hoverGraph = graphs.find(graph => graph.status === 'hover')

	if (!hoverGraph) return

	hoverGraph.status = 'active'
}

/**
 * @description Handler of CRender mousemove event
 * @return {Undefined} Void
 */
function mouseMove(e) {
	const {
		offsetX,
		offsetY
	} = e
	const position = [offsetX, offsetY]

	const {
		graphs
	} = this

	const activeGraph = graphs.find(graph => (graph.status === 'active' || graph.status === 'drag'))

	if (activeGraph) {
		if (!activeGraph.drag) return

		if (typeof activeGraph.move !== 'function') {
			console.error('No move method is provided, cannot be dragged!')

			return
		}

		activeGraph.moveProcessor(e)

		activeGraph.status = 'drag'

		return
	}

	const hoverGraph = graphs.find(graph => graph.status === 'hover')

	const hoverAbleGraphs = graphs.filter(graph =>
		(graph.hover && (typeof graph.hoverCheck === 'function' || graph.hoverRect)))

	const hoveredGraph = hoverAbleGraphs.find(graph => graph.hoverCheckProcessor(position, graph))

	if (hoveredGraph) {
		document.body.style.cursor = hoveredGraph.style.hoverCursor
	} else {
		document.body.style.cursor = 'default'
	}

	let [hoverGraphMouseOuterIsFun, hoveredGraphMouseEnterIsFun] = [false, false]

	if (hoverGraph) hoverGraphMouseOuterIsFun = typeof hoverGraph.mouseOuter === 'function'
	if (hoveredGraph) hoveredGraphMouseEnterIsFun = typeof hoveredGraph.mouseEnter === 'function'

	if (!hoveredGraph && !hoverGraph) return

	if (!hoveredGraph && hoverGraph) {
		if (hoverGraphMouseOuterIsFun) hoverGraph.mouseOuter(e, hoverGraph)

		hoverGraph.status = 'static'

		return
	}

	if (hoveredGraph && hoveredGraph === hoverGraph) return

	if (hoveredGraph && !hoverGraph) {
		if (hoveredGraphMouseEnterIsFun) hoveredGraph.mouseEnter(e, hoveredGraph)

		hoveredGraph.status = 'hover'

		return
	}

	if (hoveredGraph && hoverGraph && hoveredGraph !== hoverGraph) {
		if (hoverGraphMouseOuterIsFun) hoverGraph.mouseOuter(e, hoverGraph)

		hoverGraph.status = 'static'

		if (hoveredGraphMouseEnterIsFun) hoveredGraph.mouseEnter(e, hoveredGraph)

		hoveredGraph.status = 'hover'
	}
}

/**
 * @description Handler of CRender mouseup event
 * @return {Undefined} Void
 */
function mouseUp(e) {
	const {
		graphs
	} = this

	const activeGraph = graphs.find(graph => graph.status === 'active')
	const dragGraph = graphs.find(graph => graph.status === 'drag')

	if (activeGraph && typeof activeGraph.click === 'function') activeGraph.click(e, activeGraph)

	graphs.forEach(graph => graph && (graph.status = 'static'))

	if (activeGraph) activeGraph.status = 'hover'
	if (dragGraph) dragGraph.status = 'hover'
}

/**
 * @description         Clone Graph
 * @param {Graph} graph The target to be cloned
 * @return {Graph}      Cloned graph
 */
CRender.prototype.clone = function(graph) {
	const style = graph.style.getStyle()

	let clonedGraph = {
		...graph,
		style
	}

	delete clonedGraph.render

	clonedGraph = deepClone(clonedGraph, true)

	return this.add(clonedGraph)
}

function putImageData(ctx, imageData, dx, dy,
	dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
	var data = imageData.data;
	var height = imageData.height;
	var width = imageData.width;

	dirtyX = dirtyX || 0;
	dirtyY = dirtyY || 0;
	dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;
	dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;
	var limitBottom = dirtyY + dirtyHeight;
	var limitRight = dirtyX + dirtyWidth;
	ctx.save()
	ctx.scale(ctx.scaledpr, ctx.scaledpr)
	for (var y = dirtyY; y < limitBottom; y++) {
		for (var x = dirtyX; x < limitRight; x++) {
			var pos = y * width + x;
			ctx.fillStyle = 'rgba(' + data[pos * 4 + 0] +
				',' + data[pos * 4 + 1] +
				',' + data[pos * 4 + 2] +
				',' + (data[pos * 4 + 3] / 255) + ')';
			ctx.fillRect(x + dx, y + dy, 1, 1);
		}
	}
	ctx.restore()
}




CRender.prototype.getImageData = function(x, y, w, h) {
	let t = this;
	let dpr = 1;
	// #ifndef H5
	dpr = t.ctx.dpr;
	console.log(dpr);
	// #endif
	return new Promise((rs, rj) => {
		if (t.ctx.getImageData) {
			var data = t.ctx.getImageData(x, y, w * dpr, h * dpr)
			rs(data);

		} else {
			// #ifdef APP-VUE || APP-PLUS
			uni.canvasGetImageData({
				canvasId: t.ctx.id,
				x: x,
				y: y,
				width: w,
				height: h,
				success: (res) => rs(res),
				fail: (e) => rj(e)
			}, t.t)
			// #endif
			// #ifndef APP-VUE || APP-PLUS
			uni.canvasGetImageData({
				canvasId: t.ctx.id,
				x: x,
				y: y,
				width: w,
				height: h,
				success: (res) => rs(res),
				fail: (e) => rj(e)
			}, t.t)
			// #endif
		}
	})
}
CRender.prototype.putImageData = function(x, y, w, h, data) {
	let t = this;
	let dpr = 1;
	// #ifndef H5
	dpr = t.ctx.dpr;
	// #endif
	t.ctx.clearRect(0, 0, w, h);
	uni.showLoading({
		title: '...',
		mask: true
	})

	return new Promise((rs, rj) => {

		if (t.ctx.putImageData) {
			setTimeout(function() {
				putImageData(t.ctx, data, x, y, 0, 0, w * dpr, h * dpr);
				rs();
				uni.hideLoading()
			}, 50);
		} else {

			uni.canvasPutImageData({
				canvasId: t.ctx.id,
				x: x,
				y: y,
				width: w,
				height: h,
				data: data.data,
				success: (res) => rs(),
				fail: (e) => rj(e),
				complete: () => uni.hideLoading()
			}, t.t)
		}
	})
}
// Filters图像效果控制。
/**
 * 移植自https://konvajs.org/
 * 移植作者：https://jx2d.cn
 */

/**
 * 模糊图片
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 * @param {Object} blurRadius
 * @param {Object} type = rgba|rgb
 */
CRender.prototype.Blur = function(x, y, w, h, blurRadius, type = 'rgba') {
	var t = this;

	/*
	StackBlur - a fast almost Gaussian Blur For Canvas
	Version: 	0.5
	Author:		Mario Klingemann
	Contact: 	mario@quasimondo.com
	Website:	http://www.quasimondo.com/StackBlurForCanvas
	Twitter:	@quasimondo
	In case you find this class useful - especially in commercial projects -
	I am not totally unhappy for a small donation to my PayPal account
	mario@quasimondo.de
	Or support me on flattr: 
	https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript
	Copyright (c) 2010 Mario Klingemann
	Permission is hereby granted, free of charge, to any person
	obtaining a copy of this software and associated documentation
	files (the "Software"), to deal in the Software without
	restriction, including without limitation the rights to use,
	copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the
	Software is furnished to do so, subject to the following
	conditions:
	The above copyright notice and this permission notice shall be
	included in all copies or substantial portions of the Software.
	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
	EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
	OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
	NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
	HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
	WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
	FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
	OTHER DEALINGS IN THE SOFTWARE.
	*/
	let dpr = 1;
	// #ifndef H5
	dpr = t.ctx.dpr;
	// #endif
	var mul_table = [
		512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512,
		454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512,
		482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456,
		437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512,
		497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328,
		320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456,
		446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335,
		329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512,
		505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405,
		399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328,
		324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271,
		268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456,
		451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388,
		385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335,
		332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292,
		289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259
	];


	var shg_table = [
		9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17,
		17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
		19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20,
		20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21,
		21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
		21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22,
		22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
		22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23,
		23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
		23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
		23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
		23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
		24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
		24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
		24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
		24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24
	];



	function stackBlurCanvasRGBA(imageData, top_x, top_y, width, height, radius) {


		var pixels = imageData.data;

		var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum,
			r_out_sum, g_out_sum, b_out_sum, a_out_sum,
			r_in_sum, g_in_sum, b_in_sum, a_in_sum,
			pr, pg, pb, pa, rbs;

		var div = radius + radius + 1;
		var w4 = width << 2;
		var widthMinus1 = width - 1;
		var heightMinus1 = height - 1;
		var radiusPlus1 = radius + 1;
		var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;

		var stackStart = new BlurStack();
		var stack = stackStart;
		for (i = 1; i < div; i++) {
			stack = stack.next = new BlurStack();
			if (i == radiusPlus1) var stackEnd = stack;
		}
		stack.next = stackStart;
		var stackIn = null;
		var stackOut = null;

		yw = yi = 0;

		var mul_sum = mul_table[radius];
		var shg_sum = shg_table[radius];

		for (y = 0; y < height; y++) {
			r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;

			r_out_sum = radiusPlus1 * (pr = pixels[yi]);
			g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
			b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);
			a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);

			r_sum += sumFactor * pr;
			g_sum += sumFactor * pg;
			b_sum += sumFactor * pb;
			a_sum += sumFactor * pa;

			stack = stackStart;

			for (i = 0; i < radiusPlus1; i++) {
				stack.r = pr;
				stack.g = pg;
				stack.b = pb;
				stack.a = pa;
				stack = stack.next;
			}

			for (i = 1; i < radiusPlus1; i++) {
				p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
				r_sum += (stack.r = (pr = pixels[p])) * (rbs = radiusPlus1 - i);
				g_sum += (stack.g = (pg = pixels[p + 1])) * rbs;
				b_sum += (stack.b = (pb = pixels[p + 2])) * rbs;
				a_sum += (stack.a = (pa = pixels[p + 3])) * rbs;

				r_in_sum += pr;
				g_in_sum += pg;
				b_in_sum += pb;
				a_in_sum += pa;

				stack = stack.next;
			}


			stackIn = stackStart;
			stackOut = stackEnd;
			for (x = 0; x < width; x++) {
				pixels[yi + 3] = pa = (a_sum * mul_sum) >> shg_sum;
				if (pa != 0) {
					pa = 255 / pa;
					pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa;
					pixels[yi + 1] = ((g_sum * mul_sum) >> shg_sum) * pa;
					pixels[yi + 2] = ((b_sum * mul_sum) >> shg_sum) * pa;
				} else {
					pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0;
				}

				r_sum -= r_out_sum;
				g_sum -= g_out_sum;
				b_sum -= b_out_sum;
				a_sum -= a_out_sum;

				r_out_sum -= stackIn.r;
				g_out_sum -= stackIn.g;
				b_out_sum -= stackIn.b;
				a_out_sum -= stackIn.a;

				p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2;

				r_in_sum += (stackIn.r = pixels[p]);
				g_in_sum += (stackIn.g = pixels[p + 1]);
				b_in_sum += (stackIn.b = pixels[p + 2]);
				a_in_sum += (stackIn.a = pixels[p + 3]);

				r_sum += r_in_sum;
				g_sum += g_in_sum;
				b_sum += b_in_sum;
				a_sum += a_in_sum;

				stackIn = stackIn.next;

				r_out_sum += (pr = stackOut.r);
				g_out_sum += (pg = stackOut.g);
				b_out_sum += (pb = stackOut.b);
				a_out_sum += (pa = stackOut.a);

				r_in_sum -= pr;
				g_in_sum -= pg;
				b_in_sum -= pb;
				a_in_sum -= pa;

				stackOut = stackOut.next;

				yi += 4;
			}
			yw += width;
		}


		for (x = 0; x < width; x++) {
			g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;

			yi = x << 2;
			r_out_sum = radiusPlus1 * (pr = pixels[yi]);
			g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
			b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);
			a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);

			r_sum += sumFactor * pr;
			g_sum += sumFactor * pg;
			b_sum += sumFactor * pb;
			a_sum += sumFactor * pa;

			stack = stackStart;

			for (i = 0; i < radiusPlus1; i++) {
				stack.r = pr;
				stack.g = pg;
				stack.b = pb;
				stack.a = pa;
				stack = stack.next;
			}

			yp = width;

			for (i = 1; i <= radius; i++) {
				yi = (yp + x) << 2;

				r_sum += (stack.r = (pr = pixels[yi])) * (rbs = radiusPlus1 - i);
				g_sum += (stack.g = (pg = pixels[yi + 1])) * rbs;
				b_sum += (stack.b = (pb = pixels[yi + 2])) * rbs;
				a_sum += (stack.a = (pa = pixels[yi + 3])) * rbs;

				r_in_sum += pr;
				g_in_sum += pg;
				b_in_sum += pb;
				a_in_sum += pa;

				stack = stack.next;

				if (i < heightMinus1) {
					yp += width;
				}
			}

			yi = x;
			stackIn = stackStart;
			stackOut = stackEnd;
			for (y = 0; y < height; y++) {
				p = yi << 2;
				pixels[p + 3] = pa = (a_sum * mul_sum) >> shg_sum;
				if (pa > 0) {
					pa = 255 / pa;
					pixels[p] = ((r_sum * mul_sum) >> shg_sum) * pa;
					pixels[p + 1] = ((g_sum * mul_sum) >> shg_sum) * pa;
					pixels[p + 2] = ((b_sum * mul_sum) >> shg_sum) * pa;
				} else {
					pixels[p] = pixels[p + 1] = pixels[p + 2] = 0;
				}

				r_sum -= r_out_sum;
				g_sum -= g_out_sum;
				b_sum -= b_out_sum;
				a_sum -= a_out_sum;

				r_out_sum -= stackIn.r;
				g_out_sum -= stackIn.g;
				b_out_sum -= stackIn.b;
				a_out_sum -= stackIn.a;

				p = (x + (((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width)) << 2;

				r_sum += (r_in_sum += (stackIn.r = pixels[p]));
				g_sum += (g_in_sum += (stackIn.g = pixels[p + 1]));
				b_sum += (b_in_sum += (stackIn.b = pixels[p + 2]));
				a_sum += (a_in_sum += (stackIn.a = pixels[p + 3]));

				stackIn = stackIn.next;

				r_out_sum += (pr = stackOut.r);
				g_out_sum += (pg = stackOut.g);
				b_out_sum += (pb = stackOut.b);
				a_out_sum += (pa = stackOut.a);

				r_in_sum -= pr;
				g_in_sum -= pg;
				b_in_sum -= pb;
				a_in_sum -= pa;

				stackOut = stackOut.next;

				yi += width;
			}
		}

		return pixels;

	}


	function stackBlurCanvasRGB(imageData, top_x, top_y, width, height, radius) {


		var pixels = imageData.data;

		var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum,
			r_out_sum, g_out_sum, b_out_sum,
			r_in_sum, g_in_sum, b_in_sum,
			pr, pg, pb, rbs;

		var div = radius + radius + 1;
		var w4 = width << 2;
		var widthMinus1 = width - 1;
		var heightMinus1 = height - 1;
		var radiusPlus1 = radius + 1;
		var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;

		var stackStart = new BlurStack();
		var stack = stackStart;
		for (i = 1; i < div; i++) {
			stack = stack.next = new BlurStack();
			if (i == radiusPlus1) var stackEnd = stack;
		}
		stack.next = stackStart;
		var stackIn = null;
		var stackOut = null;

		yw = yi = 0;

		var mul_sum = mul_table[radius];
		var shg_sum = shg_table[radius];

		for (y = 0; y < height; y++) {
			r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0;

			r_out_sum = radiusPlus1 * (pr = pixels[yi]);
			g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
			b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);

			r_sum += sumFactor * pr;
			g_sum += sumFactor * pg;
			b_sum += sumFactor * pb;

			stack = stackStart;

			for (i = 0; i < radiusPlus1; i++) {
				stack.r = pr;
				stack.g = pg;
				stack.b = pb;
				stack = stack.next;
			}

			for (i = 1; i < radiusPlus1; i++) {
				p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
				r_sum += (stack.r = (pr = pixels[p])) * (rbs = radiusPlus1 - i);
				g_sum += (stack.g = (pg = pixels[p + 1])) * rbs;
				b_sum += (stack.b = (pb = pixels[p + 2])) * rbs;

				r_in_sum += pr;
				g_in_sum += pg;
				b_in_sum += pb;

				stack = stack.next;
			}


			stackIn = stackStart;
			stackOut = stackEnd;
			for (x = 0; x < width; x++) {
				pixels[yi] = (r_sum * mul_sum) >> shg_sum;
				pixels[yi + 1] = (g_sum * mul_sum) >> shg_sum;
				pixels[yi + 2] = (b_sum * mul_sum) >> shg_sum;

				r_sum -= r_out_sum;
				g_sum -= g_out_sum;
				b_sum -= b_out_sum;

				r_out_sum -= stackIn.r;
				g_out_sum -= stackIn.g;
				b_out_sum -= stackIn.b;

				p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2;

				r_in_sum += (stackIn.r = pixels[p]);
				g_in_sum += (stackIn.g = pixels[p + 1]);
				b_in_sum += (stackIn.b = pixels[p + 2]);

				r_sum += r_in_sum;
				g_sum += g_in_sum;
				b_sum += b_in_sum;

				stackIn = stackIn.next;

				r_out_sum += (pr = stackOut.r);
				g_out_sum += (pg = stackOut.g);
				b_out_sum += (pb = stackOut.b);

				r_in_sum -= pr;
				g_in_sum -= pg;
				b_in_sum -= pb;

				stackOut = stackOut.next;

				yi += 4;
			}
			yw += width;
		}


		for (x = 0; x < width; x++) {
			g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0;

			yi = x << 2;
			r_out_sum = radiusPlus1 * (pr = pixels[yi]);
			g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
			b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);

			r_sum += sumFactor * pr;
			g_sum += sumFactor * pg;
			b_sum += sumFactor * pb;

			stack = stackStart;

			for (i = 0; i < radiusPlus1; i++) {
				stack.r = pr;
				stack.g = pg;
				stack.b = pb;
				stack = stack.next;
			}

			yp = width;

			for (i = 1; i <= radius; i++) {
				yi = (yp + x) << 2;

				r_sum += (stack.r = (pr = pixels[yi])) * (rbs = radiusPlus1 - i);
				g_sum += (stack.g = (pg = pixels[yi + 1])) * rbs;
				b_sum += (stack.b = (pb = pixels[yi + 2])) * rbs;

				r_in_sum += pr;
				g_in_sum += pg;
				b_in_sum += pb;

				stack = stack.next;

				if (i < heightMinus1) {
					yp += width;
				}
			}

			yi = x;
			stackIn = stackStart;
			stackOut = stackEnd;
			for (y = 0; y < height; y++) {
				p = yi << 2;
				pixels[p] = (r_sum * mul_sum) >> shg_sum;
				pixels[p + 1] = (g_sum * mul_sum) >> shg_sum;
				pixels[p + 2] = (b_sum * mul_sum) >> shg_sum;

				r_sum -= r_out_sum;
				g_sum -= g_out_sum;
				b_sum -= b_out_sum;

				r_out_sum -= stackIn.r;
				g_out_sum -= stackIn.g;
				b_out_sum -= stackIn.b;

				p = (x + (((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width)) << 2;

				r_sum += (r_in_sum += (stackIn.r = pixels[p]));
				g_sum += (g_in_sum += (stackIn.g = pixels[p + 1]));
				b_sum += (b_in_sum += (stackIn.b = pixels[p + 2]));

				stackIn = stackIn.next;

				r_out_sum += (pr = stackOut.r);
				g_out_sum += (pg = stackOut.g);
				b_out_sum += (pb = stackOut.b);

				r_in_sum -= pr;
				g_in_sum -= pg;
				b_in_sum -= pb;

				stackOut = stackOut.next;

				yi += width;
			}
		}

		return pixels;

	}

	function BlurStack() {
		this.r = 0;
		this.g = 0;
		this.b = 0;
		this.a = 0;
		this.next = null;
	}


	var b = Math.round(blurRadius);


	return this.getImageData(x, y, w, h).then((res) => {
		var data;
		if (type == 'rgb') {
			data = stackBlurCanvasRGB(res, x, y, w * dpr, h * dpr, b);
		} else {
			data = stackBlurCanvasRGBA(res, x, y, w * dpr, h * dpr, b);
		}
		console.log(res.height);
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))

}


/**
 * 使图像反色,类似底片
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 */
CRender.prototype.ColorInvert = function(x, y, w, h) {
	let t = this;
	return this.getImageData(x, y, w, h).then((res) => {
		var data = res.data;
		for (var i = 0; i < res.data.length; i += 4) {
			var r = data[i];
			var g = data[i + 1];
			var b = data[i + 2];

			data[i] = 255 - r;
			data[i + 1] = 255 - g;
			data[i + 2] = 255 - b;
		}
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))

}


/**
 * 灰度图片。
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 */
CRender.prototype.Grayscale = function(x, y, w, h) {
	let t = this;

	return this.getImageData(x, y, w, h).then((res) => {
		// 0.34，0.5，0.16为加权的权重。可适当调整。
		var data = res.data,
			len = data.length,
			i, brightness;
		for (i = 0; i < len; i += 4) {
			brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
			data[i] = brightness;
			data[i + 1] = brightness;
			data[i + 2] = brightness;
		}

		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))


}


/**
 * 调整图片的明暗度。
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 * @param {Object} brightness -1~1,小于0为暗，大于1为亮。0为正常。
 */
CRender.prototype.Brighten = function(x, y, w, h, brightness) {
	let t = this;

	return this.getImageData(x, y, w, h).then((res) => {
		// 0.34，0.5，0.16为加权的权重。可适当调整。
		brightness = brightness * 255
		var data = res.data,
			len = data.length,
			i;
		for (i = 0; i < len; i += 4) {
			data[i] += brightness;
			data[i + 1] += brightness;
			data[i + 2] += brightness;
		}
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))


}


/**
 * 调整图片对比度。
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 * @param {Object} brightness -100~100
 */
CRender.prototype.Contrast = function(x, y, w, h, brightness) {
	let t = this;
	return this.getImageData(x, y, w, h).then((res) => {
		var adjust = Math.pow((brightness + 100) / 100, 2);
		var data = res.data,
			nPixels = data.length,
			red = 150,
			green = 150,
			blue = 150,
			i;
		for (i = 0; i < nPixels; i += 4) {
			red = data[i];
			green = data[i + 1];
			blue = data[i + 2];
			red /= 255;
			red -= 0.5;
			red *= adjust;
			red += 0.5;
			red *= 255;
			green /= 255;
			green -= 0.5;
			green *= adjust;
			green += 0.5;
			green *= 255;
			blue /= 255;
			blue -= 0.5;
			blue *= adjust;
			blue += 0.5;
			blue *= 255;
			red = red < 0 ? 0 : red > 255 ? 255 : red;
			green = green < 0 ? 0 : green > 255 ? 255 : green;
			blue = blue < 0 ? 0 : blue > 255 ? 255 : blue;
			data[i] = red;
			data[i + 1] = green;
			data[i + 2] = blue;
		}
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))


}

/**
 * 浮雕
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 * @param {Object} embossStrength 浮雕强度 0~1,0为正常。
 * @param {Object} embossWhiteLevel 黑白对比强度0~1
 * @param {Object} embossDirection 浮雕的方向。top,top-left,top-right,left,right,bottom,bottom-left,bottom-right
 * @param {Object} embossBlend 是否显示黑白浮雕
 */
CRender.prototype.Emboss = function(x, y, w, h, embossStrength = 0.5, embossWhiteLevel = 0.5, embossDirection =
	"top-right", embossBlend = false) {
	let t = this;
	return this.getImageData(x, y, w, h).then((res) => {
		var strength = embossStrength * 10,
			greyLevel = embossWhiteLevel * 255,
			direction = embossDirection,
			blend = !embossBlend,
			dirY = 0,
			dirX = 0,
			data = res.data,
			w = res.width,
			h = res.height,
			w4 = w * 4,
			y = h;
		switch (direction) {
			case 'top-left':
				dirY = -1;
				dirX = -1;
				break;
			case 'top':
				dirY = -1;
				dirX = 0;
				break;
			case 'top-right':
				dirY = -1;
				dirX = 1;
				break;
			case 'right':
				dirY = 0;
				dirX = 1;
				break;
			case 'bottom-right':
				dirY = 1;
				dirX = 1;
				break;
			case 'bottom':
				dirY = 1;
				dirX = 0;
				break;
			case 'bottom-left':
				dirY = 1;
				dirX = -1;
				break;
			case 'left':
				dirY = 0;
				dirX = -1;
				break;
			default:
				Util_1.Util.error('Unknown emboss direction: ' + direction);
		}
		do {
			var offsetY = (y - 1) * w4;
			var otherY = dirY;
			if (y + otherY < 1) {
				otherY = 0;
			}
			if (y + otherY > h) {
				otherY = 0;
			}
			var offsetYOther = (y - 1 + otherY) * w * 4;
			var x = w;
			do {
				var offset = offsetY + (x - 1) * 4;
				var otherX = dirX;
				if (x + otherX < 1) {
					otherX = 0;
				}
				if (x + otherX > w) {
					otherX = 0;
				}
				var offsetOther = offsetYOther + (x - 1 + otherX) * 4;
				var dR = data[offset] - data[offsetOther];
				var dG = data[offset + 1] - data[offsetOther + 1];
				var dB = data[offset + 2] - data[offsetOther + 2];
				var dif = dR;
				var absDif = dif > 0 ? dif : -dif;
				var absG = dG > 0 ? dG : -dG;
				var absB = dB > 0 ? dB : -dB;
				if (absG > absDif) {
					dif = dG;
				}
				if (absB > absDif) {
					dif = dB;
				}
				dif *= strength;
				if (blend) {
					var r = data[offset] + dif;
					var g = data[offset + 1] + dif;
					var b = data[offset + 2] + dif;
					data[offset] = r > 255 ? 255 : r < 0 ? 0 : r;
					data[offset + 1] = g > 255 ? 255 : g < 0 ? 0 : g;
					data[offset + 2] = b > 255 ? 255 : b < 0 ? 0 : b;
				} else {
					var grey = greyLevel - dif;
					if (grey < 0) {
						grey = 0;
					} else if (grey > 255) {
						grey = 255;
					}
					data[offset] = data[offset + 1] = data[offset + 2] = grey;
				}
			} while (--x);
		} while (--y);
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))


}

/**
 * 提高饱和度
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 * @param {Object} enhance -1~1
 */
CRender.prototype.Enhance = function(x, y, w, h, enhance) {
	let t = this;

	return this.getImageData(x, y, w, h).then((res) => {
		function remap(fromValue, fromMin, fromMax, toMin, toMax) {
			var fromRange = fromMax - fromMin,
				toRange = toMax - toMin,
				toValue;
			if (fromRange === 0) {
				return toMin + toRange / 2;
			}
			if (toRange === 0) {
				return toMin;
			}
			toValue = (fromValue - fromMin) / fromRange;
			toValue = toRange * toValue + toMin;
			return toValue;
		}
		var data = res.data,
			nSubPixels = data.length,
			rMin = data[0],
			rMax = rMin,
			r, gMin = data[1],
			gMax = gMin,
			g, bMin = data[2],
			bMax = bMin,
			b, i;
		var enhanceAmount = enhance;
		if (enhanceAmount === 0) {
			return;
		}
		for (i = 0; i < nSubPixels; i += 4) {
			r = data[i + 0];
			if (r < rMin) {
				rMin = r;
			} else if (r > rMax) {
				rMax = r;
			}
			g = data[i + 1];
			if (g < gMin) {
				gMin = g;
			} else if (g > gMax) {
				gMax = g;
			}
			b = data[i + 2];
			if (b < bMin) {
				bMin = b;
			} else if (b > bMax) {
				bMax = b;
			}
		}
		if (rMax === rMin) {
			rMax = 255;
			rMin = 0;
		}
		if (gMax === gMin) {
			gMax = 255;
			gMin = 0;
		}
		if (bMax === bMin) {
			bMax = 255;
			bMin = 0;
		}
		var rMid, rGoalMax, rGoalMin, gMid, gGoalMax, gGoalMin, bMid, bGoalMax, bGoalMin;
		if (enhanceAmount > 0) {
			rGoalMax = rMax + enhanceAmount * (255 - rMax);
			rGoalMin = rMin - enhanceAmount * (rMin - 0);
			gGoalMax = gMax + enhanceAmount * (255 - gMax);
			gGoalMin = gMin - enhanceAmount * (gMin - 0);
			bGoalMax = bMax + enhanceAmount * (255 - bMax);
			bGoalMin = bMin - enhanceAmount * (bMin - 0);
		} else {
			rMid = (rMax + rMin) * 0.5;
			rGoalMax = rMax + enhanceAmount * (rMax - rMid);
			rGoalMin = rMin + enhanceAmount * (rMin - rMid);
			gMid = (gMax + gMin) * 0.5;
			gGoalMax = gMax + enhanceAmount * (gMax - gMid);
			gGoalMin = gMin + enhanceAmount * (gMin - gMid);
			bMid = (bMax + bMin) * 0.5;
			bGoalMax = bMax + enhanceAmount * (bMax - bMid);
			bGoalMin = bMin + enhanceAmount * (bMin - bMid);
		}
		for (i = 0; i < nSubPixels; i += 4) {
			data[i + 0] = remap(data[i + 0], rMin, rMax, rGoalMin, rGoalMax);
			data[i + 1] = remap(data[i + 1], gMin, gMax, gGoalMin, gGoalMax);
			data[i + 2] = remap(data[i + 2], bMin, bMax, bGoalMin, bGoalMax);
		}
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))




}


/**
 * 通过HSL调整图像
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 * @param {Object} hue 色相 0~259
 * @param {Object} saturation 饱和度 -2~10
 * @param {Object} luminance 明暗 -2~2
 */
CRender.prototype.HSL = function(x, y, w, h, hue = 100, saturation = 5, luminance = 0) {
	let t = this;
	return this.getImageData(x, y, w, h).then((res) => {
		var data = res.data,
			nPixels = data.length,
			v = 1,
			s = Math.pow(2, saturation),
			h = Math.abs(hue + 360) % 360,
			l = luminance * 127,
			i;
		var vsu = v * s * Math.cos((h * Math.PI) / 180),
			vsw = v * s * Math.sin((h * Math.PI) / 180);
		var rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
			rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw,
			rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
		var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
			gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw,
			gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
		var br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,
			bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,
			bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;
		var r, g, b, a;
		for (i = 0; i < nPixels; i += 4) {
			r = data[i + 0];
			g = data[i + 1];
			b = data[i + 2];
			a = data[i + 3];
			data[i + 0] = rr * r + rg * g + rb * b + l;
			data[i + 1] = gr * r + gg * g + gb * b + l;
			data[i + 2] = br * r + bg * g + bb * b + l;
			data[i + 3] = a;
		}
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))

}

/**
 * 调整图像hsv
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 * @param {Object} hue 色相 0~259
 * @param {Object} saturation 饱和度 -2~10
 * @param {Object} value 明暗 -2~2
 */
CRender.prototype.HSV = function(x, y, w, h, hue = 150, saturation = 0, value = 0) {
	let t = this;
	return this.getImageData(x, y, w, h).then((res) => {
		var data = res.data,
			nPixels = data.length,
			v = Math.pow(2, value),
			s = Math.pow(2, saturation),
			h = Math.abs(hue + 360) % 360,
			i;
		var vsu = v * s * Math.cos((h * Math.PI) / 180),
			vsw = v * s * Math.sin((h * Math.PI) / 180);
		var rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,
			rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw,
			rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;
		var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,
			gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw,
			gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;
		var br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,
			bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,
			bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;
		var r, g, b, a;
		for (i = 0; i < nPixels; i += 4) {
			r = data[i + 0];
			g = data[i + 1];
			b = data[i + 2];
			a = data[i + 3];
			data[i + 0] = rr * r + rg * g + rb * b;
			data[i + 1] = gr * r + gg * g + gb * b;
			data[i + 2] = br * r + bg * g + bb * b;
			data[i + 3] = a;
		}
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))

}

/**
 * 调整图像rgb通道
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 * @param {Object} r
 * @param {Object} g
 * @param {Object} b
 */
CRender.prototype.RGB = function(x, y, w, h, r = 0, g = 100, b = 30) {
	let t = this;
	return this.getImageData(x, y, w, h).then((res) => {
		var data = res.data,
			nPixels = data.length,
			red = r,
			green = g,
			blue = b,
			i, brightness;
		for (i = 0; i < nPixels; i += 4) {
			brightness =
				(0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]) / 255;
			data[i] = brightness * red;
			data[i + 1] = brightness * green;
			data[i + 2] = brightness * blue;
			data[i + 3] = data[i + 3];
		}
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))

}

/**
 * 使图像色彩反相
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 */
CRender.prototype.Invert = function(x, y, w, h) {
	let t = this;
	return this.getImageData(x, y, w, h).then((res) => {
		var data = res.data,
			len = data.length,
			i;
		for (i = 0; i < len; i += 4) {
			data[i] = 255 - data[i];
			data[i + 1] = 255 - data[i + 1];
			data[i + 2] = 255 - data[i + 2];
		}
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))

}

function pixelAt(idata, x, y) {
	var idx = (y * idata.width + x) * 4;
	var d = [];
	d.push(idata.data[idx++], idata.data[idx++], idata.data[idx++], idata.data[idx++]);
	return d;
}

function rgbDistance(p1, p2) {
	return Math.sqrt(Math.pow(p1[0] - p2[0], 2) +
		Math.pow(p1[1] - p2[1], 2) +
		Math.pow(p1[2] - p2[2], 2));
}

function rgbMean(pTab) {
	var m = [0, 0, 0];
	for (var i = 0; i < pTab.length; i++) {
		m[0] += pTab[i][0];
		m[1] += pTab[i][1];
		m[2] += pTab[i][2];
	}
	m[0] /= pTab.length;
	m[1] /= pTab.length;
	m[2] /= pTab.length;
	return m;
}

function backgroundMask(idata, threshold) {
	var rgbv_no = pixelAt(idata, 0, 0);
	var rgbv_ne = pixelAt(idata, idata.width - 1, 0);
	var rgbv_so = pixelAt(idata, 0, idata.height - 1);
	var rgbv_se = pixelAt(idata, idata.width - 1, idata.height - 1);
	var thres = threshold || 10;
	if (rgbDistance(rgbv_no, rgbv_ne) < thres &&
		rgbDistance(rgbv_ne, rgbv_se) < thres &&
		rgbDistance(rgbv_se, rgbv_so) < thres &&
		rgbDistance(rgbv_so, rgbv_no) < thres) {
		var mean = rgbMean([rgbv_ne, rgbv_no, rgbv_se, rgbv_so]);
		var mask = [];
		for (var i = 0; i < idata.width * idata.height; i++) {
			var d = rgbDistance(mean, [
				idata.data[i * 4],
				idata.data[i * 4 + 1],
				idata.data[i * 4 + 2],
			]);
			mask[i] = d < thres ? 0 : 255;
		}
		return mask;
	}
}

function applyMask(idata, mask) {
	for (var i = 0; i < idata.width * idata.height; i++) {
		idata.data[4 * i + 3] = mask[i];
	}
}

function erodeMask(mask, sw, sh) {
	var weights = [1, 1, 1, 1, 0, 1, 1, 1, 1];
	var side = Math.round(Math.sqrt(weights.length));
	var halfSide = Math.floor(side / 2);
	var maskResult = [];
	for (var y = 0; y < sh; y++) {
		for (var x = 0; x < sw; x++) {
			var so = y * sw + x;
			var a = 0;
			for (var cy = 0; cy < side; cy++) {
				for (var cx = 0; cx < side; cx++) {
					var scy = y + cy - halfSide;
					var scx = x + cx - halfSide;
					if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
						var srcOff = scy * sw + scx;
						var wt = weights[cy * side + cx];
						a += mask[srcOff] * wt;
					}
				}
			}
			maskResult[so] = a === 255 * 8 ? 255 : 0;
		}
	}
	return maskResult;
}

function dilateMask(mask, sw, sh) {
	var weights = [1, 1, 1, 1, 1, 1, 1, 1, 1];
	var side = Math.round(Math.sqrt(weights.length));
	var halfSide = Math.floor(side / 2);
	var maskResult = [];
	for (var y = 0; y < sh; y++) {
		for (var x = 0; x < sw; x++) {
			var so = y * sw + x;
			var a = 0;
			for (var cy = 0; cy < side; cy++) {
				for (var cx = 0; cx < side; cx++) {
					var scy = y + cy - halfSide;
					var scx = x + cx - halfSide;
					if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
						var srcOff = scy * sw + scx;
						var wt = weights[cy * side + cx];
						a += mask[srcOff] * wt;
					}
				}
			}
			maskResult[so] = a >= 255 * 4 ? 255 : 0;
		}
	}
	return maskResult;
}

function smoothEdgeMask(mask, sw, sh) {
	var weights = [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9];
	var side = Math.round(Math.sqrt(weights.length));
	var halfSide = Math.floor(side / 2);
	var maskResult = [];
	for (var y = 0; y < sh; y++) {
		for (var x = 0; x < sw; x++) {
			var so = y * sw + x;
			var a = 0;
			for (var cy = 0; cy < side; cy++) {
				for (var cx = 0; cx < side; cx++) {
					var scy = y + cy - halfSide;
					var scx = x + cx - halfSide;
					if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
						var srcOff = scy * sw + scx;
						var wt = weights[cy * side + cx];
						a += mask[srcOff] * wt;
					}
				}
			}
			maskResult[so] = a;
		}
	}
	return maskResult;
}

/**
 * 遮罩
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 * @param {Object} threshold 0~300遮罩强度
 */
CRender.prototype.Mask = function(x, y, w, h, threshold = 100) {
	let t = this;
	return this.getImageData(x, y, w, h).then((res) => {
		var imageData = {
			...res
		}

		var mask = backgroundMask(imageData, threshold);
		if (mask) {
			mask = erodeMask(mask, imageData.width, imageData.height);
			mask = dilateMask(mask, imageData.width, imageData.height);
			mask = smoothEdgeMask(mask, imageData.width, imageData.height);
			applyMask(imageData, mask);
		}
		return {
			width: res.width,
			height: res.height,
			data: imageData.data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))

}

/**
 * 图像噪点
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 * @param {Object} Noise 0~4
 */
CRender.prototype.Noise = function(x, y, w, h, noise = 0.5) {
	let t = this;
	return this.getImageData(x, y, w, h).then((res) => {
		var amount = noise * 255,
			data = res.data,
			nPixels = data.length,
			half = amount / 2,
			i;
		for (i = 0; i < nPixels; i += 4) {
			data[i + 0] += half - 2 * half * Math.random();
			data[i + 1] += half - 2 * half * Math.random();
			data[i + 2] += half - 2 * half * Math.random();
		}
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))

}

/**
 * 图像像素化
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 * @param {Object} size 0~20
 */
CRender.prototype.Pixelate = function(x, y, w, h, size = 10) {
	let t = this;
	return this.getImageData(x, y, w, h).then((res) => {

		var pixelSize = Math.ceil(size),
			width = res.width,
			height = res.height,
			x, y, i, red, green, blue, alpha, nBinsX = Math.ceil(width / pixelSize),
			nBinsY = Math.ceil(height / pixelSize),
			xBinStart, xBinEnd, yBinStart, yBinEnd, xBin, yBin, pixelsInBin, data = res.data;
		if (pixelSize <= 0) {
			return new Promise.reject("像素点不能小于0");
		}
		for (xBin = 0; xBin < nBinsX; xBin += 1) {
			for (yBin = 0; yBin < nBinsY; yBin += 1) {
				red = 0;
				green = 0;
				blue = 0;
				alpha = 0;
				xBinStart = xBin * pixelSize;
				xBinEnd = xBinStart + pixelSize;
				yBinStart = yBin * pixelSize;
				yBinEnd = yBinStart + pixelSize;
				pixelsInBin = 0;
				for (x = xBinStart; x < xBinEnd; x += 1) {
					if (x >= width) {
						continue;
					}
					for (y = yBinStart; y < yBinEnd; y += 1) {
						if (y >= height) {
							continue;
						}
						i = (width * y + x) * 4;
						red += data[i + 0];
						green += data[i + 1];
						blue += data[i + 2];
						alpha += data[i + 3];
						pixelsInBin += 1;
					}
				}
				red = red / pixelsInBin;
				green = green / pixelsInBin;
				blue = blue / pixelsInBin;
				alpha = alpha / pixelsInBin;
				for (x = xBinStart; x < xBinEnd; x += 1) {
					if (x >= width) {
						continue;
					}
					for (y = yBinStart; y < yBinEnd; y += 1) {
						if (y >= height) {
							continue;
						}
						i = (width * y + x) * 4;
						data[i + 0] = red;
						data[i + 1] = green;
						data[i + 2] = blue;
						data[i + 3] = alpha;
					}
				}
			}
		}
		return {
			width: res.width,
			height: res.height,
			data: data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))

}

/**
 * 褐色风格处理
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 */
CRender.prototype.Sepia = function(x, y, w, h) {
	let t = this;
	return this.getImageData(x, y, w, h).then((res) => {

		var d = res.data;

		for (var i = 0; i < d.length; i += 4) {
			var red = d[i];
			var green = d[i + 1];
			var blue = d[i + 2];
			var alpha = d[i + 3];

			var outRed = (red * .393) + (green * .769) + (blue *
			.189); // calculate value for red channel in pixel
			var outGreen = (red * .349) + (green * .686) + (blue * .168);
			var outBlue = (red * .272) + (green * .534) + (blue * .131);

			d[i] = outRed < 255 ? outRed :
			255; // check if the value is less than 255, if more set it to 255
			d[i + 1] = outGreen < 255 ? outGreen : 255;
			d[i + 2] = outBlue < 255 ? outBlue : 255
			d[i + 3] = alpha;
		}


		return {
			width: res.width,
			height: res.height,
			data: d
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))

}


/**
 * 水平翻转图像
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 */
CRender.prototype.HorizontalFlip = function(x, y, w, h) {
	let t = this;
	let dpr = 1;
	// #ifndef H5
	dpr = t.ctx.dpr;
	// #endif
	return this.getImageData(x, y, w, h).then(async (res) => {
		// 1.获取通信信息
		let imgdata = res;
		let middleAxle /*中轴*/ = (w * dpr * 4) / 2;
		// 2.遍历行
		for (let curRow = 0; curRow < h * dpr; curRow++) {
			let aisleStart /*每行开始的通道位置*/ = curRow * w * dpr * 4,
				aisleEnd /*每行结束的通道位置*/ = (curRow + 1) * w * dpr * 4 - 4,
				curMiddleAxle /*每一行中轴所在的位置*/ = aisleEnd - middleAxle;

			// 3.遍历当前行的列作为内循环,把列的左边像素按照轴对称和右边的像素互换
			for (; aisleStart <= curMiddleAxle; aisleStart += 4, aisleEnd -= 4) {
				// 临时存放
				let tr = imgdata.data[aisleStart],
					tg = imgdata.data[aisleStart + 1],
					tb = imgdata.data[aisleStart + 2],
					ta = imgdata.data[aisleStart + 3];

				imgdata.data[aisleStart] = imgdata.data[aisleEnd];
				imgdata.data[aisleStart + 1] = imgdata.data[aisleEnd + 1];
				imgdata.data[aisleStart + 2] = imgdata.data[aisleEnd + 2];
				imgdata.data[aisleStart + 3] = imgdata.data[aisleEnd + 3];

				imgdata.data[aisleEnd] = tr;
				imgdata.data[aisleEnd + 1] = tg;
				imgdata.data[aisleEnd + 2] = tb;
				imgdata.data[aisleEnd + 3] = ta;
			}
		}
		return {
			width: res.width,
			height: res.height,
			data: imgdata.data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))


}


/**
 * 垂直翻转图像
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 */
CRender.prototype.VerticallyFlip = function(x, y, w, h) {
	let t = this;
	let dpr = 1;
	// #ifndef H5
	dpr = t.ctx.dpr;
	// #endif
	return this.getImageData(x, y, w, h).then(async (res) => {
		// 1.获取图像信息
		let imgdata = res;
		let middleAxle /*中轴*/ = Math.floor(h / 2),
			rowAisles = w * 4;

		// 2.遍历总行数一半的每一行作为外循环(向下取整)
		for (var curRow = 0; curRow < middleAxle; curRow++) {
			// 
			let aisleStart /*开始的通道位置*/ = curRow * rowAisles,
				mirrorStart /*中轴对称的开始位置*/ = (h - curRow - 1) * rowAisles;

			// 3.遍历当前行的列作为内循环,把列的每个通道按照水平轴对称和镜像里的通道互换
			for (; aisleStart < rowAisles * (curRow + 1); aisleStart += 4, mirrorStart += 4) {
				var tr = imgdata.data[aisleStart],
					tg = imgdata.data[aisleStart + 1],
					tb = imgdata.data[aisleStart + 2],
					ta = imgdata.data[aisleStart + 3];

				imgdata.data[aisleStart] = imgdata.data[mirrorStart];
				imgdata.data[aisleStart + 1] = imgdata.data[mirrorStart + 1];
				imgdata.data[aisleStart + 2] = imgdata.data[mirrorStart + 2];
				imgdata.data[aisleStart + 3] = imgdata.data[mirrorStart + 3];

				imgdata.data[mirrorStart] = tr;
				imgdata.data[mirrorStart + 1] = tg;
				imgdata.data[mirrorStart + 2] = tb;
				imgdata.data[mirrorStart + 3] = ta;
			}
		}
		return {
			width: res.width,
			height: res.height,
			data: imgdata.data
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))


}


/**
 * 水平镜像，左右居中对称图像
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 */
CRender.prototype.HorizontalMirror = function(x, y, w, h) {
	let t = this;
	let dpr = 1;
	// #ifndef H5
	dpr = t.ctx.dpr;
	// #endif
	return this.getImageData(x, y, w, h).then(async (res) => {
		 var output =res;
		  var w = res.width;
		  var h = res.height;
		  var dst = output.data;
		  var d = res.data;
		  for (var y=0; y<h; y++) {
		    for (var x=0; x<w; x++) {
		      var off = (y*w+x)*4;
		      var dstOff = (y*w+(w-x-1))*4;
		      dst[dstOff] = d[off];
		      dst[dstOff+1] = d[off+1];
		      dst[dstOff+2] = d[off+2];
		      dst[dstOff+3] = d[off+3];
		    }
		  }
		return {
			width: res.width,
			height: res.height,
			data: dst
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))


}
/**
 * 垂直镜像，上下居中对称图像
 * @param {Object} x
 * @param {Object} y
 * @param {Object} w
 * @param {Object} h
 */
CRender.prototype.VerticallyMirror = function(x, y, w, h) {
	let t = this;
	let dpr = 1;
	// #ifndef H5
	dpr = t.ctx.dpr;
	// #endif
	return this.getImageData(x, y, w, h).then(async (res) => {
		 var output =res;
		 var w = res.width;
		   var h = res.height;
		   var dst = output.data;
		   var d = res.data;
		   for (var y=0; y<h; y++) {
		     for (var x=0; x<w; x++) {
		       var off = (y*w+x)*4;
		       var dstOff = ((h-y-1)*w+x)*4;
		       dst[dstOff] = d[off];
		       dst[dstOff+1] = d[off+1];
		       dst[dstOff+2] = d[off+2];
		       dst[dstOff+3] = d[off+3];
		     }
		   }
		return {
			width: res.width,
			height: res.height,
			data: dst
		};
	}).then(res => {
		return this.putImageData(x, y, w, h, res);
	}).catch(e => console.error(e))


}