|
|
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))
|
|
|
|
|
|
|
|
|
}
|