Begin `PermanentStorage` + Import of `canny` filter and `gaussian_blur` but not working... + removed `ratio` + replacedby `resolution`
This commit is contained in:
xdrm-brackets
parent
46145645a5
commit
d514f7080d
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="utf-8" standalone="no"?>
|
||||
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" id="com.coolappz.Test" version="1.0.0">
|
||||
<name>Test</name>
|
||||
<description>
|
||||
A sample Apache Cordova application that responds to the deviceready event.
|
||||
</description>
|
||||
<author email="dev@cordova.apache.org" href="http://cordova.io">
|
||||
Apache Cordova Team
|
||||
</author>
|
||||
<content src="index.html"/>
|
||||
<plugin name="cordova-plugin-whitelist" version="1"/>
|
||||
<access origin="*"/>
|
||||
<allow-intent href="http://*/*"/>
|
||||
<allow-intent href="https://*/*"/>
|
||||
<allow-intent href="tel:*"/>
|
||||
<allow-intent href="sms:*"/>
|
||||
<allow-intent href="mailto:*"/>
|
||||
<allow-intent href="geo:*"/>
|
||||
<platform name="android">
|
||||
<allow-intent href="market:*"/>
|
||||
</platform>
|
||||
<platform name="ios">
|
||||
<allow-intent href="itms:*"/>
|
||||
<allow-intent href="itms-apps:*"/>
|
||||
</platform>
|
||||
</widget>
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
<!--
|
||||
#
|
||||
# Licensed to the Apache Software Foundation (ASF) under one
|
||||
# or more contributor license agreements. See the NOTICE file
|
||||
# distributed with this work for additional information
|
||||
# regarding copyright ownership. The ASF licenses this file
|
||||
# to you under the Apache License, Version 2.0 (the
|
||||
# "License"); you may not use this file except in compliance
|
||||
# with the License. You may obtain a copy of the License at
|
||||
#
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing,
|
||||
# software distributed under the License is distributed on an
|
||||
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
# KIND, either express or implied. See the License for the
|
||||
# specific language governing permissions and limitations
|
||||
# under the License.
|
||||
#
|
||||
-->
|
||||
# Cordova Hooks
|
||||
|
||||
Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. Hook scripts could be defined by adding them to the special predefined folder (`/hooks`) or via configuration files (`config.xml` and `plugin.xml`) and run serially in the following order:
|
||||
* Application hooks from `/hooks`;
|
||||
* Application hooks from `config.xml`;
|
||||
* Plugin hooks from `plugins/.../plugin.xml`.
|
||||
|
||||
__Remember__: Make your scripts executable.
|
||||
|
||||
__Note__: `.cordova/hooks` directory is also supported for backward compatibility, but we don't recommend using it as it is deprecated.
|
||||
|
||||
## Supported hook types
|
||||
The following hook types are supported:
|
||||
|
||||
after_build/
|
||||
after_compile/
|
||||
after_docs/
|
||||
after_emulate/
|
||||
after_platform_add/
|
||||
after_platform_rm/
|
||||
after_platform_ls/
|
||||
after_plugin_add/
|
||||
after_plugin_ls/
|
||||
after_plugin_rm/
|
||||
after_plugin_search/
|
||||
after_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed
|
||||
after_prepare/
|
||||
after_run/
|
||||
after_serve/
|
||||
before_build/
|
||||
before_compile/
|
||||
before_docs/
|
||||
before_emulate/
|
||||
before_platform_add/
|
||||
before_platform_rm/
|
||||
before_platform_ls/
|
||||
before_plugin_add/
|
||||
before_plugin_ls/
|
||||
before_plugin_rm/
|
||||
before_plugin_search/
|
||||
before_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed
|
||||
before_plugin_uninstall/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being uninstalled
|
||||
before_prepare/
|
||||
before_run/
|
||||
before_serve/
|
||||
pre_package/ <-- Windows 8 and Windows Phone only.
|
||||
|
||||
## Ways to define hooks
|
||||
### Via '/hooks' directory
|
||||
To execute custom action when corresponding hook type is fired, use hook type as a name for a subfolder inside 'hooks' directory and place you script file here, for example:
|
||||
|
||||
# script file will be automatically executed after each build
|
||||
hooks/after_build/after_build_custom_action.js
|
||||
|
||||
|
||||
### Config.xml
|
||||
|
||||
Hooks can be defined in project's `config.xml` using `<hook>` elements, for example:
|
||||
|
||||
<hook type="before_build" src="scripts/appBeforeBuild.bat" />
|
||||
<hook type="before_build" src="scripts/appBeforeBuild.js" />
|
||||
<hook type="before_plugin_install" src="scripts/appBeforePluginInstall.js" />
|
||||
|
||||
<platform name="wp8">
|
||||
<hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.bat" />
|
||||
<hook type="before_build" src="scripts/wp8/appWP8BeforeBuild.js" />
|
||||
<hook type="before_plugin_install" src="scripts/wp8/appWP8BeforePluginInstall.js" />
|
||||
...
|
||||
</platform>
|
||||
|
||||
<platform name="windows8">
|
||||
<hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.bat" />
|
||||
<hook type="before_build" src="scripts/windows8/appWin8BeforeBuild.js" />
|
||||
<hook type="before_plugin_install" src="scripts/windows8/appWin8BeforePluginInstall.js" />
|
||||
...
|
||||
</platform>
|
||||
|
||||
### Plugin hooks (plugin.xml)
|
||||
|
||||
As a plugin developer you can define hook scripts using `<hook>` elements in a `plugin.xml` like that:
|
||||
|
||||
<hook type="before_plugin_install" src="scripts/beforeInstall.js" />
|
||||
<hook type="after_build" src="scripts/afterBuild.js" />
|
||||
|
||||
<platform name="wp8">
|
||||
<hook type="before_plugin_install" src="scripts/wp8BeforeInstall.js" />
|
||||
<hook type="before_build" src="scripts/wp8BeforeBuild.js" />
|
||||
...
|
||||
</platform>
|
||||
|
||||
`before_plugin_install`, `after_plugin_install`, `before_plugin_uninstall` plugin hooks will be fired exclusively for the plugin being installed/uninstalled.
|
||||
|
||||
## Script Interface
|
||||
|
||||
### Javascript
|
||||
|
||||
If you are writing hooks in Javascript you should use the following module definition:
|
||||
```javascript
|
||||
module.exports = function(context) {
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
You can make your scipts async using Q:
|
||||
```javascript
|
||||
module.exports = function(context) {
|
||||
var Q = context.requireCordovaModule('q');
|
||||
var deferral = new Q.defer();
|
||||
|
||||
setTimeout(function(){
|
||||
console.log('hook.js>> end');
|
||||
deferral.resolve();
|
||||
}, 1000);
|
||||
|
||||
return deferral.promise;
|
||||
}
|
||||
```
|
||||
|
||||
`context` object contains hook type, executed script full path, hook options, command-line arguments passed to Cordova and top-level "cordova" object:
|
||||
```json
|
||||
{
|
||||
"hook": "before_plugin_install",
|
||||
"scriptLocation": "c:\\script\\full\\path\\appBeforePluginInstall.js",
|
||||
"cmdLine": "The\\exact\\command\\cordova\\run\\with arguments",
|
||||
"opts": {
|
||||
"projectRoot":"C:\\path\\to\\the\\project",
|
||||
"cordova": {
|
||||
"platforms": ["wp8"],
|
||||
"plugins": ["com.plugin.withhooks"],
|
||||
"version": "0.21.7-dev"
|
||||
},
|
||||
"plugin": {
|
||||
"id": "com.plugin.withhooks",
|
||||
"pluginInfo": {
|
||||
...
|
||||
},
|
||||
"platform": "wp8",
|
||||
"dir": "C:\\path\\to\\the\\project\\plugins\\com.plugin.withhooks"
|
||||
}
|
||||
},
|
||||
"cordova": {...}
|
||||
}
|
||||
|
||||
```
|
||||
`context.opts.plugin` object will only be passed to plugin hooks scripts.
|
||||
|
||||
You can also require additional Cordova modules in your script using `context.requireCordovaModule` in the following way:
|
||||
```javascript
|
||||
var Q = context.requireCordovaModule('q');
|
||||
```
|
||||
|
||||
__Note__: new module loader script interface is used for the `.js` files defined via `config.xml` or `plugin.xml` only.
|
||||
For compatibility reasons hook files specified via `/hooks` folders are run via Node child_process spawn, see 'Non-javascript' section below.
|
||||
|
||||
### Non-javascript
|
||||
|
||||
Non-javascript scripts are run via Node child_process spawn from the project's root directory and have the root directory passes as the first argument. All other options are passed to the script using environment variables:
|
||||
|
||||
* CORDOVA_VERSION - The version of the Cordova-CLI.
|
||||
* CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios).
|
||||
* CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer)
|
||||
* CORDOVA_HOOK - Path to the hook that is being executed.
|
||||
* CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate)
|
||||
|
||||
If a script returns a non-zero exit code, then the parent cordova command will be aborted.
|
||||
|
||||
## Writing hooks
|
||||
|
||||
We highly recommend writing your hooks using Node.js so that they are
|
||||
cross-platform. Some good examples are shown here:
|
||||
|
||||
[http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/)
|
||||
|
||||
Also, note that even if you are working on Windows, and in case your hook scripts aren't bat files (which is recommended, if you want your scripts to work in non-Windows operating systems) Cordova CLI will expect a shebang line as the first line for it to know the interpreter it needs to use to launch the script. The shebang line should match the following example:
|
||||
|
||||
#!/usr/bin/env [name_of_interpreter_executable]
|
||||
|
|
@ -0,0 +1,291 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS HEADER.
|
||||
|
||||
Copyright 1997-2012 Oracle and/or its affiliates. All rights reserved.
|
||||
|
||||
Oracle and Java are registered trademarks of Oracle and/or its affiliates.
|
||||
Other names may be trademarks of their respective owners.
|
||||
|
||||
|
||||
The contents of this file are subject to the terms of either the GNU
|
||||
General Public License Version 2 only ("GPL") or the Common
|
||||
Development and Distribution License("CDDL") (collectively, the
|
||||
"License"). You may not use this file except in compliance with the
|
||||
License. You can obtain a copy of the License at
|
||||
http://www.netbeans.org/cddl-gplv2.html
|
||||
or nbbuild/licenses/CDDL-GPL-2-CP. See the License for the
|
||||
specific language governing permissions and limitations under the
|
||||
License. When distributing the software, include this License Header
|
||||
Notice in each file and include the License file at
|
||||
nbbuild/licenses/CDDL-GPL-2-CP. Oracle designates this
|
||||
particular file as subject to the "Classpath" exception as provided
|
||||
by Oracle in the GPL Version 2 section of the License file that
|
||||
accompanied this code. If applicable, add the following below the
|
||||
License Header, with the fields enclosed by brackets [] replaced by
|
||||
your own identifying information:
|
||||
"Portions Copyrighted [year] [name of copyright owner]"
|
||||
|
||||
Contributor(s):
|
||||
|
||||
The Original Software is NetBeans. The Initial Developer of the Original
|
||||
Software is Sun Microsystems, Inc. Portions Copyright 1997-2006 Sun
|
||||
Microsystems, Inc. All Rights Reserved.
|
||||
|
||||
If you wish your version of this file to be governed by only the CDDL
|
||||
or only the GPL Version 2, indicate your decision by adding
|
||||
"[Contributor] elects to include this software in this distribution
|
||||
under the [CDDL or GPL Version 2] license." If you do not indicate a
|
||||
single choice of license, a recipient has the option to distribute
|
||||
your version of this file under either the CDDL, the GPL Version 2 or
|
||||
to extend the choice of license to its licensees as provided above.
|
||||
However, if you add GPL Version 2 code and therefore, elected the GPL
|
||||
Version 2 license, then the option applies only if the new code is
|
||||
made subject to such option by the copyright holder.
|
||||
-->
|
||||
<!--
|
||||
Generated file; DO NOT EDIT.
|
||||
-->
|
||||
<project name="Test" basedir="..">
|
||||
<property file="nbproject/configs/${config}.properties" />
|
||||
|
||||
<scriptdef name="checkVersion" language="javascript">
|
||||
<attribute name="first" />
|
||||
<attribute name="property" />
|
||||
<![CDATA[
|
||||
var first = attributes.get("first");
|
||||
if (first >= "3.0.0") {
|
||||
project.setProperty(attributes.get("property"), true);
|
||||
}
|
||||
]]>
|
||||
</scriptdef>
|
||||
|
||||
<scriptdef name="forDevice" language="javascript">
|
||||
<![CDATA[
|
||||
var dev = project.getProperty("device");
|
||||
if (dev == "device") {
|
||||
project.setProperty("build.for.device", true);
|
||||
}
|
||||
]]>
|
||||
</scriptdef>
|
||||
|
||||
<target name="check-cordova-project">
|
||||
<condition property="cordova.project">
|
||||
<or>
|
||||
<available file=".cordova"/>
|
||||
<available file="hooks"/>
|
||||
</or>
|
||||
</condition>
|
||||
</target>
|
||||
|
||||
<target name="upgrade-to-cordova-project" depends="check-cordova-project,check-cordova-version" unless="cordova.project">
|
||||
<echo level="info" message="${cordova.command} -d create ${java.io.tmpdir}/nb_temp_project com.coolappz.${project.name} ${project.name}" />
|
||||
<delete dir="${java.io.tmpdir}/nb_temp_project"/>
|
||||
<exec executable="${cordova.command}" resolveexecutable="true" searchpath="true" failonerror="true" >
|
||||
<env key="${cordova.path.key}" path="${cordova.path.value}:${android.sdk.home}/tools:${android.sdk.home}/platform-tools:${jdk.home}/bin:${ant.home}/bin:${jdk.home}/bin"/>
|
||||
<env key="JAVA_HOME" path="${jdk.home}"/>
|
||||
<arg value="-d"/>
|
||||
<arg value="create"/>
|
||||
<arg value="${java.io.tmpdir}/nb_temp_project"/>
|
||||
<arg value="com.coolappz.${project.name}"/>
|
||||
<arg value="${project.name}" />
|
||||
</exec>
|
||||
<copy todir="." overwrite="true" failonerror="false">
|
||||
<fileset dir="${java.io.tmpdir}/nb_temp_project"/>
|
||||
</copy>
|
||||
<delete dir="${java.io.tmpdir}/nb_temp_project"/>
|
||||
<delete dir="www"/>
|
||||
<copy todir="www" failonerror="false" quiet="true" >
|
||||
<fileset dir="${site.root}"/>
|
||||
</copy>
|
||||
</target>
|
||||
|
||||
<target name="create-hello-world" depends="check-cordova-version">
|
||||
<echo level="info" message="${cordova.command} -d create www_nb_temp com.coolappz.${project.name} ${project.name}" />
|
||||
<exec executable="${cordova.command}" resolveexecutable="true" searchpath="true" failonerror="true">
|
||||
<env key="${cordova.path.key}" path="${cordova.path.value}:${android.sdk.home}/tools:${android.sdk.home}/platform-tools:${jdk.home}/bin:${ant.home}/bin:${jdk.home}/bin"/>
|
||||
<env key="JAVA_HOME" path="${jdk.home}"/>
|
||||
<arg value="-d"/>
|
||||
<arg value="create"/>
|
||||
<arg value="www_nb_temp"/>
|
||||
<arg value="com.coolappz.${project.name}"/>
|
||||
<arg value="${project.name}" />
|
||||
</exec>
|
||||
<delete dir="www"/>
|
||||
<mkdir dir="www"/>
|
||||
<move file="www_nb_temp/www" tofile="www"/>
|
||||
<delete dir="www_nb_temp"/>
|
||||
<delete file="www/config.xml"/>
|
||||
</target>
|
||||
|
||||
<taskdef
|
||||
classname="org.netbeans.modules.cordova.updatetask.ReadConfigTask"
|
||||
classpath="${update.task.jar}"
|
||||
name="readconfig"/>
|
||||
|
||||
<taskdef
|
||||
classname="org.netbeans.modules.cordova.updatetask.PluginTask"
|
||||
classpath="${update.task.jar}"
|
||||
name="plugintask"/>
|
||||
|
||||
|
||||
<target name="check-cordova-version">
|
||||
<property environment="env"/>
|
||||
<checkVersion first="${cordova.version}" property="cordova.ver.3"/>
|
||||
<fail message="Cordova version 3 or greater required." unless="cordova.ver.3"/>
|
||||
<readconfig/>
|
||||
<forDevice/>
|
||||
</target>
|
||||
|
||||
<target name="check-android-template">
|
||||
<available file="platforms/android" property="android.generated.exists"/>
|
||||
</target>
|
||||
|
||||
<target name="check-ios-template">
|
||||
<available file="platforms/ios" property="ios.generated.exists"/>
|
||||
</target>
|
||||
|
||||
<target name="create-android" depends="check-android-template,check-cordova-version,upgrade-to-cordova-project" unless="android.generated.exists">
|
||||
<echo level="info" message="${cordova.command} -d platform add android"/>
|
||||
<exec executable="${cordova.command}" resolveexecutable="true" searchpath="true" failonerror="true">
|
||||
<env key="${cordova.path.key}" path="${cordova.path.value}:${android.sdk.home}/tools:${android.sdk.home}/platform-tools:${jdk.home}/bin:${ant.home}/bin:${jdk.home}/bin"/>
|
||||
<env key="JAVA_HOME" path="${jdk.home}"/>
|
||||
<arg value="-d"/>
|
||||
<arg value="platform"/>
|
||||
<arg value="add"/>
|
||||
<arg value="android"/>
|
||||
</exec>
|
||||
</target>
|
||||
|
||||
<target name="create-ios" depends="check-ios-template,check-cordova-version,upgrade-to-cordova-project" unless="ios.generated.exists">
|
||||
<echo level="info" message="${cordova.command} -d platform add ios"/>
|
||||
<exec executable="${cordova.command}" resolveexecutable="true" searchpath="true" dir="." failonerror="true">
|
||||
<env key="${cordova.path.key}" path="${cordova.path.value}:${android.sdk.home}/tools:${android.sdk.home}/platform-tools:${jdk.home}/bin:${ant.home}/bin:${jdk.home}/bin"/>
|
||||
<env key="JAVA_HOME" path="${jdk.home}"/>
|
||||
<arg value="-d"/>
|
||||
<arg value="platform"/>
|
||||
<arg value="add"/>
|
||||
<arg value="ios"/>
|
||||
</exec>
|
||||
</target>
|
||||
|
||||
<target name="rebuild-ios" depends="clean-ios,build-ios"/>
|
||||
|
||||
<target name="build-ios" depends="create-ios,update-plugins,update-ios,build-ios-xcodebuild,build-ios-ipa"/>
|
||||
|
||||
<target name="build-ios-xcodebuild">
|
||||
<property name="path" location="platforms/ios/build"/>
|
||||
<exec executable="xcodebuild" dir="platforms/ios" failonerror="true">
|
||||
<arg value="-project"/>
|
||||
<arg value="${project.name}.xcodeproj"/>
|
||||
<arg value="ARCHS=${ios.build.arch}"/>
|
||||
<arg value="-target"/>
|
||||
<arg value="${project.name}"/>
|
||||
<arg value="-configuration"/>
|
||||
<arg value="Release"/>
|
||||
<arg value="-sdk"/>
|
||||
<arg value="${ios.build.sdk}" />
|
||||
<arg value="build"/>
|
||||
<arg value="CONFIGURATION_BUILD_DIR=${path}"/>
|
||||
</exec>
|
||||
</target>
|
||||
|
||||
<target name="build-ios-ipa" if="build.for.device">
|
||||
<exec executable="xcrun" dir="platforms/ios/build" failonerror="true">
|
||||
<env key="CODESIGN_ALLOCATE" value="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/codesign_allocate" />
|
||||
<arg value="-sdk"/>
|
||||
<arg value="${ios.build.sdk}" />
|
||||
<arg value="PackageApplication"/>
|
||||
<arg value="-v"/>
|
||||
<arg value="${project.name}.app"/>
|
||||
<arg value="-o"/>
|
||||
<arg value="${basedir}/platforms/ios/build/${project.name}.ipa"/>
|
||||
<arg value="--sign"/>
|
||||
<arg value="${ios.certificate.name}"/>
|
||||
<arg value="--embed"/>
|
||||
<arg value="${ios.provisioning.profile}"/>
|
||||
</exec>
|
||||
<available file="${basedir}/platforms/ios/build/${project.name}.ipa" property="ipa.found"/>
|
||||
<fail unless="ipa.found" message="PackageApplication failed."/>
|
||||
</target>
|
||||
|
||||
|
||||
<target name="sim-ios" depends="build-ios,ios-run-device,ios-run-simulator">
|
||||
</target>
|
||||
|
||||
<target name="ios-run-device" if="build.for.device">
|
||||
<echo>
|
||||
Install "${basedir}/platforms/ios/build/${project.name}.ipa" through iTunes and run it.
|
||||
</echo>
|
||||
<exec executable="open" failonerror="true">
|
||||
<arg value="${basedir}/platforms/ios/build/${project.name}.ipa"/>
|
||||
</exec>
|
||||
</target>
|
||||
|
||||
<target name="ios-run-simulator" unless="build.for.device">
|
||||
<exec executable="killall" dir="platforms/ios/build">
|
||||
<arg value="launchd_sim"/>
|
||||
</exec>
|
||||
<exec executable="${ios.sim.exec}" dir="platforms/ios/build" spawn="true">
|
||||
<arg line="launch ${project.name}.app ${ios.device.args}"/>
|
||||
</exec>
|
||||
</target>
|
||||
|
||||
<target name="update-plugins">
|
||||
<plugintask/>
|
||||
</target>
|
||||
|
||||
<target name="update-android">
|
||||
<echo level="info" message="${cordova.command} prepare android"/>
|
||||
|
||||
<exec executable="${cordova.command}" resolveexecutable="true" searchpath="true" failonerror="true">
|
||||
<env key="${cordova.path.key}" path="${cordova.path.value}:${android.sdk.home}/tools:${android.sdk.home}/platform-tools:${jdk.home}/bin:${ant.home}/bin:${jdk.home}/bin"/>
|
||||
<env key="JAVA_HOME" path="${jdk.home}"/>
|
||||
<arg value="prepare"/>
|
||||
<arg value="android"/>
|
||||
</exec>
|
||||
</target>
|
||||
|
||||
|
||||
<target name="update-ios">
|
||||
<echo level="info" message="${cordova.command} prepare ios"/>
|
||||
<exec executable="${cordova.command}" resolveexecutable="true" searchpath="true" failonerror="true">
|
||||
<env key="${cordova.path.key}" path="${cordova.path.value}:${android.sdk.home}/tools:${android.sdk.home}/platform-tools:${jdk.home}/bin:${ant.home}/bin:${jdk.home}/bin"/>
|
||||
<env key="JAVA_HOME" path="${jdk.home}"/>
|
||||
<arg value="prepare"/>
|
||||
<arg value="ios"/>
|
||||
</exec>
|
||||
</target>
|
||||
|
||||
<target name="rebuild-android" depends="clean-android,build-android"/>
|
||||
|
||||
<target name="build-android" depends="create-android,update-plugins">
|
||||
<echo level="info" message="${cordova.command} -d build android"/>
|
||||
<exec executable="${cordova.command}" resolveexecutable="true" searchpath="true" failonerror="true">
|
||||
<env key="${cordova.path.key}" path="${cordova.path.value}:${android.sdk.home}/tools:${android.sdk.home}/platform-tools:${jdk.home}/bin:${ant.home}/bin:${jdk.home}/bin"/>
|
||||
<env key="JAVA_HOME" path="${jdk.home}"/>
|
||||
<arg value="-d"/>
|
||||
<arg value="build"/>
|
||||
<arg value="android"/>
|
||||
</exec>
|
||||
</target>
|
||||
|
||||
<target name="sim-android" depends="create-android,update-plugins">
|
||||
<echo level="info" message="${cordova.command} -d ${android.target.device.arg} android"/>
|
||||
<exec executable="${cordova.command}" resolveexecutable="true" searchpath="true" failonerror="true">
|
||||
<env key="${cordova.path.key}" path="${cordova.path.value}:${android.sdk.home}/tools:${android.sdk.home}/platform-tools:${jdk.home}/bin:${ant.home}/bin:${jdk.home}/bin"/>
|
||||
<env key="JAVA_HOME" path="${jdk.home}"/>
|
||||
<arg value="-d"/>
|
||||
<arg value="${android.target.device.arg}"/>
|
||||
<arg value="android"/>
|
||||
</exec>
|
||||
</target>
|
||||
|
||||
<target name="clean-android" depends="check-android-template" if="android.generated.exists">
|
||||
<ant dir="platforms/android" target="clean"/>
|
||||
</target>
|
||||
|
||||
<target name="clean-ios" depends="check-ios-template" if="ios.generated.exists">
|
||||
<exec executable="platforms/ios/cordova/clean" />
|
||||
</target>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
device=emulator
|
||||
display.name=Android Emulator
|
||||
type=android
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
device=device
|
||||
display.name=Android Device
|
||||
type=android
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
device=emulator
|
||||
display.name=iPhone Simulator
|
||||
ios.build.arch=i386
|
||||
ios.build.sdk=iphonesimulator6.0
|
||||
type=ios
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
device=device
|
||||
display.name=iPhone Device
|
||||
ios.build.arch=armv6 armv7
|
||||
ios.build.sdk=iphoneos6.0
|
||||
type=ios
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
# This is a list of plugins installed in your project
|
||||
# You can delete or add new plugins
|
||||
#
|
||||
# Format is following:
|
||||
# name.of.plugin=url_of_repository
|
||||
#
|
||||
# This list contains all core cordova plugins.
|
||||
#
|
||||
# For more information about plugins see http://cordova.apache.org/blog/releases/2013/07/23/cordova-3.html
|
||||
#
|
||||
|
||||
org.apache.cordova.device=https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
|
||||
org.apache.cordova.network-information=https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
|
||||
org.apache.cordova.battery-status=https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git
|
||||
org.apache.cordova.device-motion=https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git
|
||||
org.apache.cordova.device-orientation=https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git
|
||||
org.apache.cordova.geolocation=https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
|
||||
org.apache.cordova.camera=https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
|
||||
org.apache.cordova.media-capture=https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git
|
||||
org.apache.cordova.media=https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
|
||||
org.apache.cordova.file=https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
|
||||
org.apache.cordova.file-transfer=https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
|
||||
org.apache.cordova.dialogs=https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
|
||||
org.apache.cordova.vibration=https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
|
||||
org.apache.cordova.contacts=https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git
|
||||
org.apache.cordova.globalization=https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git
|
||||
org.apache.cordova.splashscreen=https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
|
||||
org.apache.cordova.console=https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
|
||||
|
|
@ -0,0 +1 @@
|
|||
browser=SL[/Browsers/FirefoxBrowser
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project-private xmlns="http://www.netbeans.org/ns/project-private/1">
|
||||
<editor-bookmarks xmlns="http://www.netbeans.org/ns/editor-bookmarks/2" lastBookmarkId="0"/>
|
||||
<open-files xmlns="http://www.netbeans.org/ns/projectui-open-files/2">
|
||||
<group>
|
||||
<file>file:/C:/Users/Bab/Documents/NetBeansProjects/Feature_detection/www/index.html</file>
|
||||
<file>file:/C:/Users/Bab/Documents/NetBeansProjects/Feature_detection/www/js/Main.js</file>
|
||||
<file>file:/C:/Users/Bab/Documents/NetBeansProjects/Feature_detection/www/js/Photography_with_detected_features.js</file>
|
||||
</group>
|
||||
</open-files>
|
||||
</project-private>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
auxiliary.org-netbeans-modules-cordova.cordova_5f_build_5f_script_5f_version=50
|
||||
auxiliary.org-netbeans-modules-cordova.phonegap=true
|
||||
auxiliary.org-netbeans-modules-web-clientproject-api.js_2e_libs_2e_folder=js/libs
|
||||
file.reference.Test-test=test
|
||||
file.reference.Test-www=www
|
||||
files.encoding=UTF-8
|
||||
site.root.folder=${file.reference.Test-www}
|
||||
test.folder=${file.reference.Test-test}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project xmlns="http://www.netbeans.org/ns/project/1">
|
||||
<type>org.netbeans.modules.web.clientproject</type>
|
||||
<configuration>
|
||||
<data xmlns="http://www.netbeans.org/ns/clientside-project/1">
|
||||
<name>Feature_detection</name>
|
||||
</data>
|
||||
</configuration>
|
||||
</project>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
|
||||
<style>
|
||||
body {
|
||||
background:silver;
|
||||
padding:0;
|
||||
margin:0;
|
||||
font-weight: bold;
|
||||
overflow:hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Feature detection</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.4.1/chai.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.1.1/chroma.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
|
||||
|
||||
<script src="js/inspirit-jsfeat-59cc928/build/jsfeat-min.js"></script>
|
||||
<script src="js/inspirit-jsfeat-59cc928/cascades/bbf_face.js"></script>
|
||||
<script src="js/inspirit-jsfeat-59cc928/cascades/eye.js"></script>
|
||||
<script src="js/inspirit-jsfeat-59cc928/cascades/frontalface.js"></script>
|
||||
<script src="js/inspirit-jsfeat-59cc928/cascades/mouth.js"></script>
|
||||
|
||||
<script src="js/tracking.js/tracking-min.js"></script>
|
||||
<script src="js/tracking.js/data/eye-min.js"></script>
|
||||
<script src="js/tracking.js/data/face-min.js"></script>
|
||||
<script src="js/tracking.js/data/mouth-min.js"></script>
|
||||
|
||||
<script src="js/Main.js"></script>
|
||||
<script src="js/Photography_with_detected_features.js"></script>
|
||||
|
||||
<script>
|
||||
if (chai === undefined)
|
||||
alert("STOP");
|
||||
chai.assert.isDefined(jQuery, 'jQuery has not been loaded...');
|
||||
chai.assert.isDefined(jsfeat, 'jsfeat-min.js has not been loaded...');
|
||||
|
||||
$(document).ready(documentIsReady); // 'documentIsReady' in 'no_language.js'
|
||||
// Without jQuery: 'window.onload = windowIsLoaded;' ->
|
||||
$(window).on('load', windowIsLoaded); // 'windowIsLoaded' in 'no_language.js'
|
||||
$(window).on('unload', windowIsUnloaded);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
* Main.js
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
function documentIsReady() {
|
||||
// All document items are available...
|
||||
console.log("documentIsReady");
|
||||
new Main();
|
||||
}
|
||||
|
||||
function windowIsLoaded() {
|
||||
// All resources are available including downloaded images...
|
||||
console.log("windowIsLoaded");
|
||||
}
|
||||
|
||||
function windowIsUnloaded() {
|
||||
console.log("windowIsUnloaded");
|
||||
}
|
||||
|
||||
var Main = function () {
|
||||
|
||||
$(document).on("detection", {name: "detection"}, this.detection.bind(this));
|
||||
|
||||
var Franck = new Image(250, 250); // 250 x 250 to get mouth and eyes
|
||||
Franck.onload = function () {
|
||||
$(document).trigger("detection", {image: Franck, image_name: "Franck"});
|
||||
};
|
||||
Franck.src = 'img/Franck.jpg';
|
||||
|
||||
var Joseph = new Image(250, 250); // 250 x 250 to get mouth and eyes
|
||||
Joseph.onload = function () {
|
||||
$(document).trigger("detection", {image: Joseph, image_name: "Joseph"});
|
||||
};
|
||||
Joseph.src = 'img/Joseph.jpg';
|
||||
|
||||
var Lena = new Image(400, 400); // 400 x 400 to get mouth and eyes
|
||||
Lena.onload = function () {
|
||||
$(document).trigger("detection", {image: Lena, image_name: "Lena"});
|
||||
};
|
||||
Lena.src = 'img/Lena.jpg';
|
||||
|
||||
var Oscar = new Image();
|
||||
Oscar.onload = function () {
|
||||
$(document).trigger("detection", {image: Oscar, image_name: "Oscar"});
|
||||
};
|
||||
Oscar.src = 'img/Oscar.jpg';
|
||||
|
||||
var Sophie = new Image(100, 100);
|
||||
Sophie.onload = function () {
|
||||
$(document).trigger("detection", {image: Sophie, image_name: "Sophie"});
|
||||
};
|
||||
Sophie.src = 'img/Sophie.jpg';
|
||||
};
|
||||
|
||||
Main.prototype.detection = function (event, parameters) {
|
||||
chai.assert.strictEqual(event.data.name, "detection", "Precondition does not hold: " + "detection");
|
||||
new Photography_with_detected_features(parameters.image, parameters.image_name);
|
||||
};
|
||||
|
|
@ -0,0 +1,361 @@
|
|||
/**
|
||||
* Photography_with_detected_features.js
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var Width_used_for_displaying_canvas = (function () {
|
||||
return function () {
|
||||
return 200;
|
||||
};
|
||||
})();
|
||||
|
||||
var Height_used_for_displaying_canvas = (function () {
|
||||
return function () {
|
||||
return 200;
|
||||
};
|
||||
})();
|
||||
|
||||
var Photography_with_detected_features = function (image /* Image */, image_name /* String */) {
|
||||
chai.assert.isTrue(image !== undefined && image !== null && image instanceof Image && image.complete, 'Photography_with_detected_features._image');
|
||||
// 'image_name instanceof String === false' when 'var image_name = "Not constructed through constructor!";'
|
||||
chai.assert.isTrue(image_name !== undefined && image_name !== null /* && image_name instanceof String */, 'Photography_with_detected_features._image_name');
|
||||
/** Check image resizing here that has to occur in calling context */
|
||||
/** Not sure 'image' has to be recorded since it is immediately transformed into canvas: */
|
||||
this._image = image;
|
||||
this._image_name = image_name;
|
||||
/** JSFeat: */
|
||||
// jsfeat.matrix_t(columns, rows, data_type, data_buffer = undefined);
|
||||
// jsfeat.U8_t | jsfeat.C1_t; // 1 channel with unsigned char:
|
||||
this._matrix_char8_C1 = new jsfeat.matrix_t(this._image.width, this._image.height, /*jsfeat.U8_t | jsfeat.C1_t*/ jsfeat.U8C1_t);
|
||||
/** Canvases */
|
||||
this.$_image_canvas = $('<canvas>').attr({// Canvas as jQuery object
|
||||
id: "image-canvas-" + this._image_name
|
||||
});
|
||||
// Configuring canvas' size with jQuery is not reliable using 'innerWidth(this._image.width)' or 'outerWidth(this._image.width)':
|
||||
this.$_image_canvas.get(0).width = this._image.width;
|
||||
this.$_image_canvas.get(0).height = this._image.height;
|
||||
this.$_image_canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
|
||||
// Display:
|
||||
this.$_image_canvas.css("width", Width_used_for_displaying_canvas() + "px");
|
||||
this.$_image_canvas.css("height", Width_used_for_displaying_canvas() + "px");
|
||||
this.$_image_canvas.get(0).getContext('2d').font = "italic 10px Arial";
|
||||
this.$_image_canvas.get(0).getContext('2d').strokeText("Original: " + this._image_name, 10, 10);
|
||||
$("body").prepend(this.$_image_canvas);
|
||||
|
||||
this._image_data = this.$_image_canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height);
|
||||
this._image_data_buffer = new Uint32Array(this._image_data.data.buffer);
|
||||
|
||||
this.$_grayscale_canvas = $('<canvas>').attr({// Canvas as jQuery object
|
||||
id: "grayscale-canvas-" + this._image_name
|
||||
});
|
||||
this.$_grayscale_canvas.get(0).width = this._image.width;
|
||||
this.$_grayscale_canvas.get(0).height = this._image.height;
|
||||
this._grayscale_image_data = this.$_grayscale_canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height);
|
||||
this._grayscale_image_data_buffer = new Uint32Array(this._grayscale_image_data.data.buffer);
|
||||
|
||||
this.$_gaussian_blur_canvas = $('<canvas>').attr({// Canvas as jQuery object
|
||||
id: "gaussian_blur-canvas-" + this._image_name
|
||||
});
|
||||
this.$_gaussian_blur_canvas.get(0).width = this._image.width;
|
||||
this.$_gaussian_blur_canvas.get(0).height = this._image.height;
|
||||
this.$_gaussian_blur_canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
|
||||
this._gaussian_blur_image_data = this.$_gaussian_blur_canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height);
|
||||
this._gaussian_blur_image_data_buffer = new Uint32Array(this._gaussian_blur_image_data.data.buffer);
|
||||
|
||||
/** Canny: */
|
||||
this.$_canny_canvas = $('<canvas>').attr({// Canvas as jQuery object
|
||||
id: "canny-canvas-" + this._image_name
|
||||
});
|
||||
this.$_canny_canvas.get(0).width = this._image.width;
|
||||
this.$_canny_canvas.get(0).height = this._image.height;
|
||||
this.$_canny_canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
|
||||
this._canny_image_data = this.$_canny_canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height);
|
||||
this._canny_image_data_buffer = new Uint32Array(this._canny_image_data.data.buffer);
|
||||
|
||||
/** Sobel: */
|
||||
this.$_sobel_canvas = $('<canvas>').attr({
|
||||
id: "sobel-canvas-" + this._image_name
|
||||
});
|
||||
this.$_sobel_canvas.get(0).width = this._image.width;
|
||||
this.$_sobel_canvas.get(0).height = this._image.height;
|
||||
this.$_sobel_canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
|
||||
this._sobel_image_data = this.$_sobel_canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height);
|
||||
this._sobel_image_data_buffer = new Uint32Array(this._sobel_image_data.data.buffer);
|
||||
|
||||
/** Detection: */
|
||||
this._gaussian_blur();
|
||||
|
||||
this._canny_processing();
|
||||
this._canny_postprocessing();
|
||||
|
||||
this._sobel_processing();
|
||||
this._sobel_postprocessing();
|
||||
/** BBF: */
|
||||
this._brightness_binary_face = null // Sample: '[{"x":44.86460414486096,"y":40.36860185248175,"width":51.39751761778363,"height":51.39751761778363,"neighbors":14,"confidence":8.938965569999997}]'
|
||||
this._brightness_binary_face_detecting(chroma('blue').hex());
|
||||
/** Haar: */
|
||||
this._haar_feature = null;
|
||||
// Classifiers: 'jsfeat.haar.eye', 'jsfeat.haar.frontalface' and 'jsfeat.haar.mouth'
|
||||
this._haar_feature_detecting(chroma('green').hex(), jsfeat.haar.frontalface, 1);
|
||||
this._haar_feature_detecting(chroma('yellow').hex(), jsfeat.haar.mouth, 1);
|
||||
this._haar_feature_detecting(chroma('magenta').hex(), jsfeat.haar.eye, 2); // Bad result
|
||||
/** tracking.js */
|
||||
this._tracking_face();
|
||||
};
|
||||
|
||||
Photography_with_detected_features.prototype._gaussian_blur = function () {
|
||||
var source = new jsfeat.matrix_t(this._image.width, this._image.height, /*jsfeat.U8_t | jsfeat.C1_t*/ jsfeat.U8C1_t);
|
||||
|
||||
var pixel_number = this._image.width * this._image.height;
|
||||
while (--pixel_number >= 0) {
|
||||
var pixel = this._image_data_buffer[pixel_number];
|
||||
source.data[pixel_number] = (pixel << 24) | (pixel << 16) | (pixel << 8) | pixel;
|
||||
}
|
||||
var target = new jsfeat.matrix_t(this._image.width, this._image.height, /*jsfeat.U8_t | jsfeat.C1_t*/ jsfeat.U8C1_t);
|
||||
var sigma = 2; // gui.add(options, 'sigma', 0, 10).step(0.5); // It increases bluring
|
||||
|
||||
var radius = 3; // [1 - 11]
|
||||
|
||||
var kernel_size = (radius + 1) << 1;
|
||||
jsfeat.imgproc.gaussian_blur(source, target, kernel_size, sigma);
|
||||
|
||||
var pixel_number = target.cols * target.rows;
|
||||
while (--pixel_number >= 0) {
|
||||
var pixel = target.data[pixel_number];
|
||||
this._gaussian_blur_image_data_buffer[pixel_number] = (pixel << 24) | (pixel << 16) | (pixel << 8) | pixel;
|
||||
}
|
||||
this.$_gaussian_blur_canvas.get(0).getContext('2d').putImageData(this._gaussian_blur_image_data, 0, 0);
|
||||
// Display:
|
||||
this.$_gaussian_blur_canvas.css("width", Width_used_for_displaying_canvas() + "px");
|
||||
this.$_gaussian_blur_canvas.css("height", Width_used_for_displaying_canvas() + "px");
|
||||
this.$_gaussian_blur_canvas.get(0).getContext('2d').font = "italic 10px Arial";
|
||||
this.$_gaussian_blur_canvas.get(0).getContext('2d').strokeText("Gaussian blur: " + this._image_name, 10, 10);
|
||||
$("body").prepend(this.$_gaussian_blur_canvas);
|
||||
};
|
||||
|
||||
Photography_with_detected_features.prototype._canny_processing = function () {
|
||||
chai.assert.isNotNull(this._canny_image_data, 'Photography_with_detected_features._canny_image_data');
|
||||
chai.assert.isNotNull(this._canny_image_data_buffer, 'Photography_with_detected_features._canny_image_data_buffer');
|
||||
jsfeat.imgproc.grayscale(this._canny_image_data.data, this._image.width, this._image.height, this._matrix_char8_C1);
|
||||
var blur_radius = 3;
|
||||
var low_threshold = 40;
|
||||
var high_threshold = 40;
|
||||
// Bitwise OR with '0' is equivalent to 'Math.floor()':
|
||||
var r = blur_radius | 0;
|
||||
var kernel_size = (r + 1) << 1;
|
||||
jsfeat.imgproc.gaussian_blur(this._matrix_char8_C1, this._matrix_char8_C1, kernel_size, 0);
|
||||
// Bitwise OR with '0' is equivalent to 'Math.floor()':
|
||||
jsfeat.imgproc.canny(this._matrix_char8_C1, this._matrix_char8_C1, low_threshold | 0, high_threshold | 0);
|
||||
// Render result back to canvas:
|
||||
var alpha = (0x000000FF << 24); // 'alpha' is set to max., i.e., '255'
|
||||
var pixel_number = this._matrix_char8_C1.cols * this._matrix_char8_C1.rows;
|
||||
while (--pixel_number >= 0) {
|
||||
var pixel = this._matrix_char8_C1.data[pixel_number];
|
||||
this._canny_image_data_buffer[pixel_number] = alpha | (pixel << 16) | (pixel << 8) | pixel;
|
||||
}
|
||||
};
|
||||
|
||||
Photography_with_detected_features.prototype._canny_postprocessing = function () {
|
||||
chai.assert.isNotNull(this._canny_image_data, 'Photography_with_detected_features._canny_image_data');
|
||||
chai.assert.isNotNull(this._canny_image_data_buffer, 'Photography_with_detected_features._canny_image_data_buffer');
|
||||
for (var pixel_number = 0; pixel_number < this._canny_image_data_buffer.length; pixel_number++) {
|
||||
// Décalage sur la droite SANS préservation du signe (i.e., remplissage à gauche par des '0'):
|
||||
var alpha = this._canny_image_data_buffer[pixel_number] >>> 24; // Most left byte
|
||||
var blue = (this._canny_image_data_buffer[pixel_number] & 0x00FF0000) >> 16;
|
||||
var green = (this._canny_image_data_buffer[pixel_number] & 0x0000FF00) >> 8;
|
||||
var red = this._canny_image_data_buffer[pixel_number] & 0x000000FF; // Most right byte
|
||||
if (red === 255 && green === 255 && blue === 255) { // white
|
||||
green = 0;
|
||||
blue = 0;
|
||||
alpha = (0x000000FF << 24); // 'alpha' is set to max., i.e., '255'
|
||||
} else
|
||||
alpha = (0x00000000 << 24); // 'alpha' is set to min., i.e., '0'
|
||||
this._canny_image_data_buffer[pixel_number] = alpha | (blue << 16) | (green << 8) | red;
|
||||
}
|
||||
this.$_canny_canvas.get(0).getContext('2d').putImageData(this._canny_image_data, 0, 0);
|
||||
// Display:
|
||||
this.$_canny_canvas.css("width", Width_used_for_displaying_canvas() + "px");
|
||||
this.$_canny_canvas.css("height", Height_used_for_displaying_canvas() + "px");
|
||||
this.$_canny_canvas.get(0).getContext('2d').font = "italic 10px Arial";
|
||||
this.$_canny_canvas.get(0).getContext('2d').strokeText("Canny: " + this._image_name, 10, 10);
|
||||
$("body").prepend(this.$_canny_canvas);
|
||||
};
|
||||
|
||||
Photography_with_detected_features.prototype._sobel_processing = function () {
|
||||
chai.assert.isNotNull(this._sobel_image_data, 'Photography_with_detected_features._sobel_image_data');
|
||||
chai.assert.isNotNull(this._sobel_image_data_buffer, 'Photography_with_detected_features._sobel_image_data_buffer');
|
||||
// 2 channels with 32 bit integer:
|
||||
var matrix_integer32_C2 = new jsfeat.matrix_t(this._image.width, this._image.height, jsfeat.S32C2_t);
|
||||
// Passe l'image en nuances de gris au lieu des couleurs:
|
||||
jsfeat.imgproc.grayscale(this._sobel_image_data.data, this._image.width, this._image.height, this._matrix_char8_C1, jsfeat.COLOR_RGBA2GRAY);
|
||||
// Image source in 'this._matrix_char8_C1', result in 'matrix_integer32_C2'
|
||||
jsfeat.imgproc.sobel_derivatives(this._matrix_char8_C1, matrix_integer32_C2);
|
||||
// Render result back to canvas:
|
||||
// RGBA pixel's features are packed into 32 bits (https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/):
|
||||
var i = this._sobel_image_data_buffer.length, pixel = 0, gx = 0, gy = 0;
|
||||
while (--i >= 0) { // 'i' = this._image.width * this._image.height, matrix_integer32_C2.data.length = this._image.width * this._image.height
|
||||
// First iteration:
|
||||
// 'i << 1' === matrix_integer32_C2.data.length - 2
|
||||
// '(i << 1) + 1' === matrix_integer32_C2.data.length - 1
|
||||
// Gradient de l'intensité sur l'axe x:
|
||||
gx = Math.abs(matrix_integer32_C2.data[i << 1] >> 2) & 0x000000FF;
|
||||
// Gradient de l'intensité sur l'axe y:
|
||||
gy = Math.abs(matrix_integer32_C2.data[(i << 1) + 1] >> 2) & 0x000000FF;
|
||||
pixel = ((gx + gy) >> 1) & 0x000000FF;
|
||||
this._sobel_image_data_buffer[i] = (pixel << 24) | (gx << 16) | (0 << 8) | gy;
|
||||
}
|
||||
};
|
||||
|
||||
Photography_with_detected_features.prototype._sobel_postprocessing = function () {
|
||||
chai.assert.isNotNull(this._sobel_image_data, 'Photography_with_detected_features._sobel_image_data');
|
||||
chai.assert.isNotNull(this._sobel_image_data_buffer, 'Photography_with_detected_features._sobel_image_data_buffer');
|
||||
chai.assert.isNotNull(this._image_data, 'Photography_with_detected_features._image_data');
|
||||
chai.assert.isNotNull(this._image_data_buffer, 'Photography_with_detected_features._image_data_buffer');
|
||||
for (var pixel_number = 0; pixel_number < this._sobel_image_data_buffer.length; pixel_number++) {
|
||||
var alpha = this._sobel_image_data_buffer[pixel_number] >>> 24; // Most left byte
|
||||
var blue = (this._sobel_image_data_buffer[pixel_number] & 0x00FF0000) >> 16;
|
||||
var green = (this._sobel_image_data_buffer[pixel_number] & 0x0000FF00) >> 8;
|
||||
var red = this._sobel_image_data_buffer[pixel_number] & 0x000000FF; // Most right byte
|
||||
/** Gray scale: red-channel == green-channel == blue-channel */
|
||||
if (alpha > 10) { // Lower: useless details are kept (outside faces especially) while higher: faces lose quality
|
||||
red = alpha;
|
||||
blue = alpha;
|
||||
green = alpha;
|
||||
// Change 'alpha'?
|
||||
} else {
|
||||
alpha = 0;
|
||||
}
|
||||
// Pixel reload:
|
||||
this._sobel_image_data_buffer[pixel_number] = (alpha << 24) | (blue << 16) | (green << 8) | red;
|
||||
/** Original image is setup according to Sobel: */
|
||||
var sobel_alpha = alpha;
|
||||
alpha = this._image_data_buffer[pixel_number] >>> 24; // Most left byte
|
||||
blue = (this._image_data_buffer[pixel_number] & 0x00FF0000) >> 16;
|
||||
green = (this._image_data_buffer[pixel_number] & 0x0000FF00) >> 8;
|
||||
red = this._image_data_buffer[pixel_number] & 0x000000FF; // Most right byte
|
||||
if (sobel_alpha === 0) {
|
||||
// Pixel reload:
|
||||
//this._image_data_buffer[pixel_number] = (alpha << 24) | (blue << 16) | (green << 8) | red; // Colors are kept
|
||||
}
|
||||
}
|
||||
/** Update pixels into canvas: */
|
||||
this.$_sobel_canvas.get(0).getContext('2d').putImageData(this._sobel_image_data, 0, 0);
|
||||
// Display for test only:
|
||||
this.$_sobel_canvas.css("width", Width_used_for_displaying_canvas() + "px");
|
||||
this.$_sobel_canvas.css("height", Height_used_for_displaying_canvas() + "px");
|
||||
this.$_sobel_canvas.get(0).getContext('2d').font = "italic 10px Arial";
|
||||
this.$_sobel_canvas.get(0).getContext('2d').strokeText("Sobel: " + this._image_name, 10, 10);
|
||||
$("body").prepend(this.$_sobel_canvas);
|
||||
};
|
||||
|
||||
Photography_with_detected_features.prototype._brightness_binary_face_detecting = function (color) {
|
||||
var canvas = $('<canvas>').attr({
|
||||
id: "bbf-canvas-" + this._image_name
|
||||
});
|
||||
canvas.get(0).width = this._image.width;
|
||||
canvas.get(0).height = this._image.height;
|
||||
canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
|
||||
jsfeat.imgproc.grayscale(canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height).data, this._image.width, this._image.height, this._matrix_char8_C1);
|
||||
// Possible option:
|
||||
// jsfeat.imgproc.equalize_histogram(img_u8, img_u8);
|
||||
/*
|
||||
Build image pyramid using canvas drawImage
|
||||
|
||||
src - source grayscale matrix_t (U8_t|C1_t)
|
||||
min_width - minimum width to scale pyramid to
|
||||
min_height - minimum height to scale pyramid to
|
||||
interval - number of original scale levels in pyramid
|
||||
*/
|
||||
var pyramid = jsfeat.bbf.build_pyramid(this._matrix_char8_C1, 24 * 2, 24 * 2, 5); // Oscar passe à '5'
|
||||
/*
|
||||
This step needed only once to create local copy of features to prevent multiple Array relocation during detection
|
||||
*/
|
||||
jsfeat.bbf.prepare_cascade(jsfeat.bbf.face_cascade); // 'bbf_face.js'
|
||||
/*
|
||||
Run detection
|
||||
|
||||
pyramid - 'pyramid_t' object from 'build_pyramid' method
|
||||
cascade - cascade data
|
||||
*/
|
||||
this._brightness_binary_face = jsfeat.bbf.detect(pyramid, jsfeat.bbf.face_cascade); // 'bbf_face.js'
|
||||
/*
|
||||
Groups the object candidate rectangles
|
||||
|
||||
this._brightness_binary_face - input candidate objects sequence
|
||||
min_neighbors - Minimum possible number of rectangles minus 1, the threshold is used in a group of rectangles to retain it
|
||||
*/
|
||||
// En augmentant 'min_neighbors', on augmente la qualité de la détection pour ensuite choisir le rectangle:
|
||||
this._brightness_binary_face = jsfeat.bbf.group_rectangles(this._brightness_binary_face, 1); // '1' par défaut pour 'min_neighbors'
|
||||
/** JS conventions: */
|
||||
// All objects are considered to be 'true'
|
||||
// Strings are considered to be 'false' if they are empty
|
||||
// 'null' and 'undefined' are considered to be 'false'
|
||||
// A Number is 'false' if it is zero
|
||||
if (this._brightness_binary_face.length > 0) {
|
||||
jsfeat.math.qsort(this._brightness_binary_face, 0, this._brightness_binary_face.length - 1, function (a, b) {
|
||||
return (b.confidence < a.confidence);
|
||||
}); // Les rectangles sont triés par ordre de confiance
|
||||
// Display:
|
||||
this.$_image_canvas.get(0).getContext('2d').strokeStyle = color;
|
||||
this.$_image_canvas.get(0).getContext('2d').lineWidth = 3;
|
||||
var scale = this._image.width / this._matrix_char8_C1.cols;
|
||||
this.$_image_canvas.get(0).getContext('2d').strokeRect((this._brightness_binary_face[0].x * scale) | 0, (this._brightness_binary_face[0].y * scale) | 0, (this._brightness_binary_face[0].width * scale) | 0, (this._brightness_binary_face[0].height * scale) | 0);
|
||||
}
|
||||
};
|
||||
|
||||
Photography_with_detected_features.prototype._haar_feature_detecting = function (color, classifier, feature_number) {
|
||||
var canvas = $('<canvas>').attr({
|
||||
id: "frontalface-canvas-" + this._image_name
|
||||
});
|
||||
canvas.get(0).width = this._image.width;
|
||||
canvas.get(0).height = this._image.height;
|
||||
canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
|
||||
var edges = new jsfeat.matrix_t(this._image.width, this._image.height, jsfeat.U8_t | jsfeat.C1_t);
|
||||
var ii_sum = new Int32Array((this._image.width + 1) * (this._image.height + 1));
|
||||
var ii_sqsum = new Int32Array((this._image.width + 1) * (this._image.height + 1));
|
||||
var ii_tilted = new Int32Array((this._image.width + 1) * (this._image.height + 1));
|
||||
var ii_canny = new Int32Array((this._image.width + 1) * (this._image.height + 1));
|
||||
jsfeat.imgproc.grayscale(canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height).data, this._image.width, this._image.height, this._matrix_char8_C1);
|
||||
/** option */ jsfeat.imgproc.equalize_histogram(this._matrix_char8_C1, this._matrix_char8_C1);
|
||||
// jsfeat.imgproc.gaussian_blur(this._matrix_char8_C1, this._matrix_char8_C1, 3);
|
||||
|
||||
jsfeat.imgproc.compute_integral_image(this._matrix_char8_C1, ii_sum, ii_sqsum, classifier.tilted ? ii_tilted : null);
|
||||
/** option */ jsfeat.imgproc.canny(this._matrix_char8_C1, edges, 10, 50);
|
||||
jsfeat.imgproc.compute_integral_image(edges, ii_canny, null, null);
|
||||
var min_scale = 1.; // '1.' to '4.' step '0.1'
|
||||
var scale_factor = 1.15; // '1.1' to '2.' step '0.025'
|
||||
|
||||
jsfeat.haar.edges_density = 0.13; // '0.01' to '1.' step '0.005'
|
||||
this._haar_feature = jsfeat.haar.detect_multi_scale(ii_sum, ii_sqsum, ii_tilted, ii_canny /* 'null' if canny is not used */, this._matrix_char8_C1.cols, this._matrix_char8_C1.rows, classifier, scale_factor, min_scale);
|
||||
this._haar_feature = jsfeat.haar.group_rectangles(this._haar_feature, 1);
|
||||
if (this._haar_feature.length > 1) {
|
||||
jsfeat.math.qsort(this._haar_feature, 0, this._haar_feature.length - 1, function (a, b) {
|
||||
return (b.confidence < a.confidence);
|
||||
}); // Les rectangles sont triés par ordre de confiance
|
||||
}
|
||||
// Display:
|
||||
this.$_image_canvas.get(0).getContext('2d').strokeStyle = color;
|
||||
this.$_image_canvas.get(0).getContext('2d').lineWidth = 3;
|
||||
var scale = this._image.width / this._matrix_char8_C1.cols;
|
||||
for (var i = 0; i < Math.min(this._haar_feature.length, feature_number); ++i) {
|
||||
this.$_image_canvas.get(0).getContext('2d').strokeRect((this._haar_feature[i].x * scale) | 0, (this._haar_feature[i].y * scale) | 0, (this._haar_feature[i].width * scale) | 0, (this._haar_feature[i].height * scale) | 0);
|
||||
}
|
||||
};
|
||||
/** tracking.js */
|
||||
Photography_with_detected_features.prototype._tracking_face = function () {
|
||||
var tracker = new tracking.ObjectTracker(['face']);
|
||||
tracker.setInitialScale(1.); // gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
|
||||
tracker.setStepSize(1.); // gui.add(tracker, 'stepSize', 1, 5).step(0.1);
|
||||
tracker.setEdgesDensity(0.1); // gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);
|
||||
var display_face = function (event) {
|
||||
// Display:
|
||||
this.$_sobel_canvas.get(0).getContext('2d').strokeStyle = chroma('red').hex();
|
||||
this.$_sobel_canvas.get(0).getContext('2d').lineWidth = 3;
|
||||
for (var i = 0; i < event.data.length; ++i) {
|
||||
this.$_sobel_canvas.get(0).getContext('2d').strokeRect(Math.round(event.data[i].x), Math.round(event.data[i].y), Math.round(event.data[i].width), Math.round(event.data[i].height));
|
||||
}
|
||||
};
|
||||
tracker.on('track', display_face.bind(this));
|
||||
tracking.track(this._image, tracker);
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,28 @@
|
|||
var Width_used_for_displaying_canvas=function(){return function(){return 200}}(),Height_used_for_displaying_canvas=function(){return function(){return 200}}(),Photography_with_detected_features=function(a,b){chai.assert.isTrue(void 0!==a&&null!==a&&a instanceof Image&&a.complete,"Photography_with_detected_features._image");chai.assert.isTrue(void 0!==b&&null!==b,"Photography_with_detected_features._image_name");this._image=a;this._image_name=b;this._matrix_char8_C1=new jsfeat.matrix_t(this._image.width,
|
||||
this._image.height,jsfeat.U8C1_t);this.$_image_canvas=$("<canvas>").attr({id:"image-canvas-"+this._image_name});this.$_image_canvas.get(0).width=this._image.width;this.$_image_canvas.get(0).height=this._image.height;this.$_image_canvas.get(0).getContext("2d").drawImage(this._image,0,0,this._image.width,this._image.height);this.$_image_canvas.css("width",Width_used_for_displaying_canvas()+"px");this.$_image_canvas.css("height",Width_used_for_displaying_canvas()+"px");this.$_image_canvas.get(0).getContext("2d").font=
|
||||
"italic 10px Arial";this.$_image_canvas.get(0).getContext("2d").strokeText("Original: "+this._image_name,10,10);$("body").prepend(this.$_image_canvas);this._image_data=this.$_image_canvas.get(0).getContext("2d").getImageData(0,0,this._image.width,this._image.height);this._image_data_buffer=new Uint32Array(this._image_data.data.buffer);this.$_grayscale_canvas=$("<canvas>").attr({id:"grayscale-canvas-"+this._image_name});this.$_grayscale_canvas.get(0).width=this._image.width;this.$_grayscale_canvas.get(0).height=
|
||||
this._image.height;this._grayscale_image_data=this.$_grayscale_canvas.get(0).getContext("2d").getImageData(0,0,this._image.width,this._image.height);this._grayscale_image_data_buffer=new Uint32Array(this._grayscale_image_data.data.buffer);this.$_gaussian_blur_canvas=$("<canvas>").attr({id:"gaussian_blur-canvas-"+this._image_name});this.$_gaussian_blur_canvas.get(0).width=this._image.width;this.$_gaussian_blur_canvas.get(0).height=this._image.height;this.$_gaussian_blur_canvas.get(0).getContext("2d").drawImage(this._image,
|
||||
0,0,this._image.width,this._image.height);this._gaussian_blur_image_data=this.$_gaussian_blur_canvas.get(0).getContext("2d").getImageData(0,0,this._image.width,this._image.height);this._gaussian_blur_image_data_buffer=new Uint32Array(this._gaussian_blur_image_data.data.buffer);this.$_canny_canvas=$("<canvas>").attr({id:"canny-canvas-"+this._image_name});this.$_canny_canvas.get(0).width=this._image.width;this.$_canny_canvas.get(0).height=this._image.height;this.$_canny_canvas.get(0).getContext("2d").drawImage(this._image,
|
||||
0,0,this._image.width,this._image.height);this._canny_image_data=this.$_canny_canvas.get(0).getContext("2d").getImageData(0,0,this._image.width,this._image.height);this._canny_image_data_buffer=new Uint32Array(this._canny_image_data.data.buffer);this.$_sobel_canvas=$("<canvas>").attr({id:"sobel-canvas-"+this._image_name});this.$_sobel_canvas.get(0).width=this._image.width;this.$_sobel_canvas.get(0).height=this._image.height;this.$_sobel_canvas.get(0).getContext("2d").drawImage(this._image,0,0,this._image.width,
|
||||
this._image.height);this._sobel_image_data=this.$_sobel_canvas.get(0).getContext("2d").getImageData(0,0,this._image.width,this._image.height);this._sobel_image_data_buffer=new Uint32Array(this._sobel_image_data.data.buffer);this._gaussian_blur();this._canny_processing();this._canny_postprocessing();this._sobel_processing();this._sobel_postprocessing();this._brightness_binary_face=null;this._brightness_binary_face_detecting(chroma("blue").hex());this._haar_feature=null;this._haar_feature_detecting(chroma("green").hex(),
|
||||
jsfeat.haar.frontalface,1);this._haar_feature_detecting(chroma("yellow").hex(),jsfeat.haar.mouth,1);this._haar_feature_detecting(chroma("magenta").hex(),jsfeat.haar.eye,2);this._tracking_face()};
|
||||
Photography_with_detected_features.prototype._gaussian_blur=function(){for(var a=new jsfeat.matrix_t(this._image.width,this._image.height,jsfeat.U8C1_t),b=this._image.width*this._image.height;0<=--b;){var c=this._image_data_buffer[b];a.data[b]=c<<24|c<<16|c<<8|c}var d=new jsfeat.matrix_t(this._image.width,this._image.height,jsfeat.U8C1_t);jsfeat.imgproc.gaussian_blur(a,d,8,2);for(b=d.cols*d.rows;0<=--b;)c=d.data[b],this._gaussian_blur_image_data_buffer[b]=c<<24|c<<16|c<<8|c;this.$_gaussian_blur_canvas.get(0).getContext("2d").putImageData(this._gaussian_blur_image_data,
|
||||
0,0);this.$_gaussian_blur_canvas.css("width",Width_used_for_displaying_canvas()+"px");this.$_gaussian_blur_canvas.css("height",Width_used_for_displaying_canvas()+"px");this.$_gaussian_blur_canvas.get(0).getContext("2d").font="italic 10px Arial";this.$_gaussian_blur_canvas.get(0).getContext("2d").strokeText("Gaussian blur: "+this._image_name,10,10);$("body").prepend(this.$_gaussian_blur_canvas)};
|
||||
Photography_with_detected_features.prototype._canny_processing=function(){chai.assert.isNotNull(this._canny_image_data,"Photography_with_detected_features._canny_image_data");chai.assert.isNotNull(this._canny_image_data_buffer,"Photography_with_detected_features._canny_image_data_buffer");jsfeat.imgproc.grayscale(this._canny_image_data.data,this._image.width,this._image.height,this._matrix_char8_C1);jsfeat.imgproc.gaussian_blur(this._matrix_char8_C1,this._matrix_char8_C1,8,0);jsfeat.imgproc.canny(this._matrix_char8_C1,
|
||||
this._matrix_char8_C1,40,40);for(var a=this._matrix_char8_C1.cols*this._matrix_char8_C1.rows;0<=--a;){var b=this._matrix_char8_C1.data[a];this._canny_image_data_buffer[a]=-16777216|b<<16|b<<8|b}};
|
||||
Photography_with_detected_features.prototype._canny_postprocessing=function(){chai.assert.isNotNull(this._canny_image_data,"Photography_with_detected_features._canny_image_data");chai.assert.isNotNull(this._canny_image_data_buffer,"Photography_with_detected_features._canny_image_data_buffer");for(var a=0;a<this._canny_image_data_buffer.length;a++){var b=this._canny_image_data_buffer[a]>>>24,c=(this._canny_image_data_buffer[a]&16711680)>>16,d=(this._canny_image_data_buffer[a]&65280)>>8,e=this._canny_image_data_buffer[a]&
|
||||
255;255===e&&255===d&&255===c?(c=d=0,b=-16777216):b=0;this._canny_image_data_buffer[a]=b|c<<16|d<<8|e}this.$_canny_canvas.get(0).getContext("2d").putImageData(this._canny_image_data,0,0);this.$_canny_canvas.css("width",Width_used_for_displaying_canvas()+"px");this.$_canny_canvas.css("height",Height_used_for_displaying_canvas()+"px");this.$_canny_canvas.get(0).getContext("2d").font="italic 10px Arial";this.$_canny_canvas.get(0).getContext("2d").strokeText("Canny: "+this._image_name,10,10);$("body").prepend(this.$_canny_canvas)};
|
||||
Photography_with_detected_features.prototype._sobel_processing=function(){chai.assert.isNotNull(this._sobel_image_data,"Photography_with_detected_features._sobel_image_data");chai.assert.isNotNull(this._sobel_image_data_buffer,"Photography_with_detected_features._sobel_image_data_buffer");var a=new jsfeat.matrix_t(this._image.width,this._image.height,jsfeat.S32C2_t);jsfeat.imgproc.grayscale(this._sobel_image_data.data,this._image.width,this._image.height,this._matrix_char8_C1,jsfeat.COLOR_RGBA2GRAY);
|
||||
jsfeat.imgproc.sobel_derivatives(this._matrix_char8_C1,a);for(var b=this._sobel_image_data_buffer.length,c=0,d=0,e=0;0<=--b;)d=Math.abs(a.data[b<<1]>>2)&255,e=Math.abs(a.data[(b<<1)+1]>>2)&255,c=d+e>>1&255,this._sobel_image_data_buffer[b]=c<<24|d<<16|0|e};
|
||||
Photography_with_detected_features.prototype._sobel_postprocessing=function(){chai.assert.isNotNull(this._sobel_image_data,"Photography_with_detected_features._sobel_image_data");chai.assert.isNotNull(this._sobel_image_data_buffer,"Photography_with_detected_features._sobel_image_data_buffer");chai.assert.isNotNull(this._image_data,"Photography_with_detected_features._image_data");chai.assert.isNotNull(this._image_data_buffer,"Photography_with_detected_features._image_data_buffer");for(var a=0;a<this._sobel_image_data_buffer.length;a++){var b=
|
||||
this._sobel_image_data_buffer[a]>>>24,c=(this._sobel_image_data_buffer[a]&16711680)>>16,d=(this._sobel_image_data_buffer[a]&65280)>>8,e=this._sobel_image_data_buffer[a]&255;10<b?d=c=e=b:b=0;this._sobel_image_data_buffer[a]=b<<24|c<<16|d<<8|e}this.$_sobel_canvas.get(0).getContext("2d").putImageData(this._sobel_image_data,0,0);this.$_sobel_canvas.css("width",Width_used_for_displaying_canvas()+"px");this.$_sobel_canvas.css("height",Height_used_for_displaying_canvas()+"px");this.$_sobel_canvas.get(0).getContext("2d").font=
|
||||
"italic 10px Arial";this.$_sobel_canvas.get(0).getContext("2d").strokeText("Sobel: "+this._image_name,10,10);$("body").prepend(this.$_sobel_canvas)};
|
||||
Photography_with_detected_features.prototype._brightness_binary_face_detecting=function(a){var b=$("<canvas>").attr({id:"bbf-canvas-"+this._image_name});b.get(0).width=this._image.width;b.get(0).height=this._image.height;b.get(0).getContext("2d").drawImage(this._image,0,0,this._image.width,this._image.height);jsfeat.imgproc.grayscale(b.get(0).getContext("2d").getImageData(0,0,this._image.width,this._image.height).data,this._image.width,this._image.height,this._matrix_char8_C1);b=jsfeat.bbf.build_pyramid(this._matrix_char8_C1,
|
||||
48,48,5);jsfeat.bbf.prepare_cascade(jsfeat.bbf.face_cascade);this._brightness_binary_face=jsfeat.bbf.detect(b,jsfeat.bbf.face_cascade);this._brightness_binary_face=jsfeat.bbf.group_rectangles(this._brightness_binary_face,1);0<this._brightness_binary_face.length&&(jsfeat.math.qsort(this._brightness_binary_face,0,this._brightness_binary_face.length-1,function(a,b){return b.confidence<a.confidence}),this.$_image_canvas.get(0).getContext("2d").strokeStyle=a,this.$_image_canvas.get(0).getContext("2d").lineWidth=
|
||||
3,a=this._image.width/this._matrix_char8_C1.cols,this.$_image_canvas.get(0).getContext("2d").strokeRect(this._brightness_binary_face[0].x*a|0,this._brightness_binary_face[0].y*a|0,this._brightness_binary_face[0].width*a|0,this._brightness_binary_face[0].height*a|0))};
|
||||
Photography_with_detected_features.prototype._haar_feature_detecting=function(a,b,c){var d=$("<canvas>").attr({id:"frontalface-canvas-"+this._image_name});d.get(0).width=this._image.width;d.get(0).height=this._image.height;d.get(0).getContext("2d").drawImage(this._image,0,0,this._image.width,this._image.height);var e=new jsfeat.matrix_t(this._image.width,this._image.height,jsfeat.U8_t|jsfeat.C1_t),f=new Int32Array((this._image.width+1)*(this._image.height+1)),g=new Int32Array((this._image.width+1)*
|
||||
(this._image.height+1)),h=new Int32Array((this._image.width+1)*(this._image.height+1)),k=new Int32Array((this._image.width+1)*(this._image.height+1));jsfeat.imgproc.grayscale(d.get(0).getContext("2d").getImageData(0,0,this._image.width,this._image.height).data,this._image.width,this._image.height,this._matrix_char8_C1);jsfeat.imgproc.equalize_histogram(this._matrix_char8_C1,this._matrix_char8_C1);jsfeat.imgproc.compute_integral_image(this._matrix_char8_C1,f,g,b.tilted?h:null);jsfeat.imgproc.canny(this._matrix_char8_C1,
|
||||
e,10,50);jsfeat.imgproc.compute_integral_image(e,k,null,null);jsfeat.haar.edges_density=.13;this._haar_feature=jsfeat.haar.detect_multi_scale(f,g,h,k,this._matrix_char8_C1.cols,this._matrix_char8_C1.rows,b,1.15,1);this._haar_feature=jsfeat.haar.group_rectangles(this._haar_feature,1);1<this._haar_feature.length&&jsfeat.math.qsort(this._haar_feature,0,this._haar_feature.length-1,function(a,b){return b.confidence<a.confidence});this.$_image_canvas.get(0).getContext("2d").strokeStyle=a;this.$_image_canvas.get(0).getContext("2d").lineWidth=
|
||||
3;a=this._image.width/this._matrix_char8_C1.cols;for(b=0;b<Math.min(this._haar_feature.length,c);++b)this.$_image_canvas.get(0).getContext("2d").strokeRect(this._haar_feature[b].x*a|0,this._haar_feature[b].y*a|0,this._haar_feature[b].width*a|0,this._haar_feature[b].height*a|0)};
|
||||
Photography_with_detected_features.prototype._tracking_face=function(){var a=new tracking.ObjectTracker(["face"]);a.setInitialScale(1);a.setStepSize(1);a.setEdgesDensity(.1);a.on("track",function(a){this.$_sobel_canvas.get(0).getContext("2d").strokeStyle=chroma("red").hex();this.$_sobel_canvas.get(0).getContext("2d").lineWidth=3;for(var c=0;c<a.data.length;++c)this.$_sobel_canvas.get(0).getContext("2d").strokeRect(Math.round(a.data[c].x),Math.round(a.data[c].y),Math.round(a.data[c].width),Math.round(a.data[c].height))}.bind(this));
|
||||
tracking.track(this._image,a)};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -30,4 +30,20 @@ body {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibGF5b3V0LmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbGF5b3V0LnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSIkaW1hZ2Utc2l6ZTogNTAwcHg7XG5cblxuYm9keXtcblx0YmFja2dyb3VuZC1jb2xvcjogI2NjYztcblxuXHRmb250LWZhbWlseTogJ0NvdXJpZXInO1xuXHRmb250LXNpemU6IDEycHg7XG59XG5cblxuXG4jaW1hZ2UtbG9hZGVye1xuXHRkaXNwbGF5OiBub25lO1xufVxuXG4jY2FudmFze1xuXHRkaXNwbGF5OiBibG9jaztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdHdpZHRoOiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cdFx0aGVpZ2h0OiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cblx0bWFyZ2luOiAyMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICMwMDA7XG59XG5cblxuI2xvZ3tcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHR3aWR0aDogY2FsYyggI3skaW1hZ2Utc2l6ZX0gLSAyKjJweCAtIDIqMTBweCApO1xuXG5cdG1hcmdpbjogMTBweCAyMHB4O1xuXHRwYWRkaW5nOiAxMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICM1NTU7XG5cblx0c3Bhbntcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuXG59XG4iCgldLAoJIm1hcHBpbmdzIjogIkFBR0EsQUFBQSxJQUFJLENBQUE7RUFDSCxnQkFBZ0IsRUFBRSxJQUFLO0VBRXZCLFdBQVcsRUFBRSxTQUFVO0VBQ3ZCLFNBQVMsRUFBRSxJQUFLO0NBQ2hCOztBQUlELEFBQUEsYUFBYSxDQUFBO0VBQ1osT0FBTyxFQUFFLElBQUs7Q0FDZDs7QUFFRCxBQUFBLE9BQU8sQ0FBQTtFQUNOLE9BQU8sRUFBRSxLQUFNO0VBQ2YsUUFBUSxFQUFFLFFBQVM7RUFDbEIsS0FBSyxFQUFFLG9CQUFJO0VBQ1gsTUFBTSxFQUFFLG9CQUFJO0VBRWIsTUFBTSxFQUFFLElBQUs7RUFFYixNQUFNLEVBQUUsY0FBZTtDQUN2Qjs7QUFHRCxBQUFBLElBQUksQ0FBQTtFQUNILE9BQU8sRUFBRSxLQUFNO0VBQ2YsUUFBUSxFQUFFLFFBQVM7RUFDbEIsS0FBSyxFQUFFLDZCQUFJO0VBRVosTUFBTSxFQUFFLFNBQVU7RUFDbEIsT0FBTyxFQUFFLElBQUs7RUFFZCxNQUFNLEVBQUUsY0FBZTtDQU12Qjs7QUFkRCxBQVVDLElBVkcsQ0FVSCxJQUFJLENBQUE7RUFDSCxPQUFPLEVBQUUsS0FBTTtDQUNmIiwKCSJuYW1lcyI6IFtdCn0= */
|
||||
.dg.a .save-row {
|
||||
background-color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.dg li.save-row > select {
|
||||
background-color: #7d7d7d !important;
|
||||
color: #fff !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.dg li.save-row > span {
|
||||
background-color: #303030 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibGF5b3V0LmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbGF5b3V0LnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSIkaW1hZ2Utc2l6ZTogNTAwcHg7XG5cblxuYm9keXtcblx0YmFja2dyb3VuZC1jb2xvcjogI2NjYztcblxuXHRmb250LWZhbWlseTogJ0NvdXJpZXInO1xuXHRmb250LXNpemU6IDEycHg7XG59XG5cblxuXG4jaW1hZ2UtbG9hZGVye1xuXHRkaXNwbGF5OiBub25lO1xufVxuXG4jY2FudmFze1xuXHRkaXNwbGF5OiBibG9jaztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdHdpZHRoOiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cdFx0aGVpZ2h0OiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cblx0bWFyZ2luOiAyMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICMwMDA7XG59XG5cblxuI2xvZ3tcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHR3aWR0aDogY2FsYyggI3skaW1hZ2Utc2l6ZX0gLSAyKjJweCAtIDIqMTBweCApO1xuXG5cdG1hcmdpbjogMTBweCAyMHB4O1xuXHRwYWRkaW5nOiAxMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICM1NTU7XG5cblx0c3Bhbntcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuXG59XG5cblxuLy8gQURERUQgVE8gREFULkdVSVxuLmRnLmEgLnNhdmUtcm93eyBiYWNrZ3JvdW5kLWNvbG9yOiAjMWExYTFhICFpbXBvcnRhbnQ7IH1cblxuLmRnIGxpLnNhdmUtcm93ID4gc2VsZWN0e1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjN2Q3ZDdkICFpbXBvcnRhbnQ7XG5cdGNvbG9yOiAjZmZmICFpbXBvcnRhbnQ7XG5cdGJvcmRlcjogMCAhaW1wb3J0YW50O1xufVxuXG4uZGcgbGkuc2F2ZS1yb3cgPiBzcGFue1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjMzAzMDMwICFpbXBvcnRhbnQ7XG5cdGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcblx0dGV4dC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcbn1cbiIKCV0sCgkibWFwcGluZ3MiOiAiQUFHQSxBQUFBLElBQUksQ0FBQTtFQUNILGdCQUFnQixFQUFFLElBQUs7RUFFdkIsV0FBVyxFQUFFLFNBQVU7RUFDdkIsU0FBUyxFQUFFLElBQUs7Q0FDaEI7O0FBSUQsQUFBQSxhQUFhLENBQUE7RUFDWixPQUFPLEVBQUUsSUFBSztDQUNkOztBQUVELEFBQUEsT0FBTyxDQUFBO0VBQ04sT0FBTyxFQUFFLEtBQU07RUFDZixRQUFRLEVBQUUsUUFBUztFQUNsQixLQUFLLEVBQUUsb0JBQUk7RUFDWCxNQUFNLEVBQUUsb0JBQUk7RUFFYixNQUFNLEVBQUUsSUFBSztFQUViLE1BQU0sRUFBRSxjQUFlO0NBQ3ZCOztBQUdELEFBQUEsSUFBSSxDQUFBO0VBQ0gsT0FBTyxFQUFFLEtBQU07RUFDZixRQUFRLEVBQUUsUUFBUztFQUNsQixLQUFLLEVBQUUsNkJBQUk7RUFFWixNQUFNLEVBQUUsU0FBVTtFQUNsQixPQUFPLEVBQUUsSUFBSztFQUVkLE1BQU0sRUFBRSxjQUFlO0NBTXZCOztBQWRELEFBVUMsSUFWRyxDQVVILElBQUksQ0FBQTtFQUNILE9BQU8sRUFBRSxLQUFNO0NBQ2Y7O0FBTUYsQUFBTSxHQUFILEFBQUEsRUFBRSxDQUFDLFNBQVMsQ0FBQTtFQUFFLGdCQUFnQixFQUFFLGtCQUFtQjtDQUFJOztBQUUxRCxBQUFrQixHQUFmLENBQUMsRUFBRSxBQUFBLFNBQVMsR0FBRyxNQUFNLENBQUE7RUFDdkIsZ0JBQWdCLEVBQUUsa0JBQW1CO0VBQ3JDLEtBQUssRUFBRSxlQUFnQjtFQUN2QixNQUFNLEVBQUUsWUFBYTtDQUNyQjs7QUFFRCxBQUFrQixHQUFmLENBQUMsRUFBRSxBQUFBLFNBQVMsR0FBRyxJQUFJLENBQUE7RUFDckIsZ0JBQWdCLEVBQUUsa0JBQW1CO0VBQ3JDLFVBQVUsRUFBRSxlQUFnQjtFQUM1QixXQUFXLEVBQUUsZUFBZ0I7Q0FDN0IiLAoJIm5hbWVzIjogW10KfQ== */
|
||||
|
|
@ -5,8 +5,8 @@
|
|||
"../layout.scss"
|
||||
],
|
||||
"sourcesContent": [
|
||||
"$image-size: 500px;\n\n\nbody{\n\tbackground-color: #ccc;\n\n\tfont-family: 'Courier';\n\tfont-size: 12px;\n}\n\n\n\n#image-loader{\n\tdisplay: none;\n}\n\n#canvas{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px );\n\t\theight: calc( #{$image-size} - 2*2px );\n\n\tmargin: 20px;\n\n\tborder: 2px solid #000;\n}\n\n\n#log{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px - 2*10px );\n\n\tmargin: 10px 20px;\n\tpadding: 10px;\n\n\tborder: 2px solid #555;\n\n\tspan{\n\t\tdisplay: block;\n\t}\n\n}\n"
|
||||
"$image-size: 500px;\n\n\nbody{\n\tbackground-color: #ccc;\n\n\tfont-family: 'Courier';\n\tfont-size: 12px;\n}\n\n\n\n#image-loader{\n\tdisplay: none;\n}\n\n#canvas{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px );\n\t\theight: calc( #{$image-size} - 2*2px );\n\n\tmargin: 20px;\n\n\tborder: 2px solid #000;\n}\n\n\n#log{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px - 2*10px );\n\n\tmargin: 10px 20px;\n\tpadding: 10px;\n\n\tborder: 2px solid #555;\n\n\tspan{\n\t\tdisplay: block;\n\t}\n\n}\n\n\n// ADDED TO DAT.GUI\n.dg.a .save-row{ background-color: #1a1a1a !important; }\n\n.dg li.save-row > select{\n\tbackground-color: #7d7d7d !important;\n\tcolor: #fff !important;\n\tborder: 0 !important;\n}\n\n.dg li.save-row > span{\n\tbackground-color: #303030 !important;\n\tbox-shadow: none !important;\n\ttext-shadow: none !important;\n}\n"
|
||||
],
|
||||
"mappings": "AAGA,AAAA,IAAI,CAAA;EACH,gBAAgB,EAAE,IAAK;EAEvB,WAAW,EAAE,SAAU;EACvB,SAAS,EAAE,IAAK;CAChB;;AAID,AAAA,aAAa,CAAA;EACZ,OAAO,EAAE,IAAK;CACd;;AAED,AAAA,OAAO,CAAA;EACN,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EAClB,KAAK,EAAE,oBAAI;EACX,MAAM,EAAE,oBAAI;EAEb,MAAM,EAAE,IAAK;EAEb,MAAM,EAAE,cAAe;CACvB;;AAGD,AAAA,IAAI,CAAA;EACH,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EAClB,KAAK,EAAE,6BAAI;EAEZ,MAAM,EAAE,SAAU;EAClB,OAAO,EAAE,IAAK;EAEd,MAAM,EAAE,cAAe;CAMvB;;AAdD,AAUC,IAVG,CAUH,IAAI,CAAA;EACH,OAAO,EAAE,KAAM;CACf",
|
||||
"mappings": "AAGA,AAAA,IAAI,CAAA;EACH,gBAAgB,EAAE,IAAK;EAEvB,WAAW,EAAE,SAAU;EACvB,SAAS,EAAE,IAAK;CAChB;;AAID,AAAA,aAAa,CAAA;EACZ,OAAO,EAAE,IAAK;CACd;;AAED,AAAA,OAAO,CAAA;EACN,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EAClB,KAAK,EAAE,oBAAI;EACX,MAAM,EAAE,oBAAI;EAEb,MAAM,EAAE,IAAK;EAEb,MAAM,EAAE,cAAe;CACvB;;AAGD,AAAA,IAAI,CAAA;EACH,OAAO,EAAE,KAAM;EACf,QAAQ,EAAE,QAAS;EAClB,KAAK,EAAE,6BAAI;EAEZ,MAAM,EAAE,SAAU;EAClB,OAAO,EAAE,IAAK;EAEd,MAAM,EAAE,cAAe;CAMvB;;AAdD,AAUC,IAVG,CAUH,IAAI,CAAA;EACH,OAAO,EAAE,KAAM;CACf;;AAMF,AAAM,GAAH,AAAA,EAAE,CAAC,SAAS,CAAA;EAAE,gBAAgB,EAAE,kBAAmB;CAAI;;AAE1D,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,GAAG,MAAM,CAAA;EACvB,gBAAgB,EAAE,kBAAmB;EACrC,KAAK,EAAE,eAAgB;EACvB,MAAM,EAAE,YAAa;CACrB;;AAED,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,GAAG,IAAI,CAAA;EACrB,gBAAgB,EAAE,kBAAmB;EACrC,UAAU,EAAE,eAAgB;EAC5B,WAAW,EAAE,eAAgB;CAC7B",
|
||||
"names": []
|
||||
}
|
||||
|
|
@ -41,3 +41,19 @@ body{
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// ADDED TO DAT.GUI
|
||||
.dg.a .save-row{ background-color: #1a1a1a !important; }
|
||||
|
||||
.dg li.save-row > select{
|
||||
background-color: #7d7d7d !important;
|
||||
color: #fff !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.dg li.save-row > span{
|
||||
background-color: #303030 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
body{background-color:#ccc;font-family:'Courier';font-size:12px}#image-loader{display:none}#canvas{display:block;position:relative;width:calc( 500px - 2*2px);height:calc( 500px - 2*2px);margin:20px;border:2px solid #000}#log{display:block;position:relative;width:calc( 500px - 2*2px - 2*10px);margin:10px 20px;padding:10px;border:2px solid #555}#log span{display:block}
|
||||
body{background-color:#ccc;font-family:'Courier';font-size:12px}#image-loader{display:none}#canvas{display:block;position:relative;width:calc( 500px - 2*2px);height:calc( 500px - 2*2px);margin:20px;border:2px solid #000}#log{display:block;position:relative;width:calc( 500px - 2*2px - 2*10px);margin:10px 20px;padding:10px;border:2px solid #555}#log span{display:block}.dg.a .save-row{background-color:#1a1a1a !important}.dg li.save-row>select{background-color:#7d7d7d !important;color:#fff !important;border:0 !important}.dg li.save-row>span{background-color:#303030 !important;box-shadow:none !important;text-shadow:none !important}
|
||||
|
||||
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibGF5b3V0LmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbGF5b3V0LnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSIkaW1hZ2Utc2l6ZTogNTAwcHg7XG5cblxuYm9keXtcblx0YmFja2dyb3VuZC1jb2xvcjogI2NjYztcblxuXHRmb250LWZhbWlseTogJ0NvdXJpZXInO1xuXHRmb250LXNpemU6IDEycHg7XG59XG5cblxuXG4jaW1hZ2UtbG9hZGVye1xuXHRkaXNwbGF5OiBub25lO1xufVxuXG4jY2FudmFze1xuXHRkaXNwbGF5OiBibG9jaztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdHdpZHRoOiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cdFx0aGVpZ2h0OiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cblx0bWFyZ2luOiAyMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICMwMDA7XG59XG5cblxuI2xvZ3tcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHR3aWR0aDogY2FsYyggI3skaW1hZ2Utc2l6ZX0gLSAyKjJweCAtIDIqMTBweCApO1xuXG5cdG1hcmdpbjogMTBweCAyMHB4O1xuXHRwYWRkaW5nOiAxMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICM1NTU7XG5cblx0c3Bhbntcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuXG59XG4iCgldLAoJIm1hcHBpbmdzIjogIkFBR0EsQUFBQSxJQUFJLEFBQUEsQ0FDSCxnQkFBZ0IsQ0FBRSxJQUFLLENBRXZCLFdBQVcsQ0FBRSxTQUFVLENBQ3ZCLFNBQVMsQ0FBRSxJQUFLLENBQ2hCLEFBSUQsQUFBQSxhQUFhLEFBQUEsQ0FDWixPQUFPLENBQUUsSUFBSyxDQUNkLEFBRUQsQUFBQSxPQUFPLEFBQUEsQ0FDTixPQUFPLENBQUUsS0FBTSxDQUNmLFFBQVEsQ0FBRSxRQUFTLENBQ2xCLEtBQUssQ0FBRSxvQkFBSSxDQUNYLE1BQU0sQ0FBRSxvQkFBSSxDQUViLE1BQU0sQ0FBRSxJQUFLLENBRWIsTUFBTSxDQUFFLGNBQWUsQ0FDdkIsQUFHRCxBQUFBLElBQUksQUFBQSxDQUNILE9BQU8sQ0FBRSxLQUFNLENBQ2YsUUFBUSxDQUFFLFFBQVMsQ0FDbEIsS0FBSyxDQUFFLDZCQUFJLENBRVosTUFBTSxDQUFFLFNBQVUsQ0FDbEIsT0FBTyxDQUFFLElBQUssQ0FFZCxNQUFNLENBQUUsY0FBZSxDQU12QixBQWRELEFBVUMsSUFWRyxDQVVILElBQUksQUFBQSxDQUNILE9BQU8sQ0FBRSxLQUFNLENBQ2YiLAoJIm5hbWVzIjogW10KfQ== */
|
||||
/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAibGF5b3V0LmNzcyIsCgkic291cmNlcyI6IFsKCQkiLi4vbGF5b3V0LnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSIkaW1hZ2Utc2l6ZTogNTAwcHg7XG5cblxuYm9keXtcblx0YmFja2dyb3VuZC1jb2xvcjogI2NjYztcblxuXHRmb250LWZhbWlseTogJ0NvdXJpZXInO1xuXHRmb250LXNpemU6IDEycHg7XG59XG5cblxuXG4jaW1hZ2UtbG9hZGVye1xuXHRkaXNwbGF5OiBub25lO1xufVxuXG4jY2FudmFze1xuXHRkaXNwbGF5OiBibG9jaztcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdHdpZHRoOiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cdFx0aGVpZ2h0OiBjYWxjKCAjeyRpbWFnZS1zaXplfSAtIDIqMnB4ICk7XG5cblx0bWFyZ2luOiAyMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICMwMDA7XG59XG5cblxuI2xvZ3tcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHR3aWR0aDogY2FsYyggI3skaW1hZ2Utc2l6ZX0gLSAyKjJweCAtIDIqMTBweCApO1xuXG5cdG1hcmdpbjogMTBweCAyMHB4O1xuXHRwYWRkaW5nOiAxMHB4O1xuXG5cdGJvcmRlcjogMnB4IHNvbGlkICM1NTU7XG5cblx0c3Bhbntcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuXG59XG5cblxuLy8gQURERUQgVE8gREFULkdVSVxuLmRnLmEgLnNhdmUtcm93eyBiYWNrZ3JvdW5kLWNvbG9yOiAjMWExYTFhICFpbXBvcnRhbnQ7IH1cblxuLmRnIGxpLnNhdmUtcm93ID4gc2VsZWN0e1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjN2Q3ZDdkICFpbXBvcnRhbnQ7XG5cdGNvbG9yOiAjZmZmICFpbXBvcnRhbnQ7XG5cdGJvcmRlcjogMCAhaW1wb3J0YW50O1xufVxuXG4uZGcgbGkuc2F2ZS1yb3cgPiBzcGFue1xuXHRiYWNrZ3JvdW5kLWNvbG9yOiAjMzAzMDMwICFpbXBvcnRhbnQ7XG5cdGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcblx0dGV4dC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcbn1cbiIKCV0sCgkibWFwcGluZ3MiOiAiQUFHQSxBQUFBLElBQUksQUFBQSxDQUNILGdCQUFnQixDQUFFLElBQUssQ0FFdkIsV0FBVyxDQUFFLFNBQVUsQ0FDdkIsU0FBUyxDQUFFLElBQUssQ0FDaEIsQUFJRCxBQUFBLGFBQWEsQUFBQSxDQUNaLE9BQU8sQ0FBRSxJQUFLLENBQ2QsQUFFRCxBQUFBLE9BQU8sQUFBQSxDQUNOLE9BQU8sQ0FBRSxLQUFNLENBQ2YsUUFBUSxDQUFFLFFBQVMsQ0FDbEIsS0FBSyxDQUFFLG9CQUFJLENBQ1gsTUFBTSxDQUFFLG9CQUFJLENBRWIsTUFBTSxDQUFFLElBQUssQ0FFYixNQUFNLENBQUUsY0FBZSxDQUN2QixBQUdELEFBQUEsSUFBSSxBQUFBLENBQ0gsT0FBTyxDQUFFLEtBQU0sQ0FDZixRQUFRLENBQUUsUUFBUyxDQUNsQixLQUFLLENBQUUsNkJBQUksQ0FFWixNQUFNLENBQUUsU0FBVSxDQUNsQixPQUFPLENBQUUsSUFBSyxDQUVkLE1BQU0sQ0FBRSxjQUFlLENBTXZCLEFBZEQsQUFVQyxJQVZHLENBVUgsSUFBSSxBQUFBLENBQ0gsT0FBTyxDQUFFLEtBQU0sQ0FDZixBQU1GLEFBQU0sR0FBSCxBQUFBLEVBQUUsQ0FBQyxTQUFTLEFBQUEsQ0FBRSxnQkFBZ0IsQ0FBRSxrQkFBbUIsQ0FBSSxBQUUxRCxBQUFrQixHQUFmLENBQUMsRUFBRSxBQUFBLFNBQVMsQ0FBRyxNQUFNLEFBQUEsQ0FDdkIsZ0JBQWdCLENBQUUsa0JBQW1CLENBQ3JDLEtBQUssQ0FBRSxlQUFnQixDQUN2QixNQUFNLENBQUUsWUFBYSxDQUNyQixBQUVELEFBQWtCLEdBQWYsQ0FBQyxFQUFFLEFBQUEsU0FBUyxDQUFHLElBQUksQUFBQSxDQUNyQixnQkFBZ0IsQ0FBRSxrQkFBbUIsQ0FDckMsVUFBVSxDQUFFLGVBQWdCLENBQzVCLFdBQVcsQ0FBRSxlQUFnQixDQUM3QiIsCgkibmFtZXMiOiBbXQp9 */
|
||||
|
|
@ -5,8 +5,8 @@
|
|||
"../layout.scss"
|
||||
],
|
||||
"sourcesContent": [
|
||||
"$image-size: 500px;\n\n\nbody{\n\tbackground-color: #ccc;\n\n\tfont-family: 'Courier';\n\tfont-size: 12px;\n}\n\n\n\n#image-loader{\n\tdisplay: none;\n}\n\n#canvas{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px );\n\t\theight: calc( #{$image-size} - 2*2px );\n\n\tmargin: 20px;\n\n\tborder: 2px solid #000;\n}\n\n\n#log{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px - 2*10px );\n\n\tmargin: 10px 20px;\n\tpadding: 10px;\n\n\tborder: 2px solid #555;\n\n\tspan{\n\t\tdisplay: block;\n\t}\n\n}\n"
|
||||
"$image-size: 500px;\n\n\nbody{\n\tbackground-color: #ccc;\n\n\tfont-family: 'Courier';\n\tfont-size: 12px;\n}\n\n\n\n#image-loader{\n\tdisplay: none;\n}\n\n#canvas{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px );\n\t\theight: calc( #{$image-size} - 2*2px );\n\n\tmargin: 20px;\n\n\tborder: 2px solid #000;\n}\n\n\n#log{\n\tdisplay: block;\n\tposition: relative;\n\t\twidth: calc( #{$image-size} - 2*2px - 2*10px );\n\n\tmargin: 10px 20px;\n\tpadding: 10px;\n\n\tborder: 2px solid #555;\n\n\tspan{\n\t\tdisplay: block;\n\t}\n\n}\n\n\n// ADDED TO DAT.GUI\n.dg.a .save-row{ background-color: #1a1a1a !important; }\n\n.dg li.save-row > select{\n\tbackground-color: #7d7d7d !important;\n\tcolor: #fff !important;\n\tborder: 0 !important;\n}\n\n.dg li.save-row > span{\n\tbackground-color: #303030 !important;\n\tbox-shadow: none !important;\n\ttext-shadow: none !important;\n}\n"
|
||||
],
|
||||
"mappings": "AAGA,AAAA,IAAI,AAAA,CACH,gBAAgB,CAAE,IAAK,CAEvB,WAAW,CAAE,SAAU,CACvB,SAAS,CAAE,IAAK,CAChB,AAID,AAAA,aAAa,AAAA,CACZ,OAAO,CAAE,IAAK,CACd,AAED,AAAA,OAAO,AAAA,CACN,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CAClB,KAAK,CAAE,oBAAI,CACX,MAAM,CAAE,oBAAI,CAEb,MAAM,CAAE,IAAK,CAEb,MAAM,CAAE,cAAe,CACvB,AAGD,AAAA,IAAI,AAAA,CACH,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CAClB,KAAK,CAAE,6BAAI,CAEZ,MAAM,CAAE,SAAU,CAClB,OAAO,CAAE,IAAK,CAEd,MAAM,CAAE,cAAe,CAMvB,AAdD,AAUC,IAVG,CAUH,IAAI,AAAA,CACH,OAAO,CAAE,KAAM,CACf",
|
||||
"mappings": "AAGA,AAAA,IAAI,AAAA,CACH,gBAAgB,CAAE,IAAK,CAEvB,WAAW,CAAE,SAAU,CACvB,SAAS,CAAE,IAAK,CAChB,AAID,AAAA,aAAa,AAAA,CACZ,OAAO,CAAE,IAAK,CACd,AAED,AAAA,OAAO,AAAA,CACN,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CAClB,KAAK,CAAE,oBAAI,CACX,MAAM,CAAE,oBAAI,CAEb,MAAM,CAAE,IAAK,CAEb,MAAM,CAAE,cAAe,CACvB,AAGD,AAAA,IAAI,AAAA,CACH,OAAO,CAAE,KAAM,CACf,QAAQ,CAAE,QAAS,CAClB,KAAK,CAAE,6BAAI,CAEZ,MAAM,CAAE,SAAU,CAClB,OAAO,CAAE,IAAK,CAEd,MAAM,CAAE,cAAe,CAMvB,AAdD,AAUC,IAVG,CAUH,IAAI,AAAA,CACH,OAAO,CAAE,KAAM,CACf,AAMF,AAAM,GAAH,AAAA,EAAE,CAAC,SAAS,AAAA,CAAE,gBAAgB,CAAE,kBAAmB,CAAI,AAE1D,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,CAAG,MAAM,AAAA,CACvB,gBAAgB,CAAE,kBAAmB,CACrC,KAAK,CAAE,eAAgB,CACvB,MAAM,CAAE,YAAa,CACrB,AAED,AAAkB,GAAf,CAAC,EAAE,AAAA,SAAS,CAAG,IAAI,AAAA,CACrB,gBAAgB,CAAE,kBAAmB,CACrC,UAAU,CAAE,eAAgB,CAC5B,WAAW,CAAE,eAAgB,CAC7B",
|
||||
"names": []
|
||||
}
|
||||
|
|
@ -1,3 +1,17 @@
|
|||
<!--***********************
|
||||
* PermanentStorage *
|
||||
* 02-11-16 *
|
||||
***************************
|
||||
* Designed & Developed by *
|
||||
* xdrm-brackets *
|
||||
* & *
|
||||
* SeekDaSky *
|
||||
***************************
|
||||
* https://xdrm.io/ *
|
||||
* http://seekdasky.ovh/ *
|
||||
************************-->
|
||||
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>face-recognition.js</title>
|
||||
|
|
@ -19,10 +33,18 @@
|
|||
<script type='text/javascript' src='./js/lib/local.js' ></script> <!-- Lib locale -->
|
||||
<script type='text/javascript' src='./js/lib/image-loader.js' ></script> <!-- Gestion du chargement d'image -->
|
||||
<script type='text/javascript' src='./js/lib/reactive-filter.js' ></script> <!-- Gestion du des filtres dynamiques -->
|
||||
<script type='text/javascript' src='./js/lib/permanent-storage.js' ></script> <!-- Gestion du storage permanent (php) -->
|
||||
|
||||
<!-- dat.GUI -->
|
||||
<script type='text/javascript' src='./js/lib/min/dat.gui.js' ></script> <!-- Lib externe -->
|
||||
|
||||
<!-- JsFeat -->
|
||||
<script src="./js/lib/jsfeat/build/jsfeat-min.js" ></script>
|
||||
<script src="./js/lib/jsfeat/cascades/bbf_face.js" ></script>
|
||||
<script src="./js/lib/jsfeat/cascades/eye.js" ></script>
|
||||
<script src="./js/lib/jsfeat/cascades/frontalface.js"></script>
|
||||
<script src="./js/lib/jsfeat/cascades/mouth.js" ></script>
|
||||
|
||||
<!-- Tracking.js -->
|
||||
<script type='text/javascript' src='./js/tracking.js/build/tracking-min.js' ></script> <!-- Global Lib -->
|
||||
<script type='text/javascript' src='./js/tracking.js/build/data/face-min.js' ></script> <!-- Face lib -->
|
||||
|
|
|
|||
|
|
@ -1,3 +1,16 @@
|
|||
/**************************
|
||||
* PermanentStorage *
|
||||
* 08-09-16 *
|
||||
***************************
|
||||
* Designed & Developed by *
|
||||
* xdrm-brackets *
|
||||
* & *
|
||||
* SeekDaSky *
|
||||
***************************
|
||||
* https://xdrm.io/ *
|
||||
* http://seekdasky.ovh/ *
|
||||
**************************/
|
||||
|
||||
{ /* [0] Initialisation
|
||||
=========================================================*/
|
||||
|
||||
|
|
@ -20,10 +33,11 @@
|
|||
var iL;
|
||||
|
||||
var filterManager;
|
||||
var process;
|
||||
var process = function(){};
|
||||
var exec = false;
|
||||
var last;
|
||||
var trackerTask;
|
||||
var trackerTask;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -34,10 +48,10 @@
|
|||
|
||||
var init = function(){
|
||||
/* (1) Image par défaut */
|
||||
this.src = 'front:male:1.jpg';
|
||||
this.src = 'front/male/1.jpg';
|
||||
|
||||
/* (2) Attachement de dat.GUI */
|
||||
Controller.addFolder('image source');
|
||||
Controller.addFolder('Source Picture');
|
||||
Controller.add(this, 'src', this._images).listen();
|
||||
|
||||
last = this.src;
|
||||
|
|
@ -47,18 +61,40 @@
|
|||
var zones;
|
||||
|
||||
/* (3) Gestion du track de l'image */
|
||||
var track = new (function(){
|
||||
this._update = false;
|
||||
this.__defineGetter__('update', function( ){ return this._update; });
|
||||
this.__defineSetter__('update', function(v){ this._update = v; process.bind(DOM.imageLoader)(); });
|
||||
})();
|
||||
var track = {
|
||||
track: function(){
|
||||
zones = [];
|
||||
trackerTask = tracking.track(_CAN, tracker);
|
||||
}
|
||||
};
|
||||
|
||||
var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
|
||||
|
||||
tracker.setStepSize(1.5);
|
||||
tracker.setStepSize(1.9);
|
||||
|
||||
Controller.addFolder('Tracking.js');
|
||||
Controller.add(track, 'update');
|
||||
Controller.add(track, 'track');
|
||||
|
||||
tracker.on('track', function(event){
|
||||
|
||||
event.data.forEach(function(rect){
|
||||
|
||||
zones.push({
|
||||
x: rect.x / _CAN.width,
|
||||
y: rect.y / _CAN.height,
|
||||
w: rect.width / _CAN.width,
|
||||
h: rect.height / _CAN.height
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// On enregistre dans `zones` les zones trackées
|
||||
log('Recognition done', '[Tracking.js]');
|
||||
|
||||
// On met à jour le rendu (affichage des zones)
|
||||
process.bind(DOM.imageLoader)();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -96,46 +132,16 @@ process = function(){
|
|||
}
|
||||
|
||||
|
||||
/* [0.2] Si `track.update` et aucun résultat
|
||||
=========================================================*/
|
||||
if( zones.length === 0 && track.update ){
|
||||
|
||||
/* (1) On initialise la liste des zones */
|
||||
zones = [];
|
||||
|
||||
trakerTask = tracking.track(DOM.imageLoader, tracker);
|
||||
/* (2) On lance le tracking */
|
||||
|
||||
/* (3) Routine exécutée quand le tracking est terminé */
|
||||
tracker.on('track', function(event){
|
||||
|
||||
event.data.forEach(function(rect){ zones.push({ x: rect.x / DOM.imageLoader.width, y: rect.y / DOM.imageLoader.height,
|
||||
w: rect.width / DOM.imageLoader.width, h: rect.height / DOM.imageLoader.height }); });
|
||||
// On enregistre dans `zones` les zones trackées
|
||||
log('Recognition done', '[Tracking.js]');
|
||||
|
||||
// On met à jour le rendu (affichage des zones)
|
||||
process.bind(DOM.imageLoader)();
|
||||
});
|
||||
}
|
||||
|
||||
// sinon on supprime le tracking
|
||||
!track.update && (zones = []);
|
||||
|
||||
|
||||
/* [1] On initialise/efface le `<canvas>`
|
||||
=========================================================*/
|
||||
_CON.clearRect(0, 0, _CAN.width, _CAN.height);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{ /* [2] Copie sur le `<canvas>`
|
||||
=========================================================*/
|
||||
/* (1) Ratio */
|
||||
filterManager.get('ratio').apply();
|
||||
|
||||
/* (1) Resolution */
|
||||
filterManager.get('resolution').apply();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -146,6 +152,12 @@ process = function(){
|
|||
|
||||
/* (2) Sobel */
|
||||
filterManager.get('sobel').apply();
|
||||
|
||||
/* (3) Gaussian Filter */
|
||||
filterManager.get('gaussian').apply();
|
||||
|
||||
/* (4) Canny Filter */
|
||||
filterManager.get('canny').apply();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -154,10 +166,10 @@ process = function(){
|
|||
|
||||
/* (1) On reporte chaque zone trackée sur le `<canvas>` */
|
||||
for( var i in zones ){
|
||||
var x = zones[i].x * this.width;
|
||||
var y = zones[i].y * this.height;
|
||||
var w = zones[i].w * this.width;
|
||||
var h = zones[i].h * this.height;
|
||||
var x = zones[i].x * _CAN.width;
|
||||
var y = zones[i].y * _CAN.height;
|
||||
var w = zones[i].w * _CAN.width;
|
||||
var h = zones[i].h * _CAN.height;
|
||||
_CON.beginPath();
|
||||
_CON.moveTo( x, y );
|
||||
_CON.lineTo( x, y+h );
|
||||
|
|
@ -165,6 +177,7 @@ process = function(){
|
|||
_CON.lineTo( x+w, y );
|
||||
_CON.lineTo( x, y );
|
||||
_CON.lineWidth = 5;
|
||||
_CON.strokeStyle = '#f00';
|
||||
_CON.stroke();
|
||||
}
|
||||
|
||||
|
|
@ -180,23 +193,53 @@ process = function(){
|
|||
};
|
||||
|
||||
|
||||
|
||||
{ /* [3] Gestion des `ReactiveFilter`
|
||||
=========================================================*/
|
||||
/* (1) Création du Manager */
|
||||
filterManager = new ReactiveFilterManager(DOM.imageLoader, _CAN, process);
|
||||
|
||||
/* (2) Ajout des filtres */
|
||||
filterManager.add('ratio', reactiveRatio);
|
||||
filterManager.add('resolution', reactiveResolution);
|
||||
filterManager.add('contrast', reactiveContrast);
|
||||
filterManager.add('sobel', reactiveSobel);
|
||||
filterManager.add('gaussian', reactiveGaussianBlur);
|
||||
filterManager.add('canny', reactiveCanny);
|
||||
|
||||
/* (3) On attache tout à dat.GUI */
|
||||
Controller.addFolder('Image Ratio');
|
||||
Controller.add(filterManager.get('ratio'), 'width', 0, 2).listen();
|
||||
Controller.add(filterManager.get('ratio'), 'height', 0, 2).listen();
|
||||
Controller.addFolder('Image Processing');
|
||||
Controller.addFolder('Image Resolution');
|
||||
Controller.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1).listen();
|
||||
Controller.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1).listen();
|
||||
Controller.addFolder('Basic Image Processing');
|
||||
Controller.add(filterManager.get('contrast'), 'contrast', 0, 100).listen();
|
||||
Controller.addFolder('Gaussian Blur');
|
||||
Controller.add(filterManager.get('gaussian'), 'sigma', 0, 10).step(0.5).listen();
|
||||
Controller.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1).listen();
|
||||
Controller.addFolder('Convolution Filters');
|
||||
Controller.add(filterManager.get('sobel'), 'sobelActive').listen();
|
||||
Controller.add(filterManager.get('canny'), 'canny_radius').listen();
|
||||
|
||||
/* (4) Gestion des backups */
|
||||
Controller.remember(filterManager.get('resolution'));
|
||||
Controller.remember(filterManager.get('contrast'));
|
||||
Controller.remember(filterManager.get('sobel'));
|
||||
Controller.remember(filterManager.get('canny'));
|
||||
Controller.remember(filterManager.get('gaussian'));
|
||||
|
||||
/* (5) Gestion du @PermanentStorage */
|
||||
Controller.__save_row.children[2].addEventListener('click', function(e){
|
||||
/* (1) Update properties */
|
||||
Controller.save();
|
||||
|
||||
/* (2) Get stored data */
|
||||
try{
|
||||
var stored = JSON.stringify( Controller.load.remembered );
|
||||
|
||||
|
||||
|
||||
}catch(e){ log('Error parsing/storing data.', '[PermanentStorage]'); }
|
||||
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ ImageLoader.prototype._load = function(){
|
|||
=========================================================*/
|
||||
|
||||
this._wrapper.addEventListener('load', this._process.bind(this._wrapper), false);
|
||||
this._wrapper.src = './pictures/' + this.src.replace(/:/g, '/');
|
||||
this._wrapper.src = './pictures/' + this.src;
|
||||
|
||||
return true;
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
var PermanentStorage=function(){};PermanentStorage.prototype={store:function(a){a=(a||null).toString()||null;console.warn(a)},fetch:function(){}};
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
var ImageLoader=function(a,b){this._wrapper=a instanceof HTMLImageElement?a:null;this._src=this.src=null;this._callback="function"!=typeof b?function(){}:b;this._process="function"!=typeof process?function(){}:process;this._loaded=!1;if(!this._wrapper)throw Error("Param 1 expected to be an HTMLImageElement (<img>), but "+a.constructor.name+" received");this.__defineSetter__("src",function(a){log("src update","[ImageLoader]");this._src=a;this._load()});this.__defineGetter__("src",function(){return this._src});
|
||||
AJAX.send("./pictures/index.php",function(a){this._images=JSON.parse(a);this._loaded=!0;log("initialized","[ImageLoader]");this._callback.call(this)}.bind(this),"GET")};
|
||||
ImageLoader.prototype._load=function(){if(!this._loaded)throw Error("image tree not loaded yet");if("string"!=typeof this.src)throw Error("ImageLoader.src expected to be a <String>");if("function"!=typeof this._callback)throw Error("ImageLoader.callback expected to be a <Function>");if(~this._images.indexOf(this.src))return this._wrapper.addEventListener("load",this._process.bind(this._wrapper),!1),this._wrapper.src="./pictures/"+this.src.replace(/:/g,"/"),!0;console.warn("Resource "+this.src+" not found!")};
|
||||
ImageLoader.prototype._load=function(){if(!this._loaded)throw Error("image tree not loaded yet");if("string"!=typeof this.src)throw Error("ImageLoader.src expected to be a <String>");if("function"!=typeof this._callback)throw Error("ImageLoader.callback expected to be a <Function>");if(~this._images.indexOf(this.src))return this._wrapper.addEventListener("load",this._process.bind(this._wrapper),!1),this._wrapper.src="./pictures/"+this.src,!0;console.warn("Resource "+this.src+" not found!")};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
var PermanentStorage=function(){};
|
||||
PermanentStorage.prototype={store:function(a,c){var d,b;a=a||null;a="string"===typeof a?a:null;if(!(a&&c instanceof Function))return!1;d=new FormData;d.append("data",a);b=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHttpRequest");b.addEventListener("readystatechange",function(a){b.readyState-4||!~[0,200].indexOf(b.status)||c.bind(b.responseText)},!1);b.open("POST","./permanent-storage/",!0);b.send(d)},fetch:function(){var a;if(!(callback instanceof Function))return!1;a=
|
||||
window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHttpRequest");a.addEventListener("readystatechange",function(c){a.readyState-4||!~[0,200].indexOf(a.status)||callback.bind(a.responseText)},!1);a.open("POST","./permanent-storage/",!0);a.send(null)}};
|
||||
|
|
@ -1,8 +1,13 @@
|
|||
var ReactiveFilter=function(a){this._manager={_process:function(){}};this._attr=a instanceof Object?a:{};for(var b in this._attr)this.__defineGetter__(b,function(a){return this._attr[a]}.bind(this,b)),this.__defineSetter__(b,function(a,b){return function(e){a._attr[b]=e;a._manager.process()}}(this,b));this.apply=function(){}},ReactiveFilterManager=function(a,b,d){this._target=a instanceof HTMLImageElement?a:null;if(!this._target)throw Error("Param 1 expected to be an HTMLImageElement (<img>), but "+
|
||||
var ReactiveFilter=function(a){this._manager={_process:function(){}};this._attr=a instanceof Object?a:{};for(var b in this._attr)this.__defineGetter__(b,function(a){return this._attr[a]}.bind(this,b)),this.__defineSetter__(b,function(a,b){return function(c){a._attr[b]=c;a._manager.process()}}(this,b));this.apply=function(){}},ReactiveFilterManager=function(a,b,d){this._target=a instanceof HTMLImageElement?a:null;if(!this._target)throw Error("Param 1 expected to be an HTMLImageElement (<img>), but "+
|
||||
a.constructor.name+" received");this._canvas=b instanceof HTMLCanvasElement?b:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (<canvas>), but "+b.constructor.name+" received");this._context=this._canvas.getContext("2d");this._process=d instanceof Function?d:null;if(!this._process)throw Error("Param 3 expected to be a Function, but "+d.constructor.name+" received");this._filter={}};
|
||||
ReactiveFilterManager.prototype.add=function(a,b){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");b=b instanceof ReactiveFilter?b:null;if(!b)throw Error("Param 2 expected to be a `ReactiveFilter`, but "+b.constructor.name+" received");if(null!=this._filter[a])return!0;this._filter[a]=b;b._manager=this};
|
||||
ReactiveFilterManager.prototype.get=function(a){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");return null!=this._filter[a]?this._filter[a]:!1};ReactiveFilterManager.prototype.process=function(){this._process.bind(this._target)()};
|
||||
ConvolutionFilter=function(a,b,d,c){var e,g,h,q,r=parseInt(c.length/2),t=parseInt(c[0].length/2),u=d.slice(0),k,l,f,m,n,p;for(l=r;l<b;l++)for(k=t;k<a;k++){q=h=g=e=0;for(m=-r;m<=r;m++)for(f=-t;f<=t;f++)n=c[r+m][t+f],p=4*((l+m)*a+(k+f)),e+=u[p+0]*n,g+=u[p+1]*n,h+=u[p+2]*n,q+=u[p+3]*n;f=4*(l*a+k);d[f+0]=e;d[f+1]=g;d[f+2]=h;d[f+3]=q}};var reactiveRatio=new ReactiveFilter({width:.95,height:.95});
|
||||
reactiveRatio.apply=function(){if(this._manager instanceof ReactiveFilterManager){var a=this._manager._target,b=this._manager._canvas,d=this._manager._context;a.width=this.width*b.width/a.defaultWidth*a.defaultWidth;a.height=this.height*b.height/a.defaultHeight*a.defaultHeight;d.drawImage(a,0,0,a.width,a.height)}};var reactiveContrast=new ReactiveFilter({contrast:0});
|
||||
reactiveContrast.apply=function(){if(this._manager instanceof ReactiveFilterManager){for(var a=this._manager._canvas,b=this._manager._context,a=b.getImageData(0,0,a.width,a.height),d=a.data,c=this.contrast;1<c;)c/=100;for(var c=127*(1-c),e=0,g=d.length;e<g;e++)0!=e%3&&(d[e]>=127+c&&(d[e]=255),d[e]<=127-c&&(d[e]=0));b.putImageData(a,0,0)}};var reactiveSobel=new ReactiveFilter({sobelActive:!1});
|
||||
reactiveSobel.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.sobelActive){var a=this._manager._canvas,b=this._manager._context,d=b.getImageData(0,0,a.width,a.height),c=d.data,e=c.slice(0);ConvolutionFilter(a.width,a.height,e,[[-1,0,1],[-2,0,2],[-1,0,1]]);var g=c.slice(0);ConvolutionFilter(a.width,a.height,g,[[1,2,1],[0,0,0],[-1,-2,-1]]);for(var a=0,h=c.length;a<h;a+=4)c[a]=Math.abs(g[a]),c[a+1]=Math.abs(e[a+1]),c[a+2]=(c[a]+c[a+1])/4,c[a+3]=255;b.putImageData(d,0,0)}};
|
||||
ConvolutionFilter=function(a,b,d,e){var c,f,h,g,p=parseInt(e.length/2),q=parseInt(e[0].length/2),l=d.slice(0),n,k,m,r,t,u;for(k=p;k<b;k++)for(n=q;n<a;n++){g=h=f=c=0;for(r=-p;r<=p;r++)for(m=-q;m<=q;m++)t=e[p+r][q+m],u=4*((k+r)*a+(n+m)),c+=l[u+0]*t,f+=l[u+1]*t,h+=l[u+2]*t,g+=l[u+3]*t;m=4*(k*a+n);d[m+0]=c;d[m+1]=f;d[m+2]=h;d[m+3]=g}};
|
||||
SobelFilter=function(a,b,d){var e=[[-1,0,1],[-2,0,2],[-1,0,1]],c=[[1,2,1],[0,0,0],[-1,-2,-1]],f=parseInt(e.length/2),h=parseInt(e[0].length/2),g=d.slice(0),p,q,l,n,k,m;for(q=f;q<b;q++)for(p=h;p<a;p++){k=0;for(n=-f;n<=f;n++)for(l=-h;l<=h;l++)m=4*((q+n)*a+(p+l)),k+=g[m+0]*(e[f+n][h+l]+c[f+n][h+l])/2;l=q*a+p;k=Math.abs(k);d[l]=k<<32|k<<16|k<<8|255}};var reactiveResolution=new ReactiveFilter({width:1,height:1});
|
||||
reactiveResolution.apply=function(){if(this._manager instanceof ReactiveFilterManager){var a=this._manager._target,b=this._manager._canvas,d=this._manager._context;b.width=a.width*this.width;b.height=a.height*this.height;d.drawImage(a,0,0,b.width,b.height)}};var reactiveContrast=new ReactiveFilter({contrast:0});
|
||||
reactiveContrast.apply=function(){if(this._manager instanceof ReactiveFilterManager){for(var a=this._manager._canvas,b=this._manager._context,a=b.getImageData(0,0,a.width,a.height),d=a.data,e=this.contrast;1<e;)e/=100;for(var e=127*(1-e),c=0,f=d.length;c<f;c++)0!=c%3&&(d[c]>=127+e&&(d[c]=255),d[c]<=127-e&&(d[c]=0));b.putImageData(a,0,0)}};var reactiveSobel=new ReactiveFilter({sobelActive:!1});
|
||||
reactiveSobel.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.sobelActive){var a=this._manager._canvas,b=this._manager._context,d=b.getImageData(0,0,a.width,a.height),e=new Uint32Array(d.buffer);SobelFilter(a.width,a.height,e);b.putImageData(d,0,0)}};var reactiveGaussianBlur=new ReactiveFilter({sigma:0,radius:3});
|
||||
reactiveGaussianBlur.apply=function(){if(this._manager instanceof ReactiveFilterManager){var a=this._manager._target,b=this._manager._canvas,d=this._manager._context,e=d.getImageData(0,0,b.width,b.height),c=new Uint32Array(e.buffer),b=document.createElement("canvas").getContext("2d").createImageData(b.width,b.height);b.data.set(e.data.slice(0));tBuf=new Uint32Array(b.buffer);for(var f=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),h=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),a=a.width*
|
||||
a.height,g;0<=--a;)g=c[a],f.data[a]=g<<24|g<<16|g<<8|g;jsfeat.imgproc.gaussian_blur(f,h,this.radius+1<<1,this.sigma);for(a=h.cols*h.rows;0<=--a;)g=h.data[a],tBuf[a]=g<<24|g<<16|g<<8|g;e.data.set(b.data);d.putImageData(b,0,0)}};var reactiveCanny=new ReactiveFilter({canny_radius:3});
|
||||
reactiveCanny.apply=function(){if(this._manager instanceof ReactiveFilterManager){var a=this._manager._target,b=this._manager._canvas,d=this._manager._context,b=d.getImageData(0,0,b.width,b.height),e=new Uint32Array(b.buffer),a=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c,f=e.length;c={};jsfeat.imgproc.canny(a,a,40,40);for(i=0;i<f;i++)c=a.data[i],c|=c<<16|c<<8,c={a:-16777216,b:(c&16711680)>>16,g:(c&65280)>>8,r:c&255},255===c.r&&255===c.g&&255===c.b?c={r:c.r,g:0,b:0,a:-16777216}:c.a=0,e[i]=
|
||||
c.a|c.b<<16|c.g<<8|c.r;d.putImageData(b,0,0)}};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
/**************************
|
||||
* PermanentStorage *
|
||||
* 02-11-16 *
|
||||
***************************
|
||||
* Designed & Developed by *
|
||||
* xdrm-brackets *
|
||||
* & *
|
||||
* SeekDaSky *
|
||||
***************************
|
||||
* https://xdrm.io/ *
|
||||
* http://seekdasky.ovh/ *
|
||||
**************************/
|
||||
|
||||
var PermanentStorage = function(){};
|
||||
|
||||
PermanentStorage.prototype = {
|
||||
|
||||
/* STORES DATA TO REMOTE STORAGE
|
||||
*
|
||||
* @raw_data<String> Raw data to store
|
||||
* @callback<Function> Callback function that'll take the @status as result
|
||||
*
|
||||
* @return status<Boolean> If no error
|
||||
*
|
||||
* @note: @callback will be called with `this` bound to `xhr.responseText`
|
||||
*
|
||||
*/
|
||||
store: function(raw_data, callback){
|
||||
/* (0) Initialization */
|
||||
var fd, xhr;
|
||||
|
||||
{ /* (1) Checks @raw_data argument */
|
||||
raw_data = raw_data || null;
|
||||
raw_data = typeof raw_data === 'string' ? raw_data : null;
|
||||
|
||||
if( !raw_data )
|
||||
return false;
|
||||
}
|
||||
|
||||
{ /* (2) Checks @callback argument */
|
||||
if( !(callback instanceof Function) )
|
||||
return false;
|
||||
}
|
||||
|
||||
{ /* (3) Format data and wrap it into FormData */
|
||||
fd = new FormData();
|
||||
fd.append('data', raw_data);
|
||||
}
|
||||
|
||||
{ /* (4) Sends data to server */
|
||||
xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttpRequest');
|
||||
|
||||
xhr.addEventListener('readystatechange', function(e){
|
||||
!(xhr.readyState-4) && !!~[0,200].indexOf(xhr.status) && callback.bind(xhr.responseText);
|
||||
}, false);
|
||||
|
||||
xhr.open( 'POST', './permanent-storage/', true );
|
||||
xhr.send( fd );
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/* FETCHES DATA FROM REMOTE STORAGE
|
||||
*
|
||||
* @callback<Function> Callback function that'll take the @fetched_data as result
|
||||
*
|
||||
* @return raw_data<String> Fetched data
|
||||
* | error<null> NULL is returned if an error occured
|
||||
*
|
||||
*/
|
||||
fetch: function(){
|
||||
/* (0) Initialization */
|
||||
var xhr;
|
||||
|
||||
{ /* (1) Checks @callback argument */
|
||||
if( !(callback instanceof Function) )
|
||||
return false;
|
||||
}
|
||||
|
||||
{ /* (2) Sends data to server */
|
||||
xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttpRequest');
|
||||
|
||||
xhr.addEventListener('readystatechange', function(e){
|
||||
!(xhr.readyState-4) && !!~[0,200].indexOf(xhr.status) && callback.bind(xhr.responseText);
|
||||
}, false);
|
||||
|
||||
xhr.open( 'POST', './permanent-storage/', true );
|
||||
xhr.send( null );
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
|
@ -1,3 +1,16 @@
|
|||
/**************************
|
||||
* PermanentStorage *
|
||||
* 10-09-16 *
|
||||
***************************
|
||||
* Designed & Developed by *
|
||||
* xdrm-brackets *
|
||||
* & *
|
||||
* SeekDaSky *
|
||||
***************************
|
||||
* https://xdrm.io/ *
|
||||
* http://seekdasky.ovh/ *
|
||||
**************************/
|
||||
|
||||
/* INTERFACE DE `ReactiveFilter`
|
||||
*
|
||||
*/
|
||||
|
|
@ -191,14 +204,75 @@ ConvolutionFilter = function(width, height, imageData, kernel){
|
|||
|
||||
};
|
||||
|
||||
SobelFilter = function(width, height, buff32){
|
||||
|
||||
var kernel = {
|
||||
x: [
|
||||
[-1, 0, 1],
|
||||
[-2, 0, 2],
|
||||
[-1, 0, 1]
|
||||
],
|
||||
y: [
|
||||
[1, 2, 1],
|
||||
[0, 0, 0],
|
||||
[-1, -2, -1]
|
||||
]
|
||||
};
|
||||
|
||||
/* [0] Initialisation
|
||||
=========================================================*/
|
||||
// Offset pour ne pas dépasser
|
||||
var offset = {
|
||||
y: parseInt(kernel.x.length/2), // On calcule l'offset sur y (pour que le kernel ne déborde pas)
|
||||
x: parseInt(kernel.x[0].length/2) // On calcule l'offset sur x (pour que le kernel ne déborde pas)
|
||||
};
|
||||
|
||||
// Front buffer (copie buffer)
|
||||
var original = buff32.slice(0);
|
||||
var x, y, kx, ky, convolved, coeff, sIndex, dIndex;
|
||||
|
||||
|
||||
|
||||
/* [1] Pour chaque pixel de la map
|
||||
=========================================================*/
|
||||
for( y = offset.y ; y < height ; y++ ){
|
||||
for( x = offset.x ; x < width ; x++ ){
|
||||
|
||||
/* [2] Pour chaque pixel du @kernel
|
||||
=========================================================*/
|
||||
/* (1) Contiendra le compte final */
|
||||
convolved = 0x00;
|
||||
|
||||
for( ky = -offset.y ; ky <= offset.y ; ky++ ){
|
||||
for( kx = -offset.x ; kx <= offset.x ; kx++ ){
|
||||
|
||||
sIndex = 4*( (y+ky)*width + (x+kx)); // indice source
|
||||
|
||||
convolved += original[sIndex+0] * (kernel.x[offset.y+ky][offset.x+kx] + kernel.y[offset.y+ky][offset.x+kx] )/2;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* (2) On applique la valeur sur le buffer de destination */
|
||||
dIndex = (y*width + x); // indice destination
|
||||
convolved = Math.abs(convolved);
|
||||
|
||||
buff32[dIndex] = convolved << 32 | convolved << 16 | convolved << 8 | 0xff;
|
||||
// buff32[dIndex+1] = Math.abs(convolved);
|
||||
// buff32[dIndex+2] = Math.abs(convolved);
|
||||
// buff32[dIndex+3] = 0xff;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
/************************************************
|
||||
**** Gestion des ratios de l'image ****
|
||||
**** Gestion de la resolution de l'image ****
|
||||
************************************************/
|
||||
var reactiveRatio = new ReactiveFilter({ width: .95, height: .95 });
|
||||
reactiveRatio.apply = function(){
|
||||
var reactiveResolution = new ReactiveFilter({ width: 1, height: 1 });
|
||||
reactiveResolution.apply = function(){
|
||||
/* [1] Si pas de manager, on exit
|
||||
=========================================================*/
|
||||
if( !(this._manager instanceof ReactiveFilterManager) )
|
||||
|
|
@ -212,12 +286,13 @@ reactiveRatio.apply = function(){
|
|||
context: this._manager._context
|
||||
};
|
||||
|
||||
/* (2) Calcul de la taille de l'image en fonction du `ratio` */
|
||||
o.image.width = o.image.defaultWidth * (this.width * o.canvas.width / o.image.defaultWidth);
|
||||
o.image.height = o.image.defaultHeight * (this.height * o.canvas.height / o.image.defaultHeight);
|
||||
|
||||
/* (2) Calcul de la resolution */
|
||||
o.canvas.width = o.image.width * this.width;
|
||||
o.canvas.height = o.image.height * this.height;
|
||||
|
||||
/* (3) Copie de l'image sur le `<canvas>` */
|
||||
o.context.drawImage(o.image, 0, 0, o.image.width, o.image.height);
|
||||
o.context.drawImage(o.image, 0, 0, o.canvas.width, o.canvas.height);
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -295,42 +370,166 @@ reactiveSobel.apply = function(){
|
|||
};
|
||||
|
||||
var imageData = o.context.getImageData(0, 0, o.canvas.width, o.canvas.height);
|
||||
var buffer = imageData.data;
|
||||
// var buffer32 = new Uint32Array( imageData.buffer );
|
||||
// var buffer = imageData.data;
|
||||
var buffer32 = new Uint32Array( imageData.buffer );
|
||||
|
||||
|
||||
/* [3] On effectue notre modification
|
||||
=========================================================*/
|
||||
SobelFilter(o.canvas.width, o.canvas.height, buffer32);
|
||||
/* (1) On calcule la convolution horizontale */
|
||||
var Gx = buffer.slice(0);
|
||||
ConvolutionFilter(o.canvas.width, o.canvas.height, Gx, [
|
||||
[-1, 0, 1],
|
||||
[-2, 0, 2],
|
||||
[-1, 0, 1]
|
||||
]);
|
||||
|
||||
/* (2) On calcule la convolution verticale */
|
||||
var Gy = buffer.slice(0);
|
||||
ConvolutionFilter(o.canvas.width, o.canvas.height, Gy, [
|
||||
[1, 2, 1],
|
||||
[0, 0, 0],
|
||||
[-1, -2, -1]
|
||||
]);
|
||||
|
||||
/* (3) On mixe les 2 */
|
||||
for( var i = 0, len = buffer.length ; i < len ; i += 4 ){
|
||||
|
||||
/* (4.1) On ajoute la convolution horizontale en rouge */
|
||||
buffer[i] = Math.abs(Gy[i]);
|
||||
|
||||
/* (4.2) On ajoute la convolution verticale en vert */
|
||||
buffer[i+1] = Math.abs(Gx[i+1]);
|
||||
|
||||
buffer[i+2] = (buffer[i]+buffer[i+1]) / 4;
|
||||
buffer[i+3] = 0xff;
|
||||
}
|
||||
// var Gx = buffer.slice(0);
|
||||
// ConvolutionFilter(o.canvas.width, o.canvas.height, Gx, [
|
||||
// [-1, 0, 1],
|
||||
// [-2, 0, 2],
|
||||
// [-1, 0, 1]
|
||||
// ]);
|
||||
//
|
||||
// /* (2) On calcule la convolution verticale */
|
||||
// var Gy = buffer.slice(0);
|
||||
// ConvolutionFilter(o.canvas.width, o.canvas.height, Gy, [
|
||||
// [1, 2, 1],
|
||||
// [0, 0, 0],
|
||||
// [-1, -2, -1]
|
||||
// ]);
|
||||
//
|
||||
// /* (3) On mixe les 2 */
|
||||
// for( var i = 0, len = buffer.length ; i < len ; i += 4 ){
|
||||
//
|
||||
// /* (4.1) On ajoute la convolution horizontale en rouge */
|
||||
// buffer[i] = Math.abs(Gy[i]);
|
||||
//
|
||||
// /* (4.2) On ajoute la convolution verticale en vert */
|
||||
// buffer[i+1] = Math.abs(Gx[i+1]);
|
||||
//
|
||||
// buffer[i+2] = 0x00;
|
||||
// buffer[i+3] = 0xff;
|
||||
// }
|
||||
|
||||
|
||||
/* (2) Copie le résultat sur le `<canvas>` */
|
||||
o.context.putImageData(imageData, 0, 0);
|
||||
};
|
||||
|
||||
|
||||
/************************************************
|
||||
**** Gestion du Gaussian Blur ****
|
||||
************************************************/
|
||||
var reactiveGaussianBlur = new ReactiveFilter({ sigma: 0, radius: 3 });
|
||||
reactiveGaussianBlur.apply = function(){
|
||||
/* [1] Si pas de manager, on exit
|
||||
=========================================================*/
|
||||
if( !(this._manager instanceof ReactiveFilterManager) )
|
||||
return;
|
||||
|
||||
|
||||
/* [2] On recupère notre back-buffer (8Uint)
|
||||
=========================================================*/
|
||||
var o = {
|
||||
image: this._manager._target,
|
||||
canvas: this._manager._canvas,
|
||||
context: this._manager._context
|
||||
};
|
||||
|
||||
/* (1) Get source */
|
||||
var imageData = o.context.getImageData(0, 0, o.canvas.width, o.canvas.height);
|
||||
// var buffer = imageData.data;
|
||||
var buffer32 = new Uint32Array( imageData.buffer );
|
||||
|
||||
/* (2) Create target */
|
||||
var tCan = document.createElement('canvas');
|
||||
var tmp = tCan.getContext('2d').createImageData(o.canvas.width, o.canvas.height);
|
||||
tmp.data.set( imageData.data.slice(0) );
|
||||
tBuf = new Uint32Array( tmp.buffer );
|
||||
|
||||
|
||||
/* [3] On effectue notre modification
|
||||
=========================================================*/
|
||||
var source = new jsfeat.matrix_t(o.image.width, o.image.height, jsfeat.U8C1_t),
|
||||
target = new jsfeat.matrix_t(o.image.width, o.image.height, jsfeat.U8C1_t),
|
||||
p_num = o.image.width * o.image.height,
|
||||
pixel,
|
||||
kernel_size;
|
||||
|
||||
while( --p_num >= 0 ){
|
||||
pixel = buffer32[p_num];
|
||||
source.data[p_num] = (pixel << 24) | (pixel << 16) | (pixel << 8) | pixel;
|
||||
}
|
||||
|
||||
kernel_size = (this.radius + 1) << 1;
|
||||
jsfeat.imgproc.gaussian_blur(source, target, kernel_size, this.sigma);
|
||||
|
||||
p_num = target.cols * target.rows;
|
||||
while( --p_num >= 0 ){
|
||||
pixel = target.data[p_num];
|
||||
tBuf[p_num] = (pixel << 24) | (pixel << 16) | (pixel << 8) | pixel;
|
||||
}
|
||||
|
||||
/* (2) Copie le résultat sur le `<canvas>` */
|
||||
imageData.data.set( tmp.data );
|
||||
o.context.putImageData(tmp, 0, 0);
|
||||
};
|
||||
|
||||
|
||||
/************************************************
|
||||
**** Gestion du Canny Filter ****
|
||||
************************************************/
|
||||
var reactiveCanny = new ReactiveFilter({ canny_radius: 3 });
|
||||
reactiveCanny.apply = function(){
|
||||
/* [1] Si pas de manager, on exit
|
||||
=========================================================*/
|
||||
if( !(this._manager instanceof ReactiveFilterManager) )
|
||||
return;
|
||||
|
||||
|
||||
/* [2] On recupère notre back-buffer (8Uint)
|
||||
=========================================================*/
|
||||
var o = {
|
||||
image: this._manager._target,
|
||||
canvas: this._manager._canvas,
|
||||
context: this._manager._context
|
||||
};
|
||||
|
||||
/* (1) Get source */
|
||||
var imageData = o.context.getImageData(0, 0, o.canvas.width, o.canvas.height);
|
||||
// var buffer = imageData.data;
|
||||
var buffer32 = new Uint32Array( imageData.buffer );
|
||||
|
||||
|
||||
/* [3] On effectue notre modification
|
||||
=========================================================*/
|
||||
var matrix = new jsfeat.matrix_t(o.image.width, o.image.height, jsfeat.U8C1_t);
|
||||
var pixel,
|
||||
kernel_size = (this.canny_radius + 1) << 1,
|
||||
alpha = (0x000000FF << 24),
|
||||
p_num = buffer32.length,
|
||||
low_threshold = 40,
|
||||
high_threshold = 40,
|
||||
x = {},
|
||||
cur;
|
||||
|
||||
// jsfeat.imgproc.gaussian_blur(matrix, matrix, kernel_size, 0);
|
||||
|
||||
jsfeat.imgproc.canny(matrix, matrix, low_threshold | 0, high_threshold | 0);
|
||||
|
||||
for( i = 0 ; i < p_num ; i++ ){
|
||||
pixel = matrix.data[i];
|
||||
cur = (pixel << 16) | (pixel << 8) | pixel;
|
||||
x = {
|
||||
a: alpha,
|
||||
b: (cur & 0x00FF0000) >> 16,
|
||||
g: (cur & 0x0000FF00) >> 8,
|
||||
r: cur & 0x000000FF
|
||||
};
|
||||
if( x.r === 255 && x.g === 255 && x.b === 255 ) // white
|
||||
x = { r: x.r, g: 0, b: 0, a: (0x000000FF << 24) };
|
||||
else
|
||||
x.a = (0x00000000 << 24); // 'alpha' is set to min., i.e., '0'
|
||||
|
||||
buffer32[i] = x.a | (x.b << 16) | (x.g << 8) | x.r;
|
||||
}
|
||||
|
||||
/* (2) Copie le résultat sur le `<canvas>` */
|
||||
o.context.putImageData(imageData, 0, 0);
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
var DOM={body:$("body"),canvas:$("canvas"),imageLoader:$("#image-loader")},Controller=new dat.GUI,_CAN=DOM.canvas;_CAN.width=_CAN.height=1E3;
|
||||
var _CON=_CAN.getContext("2d"),iL,filterManager,process,exec=!1,last,trackerTask,init=function(){this.src="front:male:1.jpg";Controller.addFolder("image source");Controller.add(this,"src",this._images).listen();last=this.src},zones,track=new function(){this._update=!1;this.__defineGetter__("update",function(){return this._update});this.__defineSetter__("update",function(a){this._update=a;process.bind(DOM.imageLoader)()})},tracker=new tracking.ObjectTracker(["face","eye","mouth"]);tracker.setStepSize(1.5);
|
||||
Controller.addFolder("Tracking.js");Controller.add(track,"update");
|
||||
process=function(){if(this instanceof HTMLImageElement){console.time("PROCESS");this.src!=last&&(zones=[],exec=!1,last=this.src);exec||(this.defaultWidth=this.width,this.defaultHeight=this.height,log("Image copied","[Canvas]"),exec=!0);0===zones.length&&track.update&&(zones=[],trakerTask=tracking.track(DOM.imageLoader,tracker),tracker.on("track",function(a){a.data.forEach(function(a){zones.push({x:a.x/DOM.imageLoader.width,y:a.y/DOM.imageLoader.height,w:a.width/DOM.imageLoader.width,h:a.height/DOM.imageLoader.height})});
|
||||
log("Recognition done","[Tracking.js]");process.bind(DOM.imageLoader)()}));!track.update&&(zones=[]);_CON.clearRect(0,0,_CAN.width,_CAN.height);filterManager.get("ratio").apply();filterManager.get("contrast").apply();filterManager.get("sobel").apply();for(var a in zones){var b=zones[a].x*this.width,c=zones[a].y*this.height,d=zones[a].w*this.width,e=zones[a].h*this.height;_CON.beginPath();_CON.moveTo(b,c);_CON.lineTo(b,c+e);_CON.lineTo(b+d,c+e);_CON.lineTo(b+d,c);_CON.lineTo(b,c);_CON.lineWidth=5;
|
||||
_CON.stroke()}console.timeEnd("PROCESS")}};filterManager=new ReactiveFilterManager(DOM.imageLoader,_CAN,process);filterManager.add("ratio",reactiveRatio);filterManager.add("contrast",reactiveContrast);filterManager.add("sobel",reactiveSobel);Controller.addFolder("Image Ratio");Controller.add(filterManager.get("ratio"),"width",0,2).listen();Controller.add(filterManager.get("ratio"),"height",0,2).listen();Controller.addFolder("Image Processing");
|
||||
Controller.add(filterManager.get("contrast"),"contrast",0,100).listen();Controller.add(filterManager.get("sobel"),"sobelActive").listen();iL=new ImageLoader(DOM.imageLoader,init,process);
|
||||
var _CON=_CAN.getContext("2d"),iL,filterManager,process=function(){},exec=!1,last,trackerTask,init=function(){this.src="front/male/1.jpg";Controller.addFolder("Source Picture");Controller.add(this,"src",this._images).listen();last=this.src},zones,track={track:function(){zones=[];trackerTask=tracking.track(_CAN,tracker)}},tracker=new tracking.ObjectTracker(["face","eye","mouth"]);tracker.setStepSize(1.9);Controller.addFolder("Tracking.js");Controller.add(track,"track");
|
||||
tracker.on("track",function(b){b.data.forEach(function(a){zones.push({x:a.x/_CAN.width,y:a.y/_CAN.height,w:a.width/_CAN.width,h:a.height/_CAN.height})});log("Recognition done","[Tracking.js]");process.bind(DOM.imageLoader)()});
|
||||
process=function(){if(this instanceof HTMLImageElement){console.time("PROCESS");this.src!=last&&(zones=[],exec=!1,last=this.src);exec||(this.defaultWidth=this.width,this.defaultHeight=this.height,log("Image copied","[Canvas]"),exec=!0);_CON.clearRect(0,0,_CAN.width,_CAN.height);filterManager.get("resolution").apply();filterManager.get("contrast").apply();filterManager.get("sobel").apply();filterManager.get("gaussian").apply();filterManager.get("canny").apply();for(var b in zones){var a=zones[b].x*
|
||||
_CAN.width,c=zones[b].y*_CAN.height,d=zones[b].w*_CAN.width,e=zones[b].h*_CAN.height;_CON.beginPath();_CON.moveTo(a,c);_CON.lineTo(a,c+e);_CON.lineTo(a+d,c+e);_CON.lineTo(a+d,c);_CON.lineTo(a,c);_CON.lineWidth=5;_CON.strokeStyle="#f00";_CON.stroke()}console.timeEnd("PROCESS")}};filterManager=new ReactiveFilterManager(DOM.imageLoader,_CAN,process);filterManager.add("resolution",reactiveResolution);filterManager.add("contrast",reactiveContrast);filterManager.add("sobel",reactiveSobel);
|
||||
filterManager.add("gaussian",reactiveGaussianBlur);filterManager.add("canny",reactiveCanny);Controller.addFolder("Image Resolution");Controller.add(filterManager.get("resolution"),"width",0,2).step(.1).listen();Controller.add(filterManager.get("resolution"),"height",0,2).step(.1).listen();Controller.addFolder("Basic Image Processing");Controller.add(filterManager.get("contrast"),"contrast",0,100).listen();Controller.addFolder("Gaussian Blur");
|
||||
Controller.add(filterManager.get("gaussian"),"sigma",0,10).step(.5).listen();Controller.add(filterManager.get("gaussian"),"radius",1,11).step(1).listen();Controller.addFolder("Convolution Filters");Controller.add(filterManager.get("sobel"),"sobelActive").listen();Controller.add(filterManager.get("canny"),"canny_radius").listen();Controller.remember(filterManager.get("resolution"));Controller.remember(filterManager.get("contrast"));Controller.remember(filterManager.get("sobel"));Controller.remember(filterManager.get("canny"));
|
||||
Controller.remember(filterManager.get("gaussian"));Controller.__save_row.children[2].addEventListener("click",function(b){Controller.save();try{JSON.stringify(Controller.load.remembered)}catch(a){log("Error parsing/storing data.","[PermanentStorage]")}},!1);iL=new ImageLoader(DOM.imageLoader,init,process);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<?php
|
||||
|
||||
|
||||
|
|
@ -0,0 +1 @@
|
|||
{}
|
||||
|
|
@ -50,9 +50,9 @@
|
|||
|
||||
foreach($folder as $e=>$element)
|
||||
if( !is_array($element) )
|
||||
$flagged[] = substr("$name:$element", 1);
|
||||
$flagged[] = substr("$name/$element", 1);
|
||||
else
|
||||
$flagged = array_merge($flagged, toFlaggedImage($element, "$name:$e") );
|
||||
$flagged = array_merge($flagged, toFlaggedImage($element, "$name/$e") );
|
||||
|
||||
return $flagged;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue