Ir para conteúdo
Fórum Script Brasil
  • 0

"Crop" images


fiote

Pergunta

Esse código extende o objeto Image possibilitando o uso do método crop(). O método crop permite definir um retângulo dentro da figura a ser exibido.

Image.prototype.crop = function(x,y,lenx,leny) {    
    if (!this.divWrapper) {
        this.divWrapper = document.createElement('div');
        this.divWrapper.style.position = 'relative';
        this.divWrapper.style.overflow = 'hidden';
        this.parentNode.appendChild(this.divWrapper);
        this.divWrapper.appendChild(this);
        this.style.position = 'absolute';
    }
    this.divWrapper.style.width = lenx;
    this.divWrapper.style.height = leny;
    this.style.left = x*-1;
    this.style.top = y*-1;
    return this;
}


Os argumentos x,y definem o canto "superior-esquerdo" do retângulo.
lenx é a largura do retângulo (indo pra direita da posição x,y).
leny é a altura do retângulo (indo para baixo da posição x,y).

CODE
. lenx
(x,y) ---------- >
|
|
| leny
|
v



Segue abaixo um exemplo, utilizando a imagem-logo aqui do scriptBrasil:

<table>
    <tr valign='top'>
        <td>Imagem Original</td>
        <td>Imagem "cropada"</td>
    </tr>
    <tr>
        <td id='divImg1'></td>
        <td id='divImg2'></td>        
    </tr>
</table>

<script>

Image.prototype.crop = function(x,y,lenx,leny) {    
    if (!this.divWrapper) {
        this.divWrapper = document.createElement('div');
        this.divWrapper.style.position = 'relative';
        this.divWrapper.style.overflow = 'hidden';
        this.parentNode.appendChild(this.divWrapper);
        this.divWrapper.appendChild(this);
        this.style.position = 'absolute';
    }
    this.divWrapper.style.width = lenx;
    this.divWrapper.style.height = leny;
    this.style.left = x*-1;
    this.style.top = y*-1;
    return this;
}

var img1 = new Image();
img1.src = 'http://scriptbrasil.com.br/forum/style_images/sb_images/logo4.jpg';
document.getElementById('divImg1').appendChild(img1);

var img2 = new Image();
img2.src = 'http://scriptbrasil.com.br/forum/style_images/sb_images/logo4.jpg';
document.getElementById('divImg2').appendChild(img2);

img2.crop(70,0,210,50);

</script>
Editado por fiote
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...