Adicionando margens de sangramento a sprites CSS com o ImageMagick

Question

Eu tenho uma spriteheet de CSS com sprites de tamanho igual. Eu quero adicionar uma margem de 1 pixel para cada sprite, e estender o pixel mais externo de cada sprite naquela margem - basicamente um completo Sangre efeito para cada sprite. Por exemplo, se eu comecei com a spriteheet a seguir de quatro sprites 8x8:

Eugostariadeterminarcomisso:(retângulosamarelosadicionadosparachamarotamanhooriginaldosprite)

Existem maneiras de adicionar uma margem blank entre os sprites, mas eu procurei na documentação e não vi um comando para adicionar uma margem bleed assim.

Eu pensei em adicionar uma margem em branco em torno de cada sprite e, em seguida, compor o resultado consigo mesmo em vários deslocamentos. Mas isso não funcionará quando alguns dos sprites forem transparentes, porque ele adicionaria pixels dentro do sprite original (tornando os dois sprites inferiores super-bold), e eu só quero adicionar pixels extras ao redor do lado de fora.

Agora, obviamente, posso usar fatias manualmente e, em seguida, -append / +append . Por exemplo, eu poderia fazer isso para adicionar as margens de sangramento horizontais:

convert in.png[1x16+0+0] in.png[8x16+0+0] in.png[1x16+7+0]
        in.png[1x16+8+0] in.png[8x16+8+0] in.png[1x16+15+0]
        +append temp.png

E o mesmo tipo de coisa novamente para adicionar a vertical. A desvantagem é que isso requer que eu saiba quantos sprites existem e adicione parâmetros para cada linha e cada coluna; então, se eu quiser algo que possa ser reutilizado com spritesheets de tamanhos diferentes, preciso escrever um script que descubra as dimensões da imagem e gere a linha de comando.

Existe uma maneira mais simples de adicionar uma margem de sangramento entre os sprites - de preferência um que não requer que eu escreva um script para gerar os parâmetros da linha de comando de convert programaticamente?

    

Answer 1

Eu tive um problema muito semelhante em que eu queria adicionar pixels sangrados ao redor da minha imagem para fins de impressão. Meu problema era mais simples porque eu só queria fazer isso para toda a imagem, não para imagens lado a lado. Enfim, aqui está:

Começando com esta imagem de 32 x 32 pixels: paraestaversão70x70:

convert tree.gif  -set option:distort:viewport 70x70-19-19 \
      -virtual-pixel Edge -filter point -distort SRT 0 \
      +repage  virtual_edge.gif

Você pode ver isso basicamente adiciona 19 pixels ao redor da borda (porque ((70-32) / 2) = 19 )

Acho que isso deve levá-lo a maior parte do caminho em direção à sua solução. Mais detalhes aqui .