Permalink
Browse files

Added loadByElement function for loading image/video content into the…

… canvas
  • Loading branch information...
pa7 committed Nov 28, 2010
1 parent ed3aa40 commit c8eb68331a763e0016ab8a03601406f08524f697
Showing with 41 additions and 14 deletions.
  1. +1 −1 compressed/noworker.nude.min.js
  2. +1 −1 compressed/nude.min.js
  3. +22 −9 noworker.nude.js
  4. +15 −1 nude.js
  5. +1 −1 tests/noworker.nude.min.js
  6. +1 −1 tests/nude.min.js

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -28,18 +28,27 @@
b.appendChild(canvas);
ctx = canvas.getContext("2d");
},
- loadImage = function(id){
-
- img = document.getElementById(id);
+ 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 arrays
- skinRegions = [],
+ // reset the result function
resultFn = null;
// draw the image into the canvas element
ctx.drawImage(img, 0, 0);
-
-
+
+ },
+ loadImageByElement = function(element){
+ // apply width and height to the canvas element
+ // make sure you set width and height at the element
+ canvas.width = element.width;
+ canvas.height = element.height;
+ // reset result function
+ resultFn = null;
+ // draw the image/video element into the canvas
+ ctx.drawImage(element, 0, 0);
},
scanImage = function(){
// get the image data
@@ -425,8 +434,12 @@
init: function(){
initCanvas();
},
- load: function(id){
- loadImage(id);
+ load: function(param){
+ if(typeof(param) == "string"){
+ loadImageById(param);
+ }else{
+ loadImageByElement(param);
+ }
},
scan: function(fn){
if(arguments.length>0 && typeof(arguments[0]) == "function"){
View
16 nude.js
@@ -33,6 +33,16 @@
ctx.drawImage(img, 0, 0);
},
+ loadImageByElement = function(element){
+ // apply width and height to the canvas element
+ // make sure you set width and height at the element
+ canvas.width = element.width;
+ canvas.height = element.height;
+ // reset result function
+ resultFn = null;
+ // draw the image/video element into the canvas
+ ctx.drawImage(element, 0, 0);
+ },
scanImage = function(){
// get the image data
var image = ctx.getImageData(0, 0, canvas.width, canvas.height),
@@ -69,7 +79,11 @@
},
load: function(param){
- loadImageById(param);
+ if(typeof(param) == "string"){
+ loadImageById(param);
+ }else{
+ loadImageByElement(param);
+ }
},
scan: function(fn){
if(arguments.length>0 && typeof(arguments[0]) == "function"){

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

7 comments on commit c8eb683

How to detect remote url images??? Any solution? Because, remote url images can't be detected as an image inside project filesystem.

@finnegerd my wide guess is YES, here is how would do it. Lets get the remote image to a canvas and use it as internal image?

Hi niksmac! Actually, my javascript knowledge is very limited. But I try assign, for example src="https://www.github.avatars/2.jpg" rather than src="../images/4.jpg", and nude.js doesn't work. Can you explain me how can I make remote url detection possible? You may give me some references if possible, also. This is a big issue for me to solve. I want to learn from you something, if you can help. Thanks in advance!..

In fact I was having a similar issue as well and still didn't solve it. I wanted to implement nude.js as chrome extension to replace nude images with some other image in all pages. But, I was getting a CORS error (Cross-origin resource sharing) when scanning at some remote images. Some help would be very appreciated. Here is my repo:
https://github.com/trimkadriu/Nudity-Blocker-Chrome-Extension

Owner

pa7 replied Oct 26, 2015

here's how you can solve it: you need to have a proxy to have the image served from your domain -- unfortunately there is no other way due to HTML5 canvas' CORS restrictions.
but someone created a plugin to fetch a base64 representation of an image via JSONP and his server: http://stackoverflow.com/questions/7988202/how-to-use-canvas-to-modify-images-from-another-domain
so you probably don't need your own proxy server

Great, I will give that a try, thanks a lot.

@trimkadriu please create a pull request once you're done, it will be a good feature addition this awesome lib.

Please sign in to comment.