Nudity detection with JavaScript and HTMLCanvas
nude.js | Nudity detection with JavaScript and HTMLCanvas an open source javascript implementation of a nudity scanner with htmlcanvas based on research papers
what i Need
nude.js
(function(){
var nude = (function(){
// private var definition
var canvas = null,
ctx = null,
resultFn = null,
// private functions
initCanvas = function(){
canvas = document.createElement("canvas");
// the canvas should not be visible
canvas.style.display = "none";
var b = document.getElementsByTagName("body")[0];
b.appendChild(canvas);
ctx = canvas.getContext("2d");
},
loadImageById = function(id){
// get the image
var img = document.getElementById(id);
// apply the width and height to the canvas element
canvas.width = img.width;
canvas.height = img.height;
// reset the result function
resultFn = null;
// draw the image into the canvas element
ctx.drawImage(img, 0, 0);
},
scanImage = function(){
// get the image data
var image = ctx.getImageData(0, 0, canvas.width, canvas.height),
imageData = image.data;
var myWorker = new Worker('worker.nude.js'),
message = [imageData, canvas.width, canvas.height];
myWorker.postMessage(message);
myWorker.onmessage = function(event){
resultHandler(event.data);
}
},
abc.html
<script>
$(document).ready(function(){
$("img").load(function(){
nude.load('testImage');
nude.scan(function(result)
{
if(!result) alert("no nude");
else
alert("nude)"); });
});
});
Error
Uncaught TypeError: Cannot read property 'width' of null
canvas.width = img.width; // line 28
Source: (StackOverflow)
I am unsure whether my calling of the external .js files are correct. Also, do I create a button or an asp:Button?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>NSFW Content Detection</title>
<link rel="icon" type="image/png" rel='nofollow' href="/images/nsfwcircle.jpg" />
<style type="text/css">
#t1 {
height: 405px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="~/js/nude.min.js" />
<asp:ScriptReference Path="~/js/noworker.nude.min.js" />
<asp:ScriptReference Path="~/js/worker.nude.min.js" />
<asp:ScriptReference Path="~/js/test.nude.js" />
</Scripts>
</asp:ScriptManager>
<div id="wrapper">
<h1>Demo pictures</h1>
<div class="entry" id="t1">
<img id="testImage" src="/images/1.jpg" width="500" height="375" alt="" />
<button style="width: 88px" title="Scan Image" class="btn" id="btnCall" onclick="nude.load(document.getElementById('testImage'));nude.scan(function(result){ if(!result) document.getElementById('result1').innerHTML='No nude!!'; });">Scan Image</button>
<div style="float:right;margin-top:-20px;" id="result1"> </div>
</div>
</div>
</form>
</body>
</html>
I want to just scan the images and return the values of whether the images are nude or not nude below the images.
Source: (StackOverflow)