MooTools 1.2 Image Protector: dwProtector

Igor Escobar on Ago 5th 2008

Hoje venho apresentar para vocês uma biblioteca que achei bastante interessante, escrita para o Framework javascript MooTools, chamada Image Protector, é uma grande novidade e talvez um grande marco para os designers que se descabelam para poder proteger suas imagens.

Esta biblioteca foi criada justamente para os designers ou artistas, que odeiam ver seus trabalhos copiados e ripados em segundos após dias, semanas, anos de trabalho dedicado, e o pior, as vezes até roubo de autoria.

O MooTools 1.2 Image Protector previne:

  • right-click "Save Image As".
  • Arrastar qualquer imagem para o desktop.
  • right-click "Save Background As".
  • right-click "View Background Image"

Segue abaixo tudo o que você precisa:

MooTools 1.2 Image Protector JavaScript Class

PLAIN TEXT
  1. //protector class
  2. var dwProtector = new Class({
  3.  
  4.     //implements
  5.     Implements: [Options],
  6.  
  7.     //options
  8.     options: {
  9.         image: 'blank.gif',
  10.         elements: $$('img'),
  11.         zIndex: 10
  12.     },
  13.    
  14.     //initialization
  15.     initialize: function(options) {
  16.         //set options
  17.         this.setOptions(options);
  18.        
  19.         //make it happen
  20.         this.protect();
  21.     },
  22.    
  23.     //a method that does whatever you want
  24.     protect: function() {
  25.         //for each image that needs be protected...
  26.         this.options.elements.each(function(el) {
  27.             //get the element's position, width, and height
  28.             var size = el.getCoordinates();
  29.             //create the protector
  30.             var p = new Element('img', {
  31.                 src: this.options.image,
  32.                 width: size.width,
  33.                 height: size.height,
  34.                 styles: {
  35.                     'z-index': this.options.zIndex,
  36.                     'left': size.left + 'px',
  37.                     'top': size.top + 'px',
  38.                     'position': 'absolute'
  39.                 }
  40.             }).inject($(document.body),'top');
  41.         },this);
  42.        
  43.     }
  44. });

Exemplo de uso

PLAIN TEXT
  1. window.addEvent('domready', function() {
  2.     var protector = new dwProtector({
  3.         image: '/blank.gif',
  4.         elements: $$('.protect')
  5.     });
  6. });

Caso você queira testar o MooTools 1.2 Image Protector, basta acessar.

[]'s
Igor.

Filed in Design, Java Script, MooTools, Utilidades | 8 responses so far

8 Responses to “MooTools 1.2 Image Protector: dwProtector”

  1. Cesar Ago 5th 2008 at 04:54 pm 1

    Muito boa esta ferramenta. Mesmo esquema usado pelo Orkut para a foto de capa do perfil. Tá certo que eu não faço grande uso dessas ferramentas, pq com um Photoshop e um Print Screen, já era… mas é uma boa para casos de sites que vão para o grande público, onde a maioria nem sabe para que servem os botões acima dos números no teclado.

    Obrigado pela dica.

  2. Izac Ago 5th 2008 at 08:22 pm 2

    Interessante, mas basta desativar o Javascript do navegador que o Image Protector não funciona mais.

  3. Igor Escobar Ago 5th 2008 at 08:53 pm 3

    Esta descrito no post o que o script faz =)

    Não disse que ele protege 100% suas imagens.

    Abraços.

  4. Web Designer Demétrios Ago 6th 2008 at 12:49 am 4

    Interessante o port mas aqui não funcionou nem no FF nem no IE.

  5. Igor Escobar Ago 6th 2008 at 11:53 am 5

    No site no autor mostrar funcionando perfeitamente em todos os navegadores Demétrios, certifique-se de que você não esta fazendo nada de errado.

  6. Julio Cesar Ago 14th 2008 at 09:49 am 6

    Igor, primeiramente, legal seu blog! boas materias. ganhou mais um assinante!

    Achei legal esse lance, ele cria uma imagem por cima da imagem ne. igual no flickr.com

    Acho que pra deixar mais poderoso ainda, seria interessante um ModRewrite pra .jpg, assim nem pelo codigo fonte daria pra roubar a imagem.

    *PrintScreen nao vem com a qualidade real da imagem.

  7. Igor Escobar Ago 14th 2008 at 10:29 am 7

    Muito obrigado Julio, maneiras de se roubar tem, mais ja é uma evolução, quem sabe um dia o próprio browser não se encarregue disso com a adição de alguma metatag no documento etc., nunca se sabe.

    Grande abraço.

  8. Rafael Marin Ago 30th 2008 at 01:40 pm 8

    Tentar proteger as imagens contra cópia na web é algo bem Front Page 2000, não acha?

Trackback URI | Comments RSS

Leave a Reply