Traduzido do 日本語 • Ver original É uma ferramenta de aparador de imagens que importa qualquer imagem para um HTML5 CANVAS, a corta e redimensiona com um intervalo, e a gera com um formato de arquivo especificado.
Quanto ao fluxo de processamento,
- Pesquise no diretório especificado e adicione apenas os arquivos de imagem ao menu suspenso.
- Sobrepor a caixa de arrastar e soltar (camada div) do jQueryUI sobre a imagem carregada no CANVAS.
- Quando o botão de corte for pressionado, arraste e solte para obter as coordenadas X,Y e a largura da camada div.
- Recalcular as coordenadas adquiridas e a largura em relação à razão real de tamanho da imagem original, recortar e redimensionar até o tamanho final da saída.
- Converter a imagem final de saída em dados de texto usando o método toDataURL() do CANVAS e postá-la em PHP no Ajax.
- PHP lado converte os dados de texto recebidos em dados binários JPEG/PNG e os envia para a localização especificada.
HTML5 e JavaScript sozinhos não podem gerar arquivos binários como arquivos locais, então processei em PHP.
Eu o desenvolvi como uma extensão da ferramenta de gerenciamento de arquivos de imagem, mas é uma ferramenta protótipo que ainda não viu a luz do dia (então a ferramenta em si parece muito boa).
Código de uso: HTML5, JavaScript, jQuery, PHP
É uma ferramenta de aparador de imagens que importa qualquer imagem para um HTML5 CANVAS, a corta e redimensiona com um intervalo, e a gera com um formato de arquivo especificado.
Quanto ao fluxo de processamento,
- Pesquise no diretório especificado e adicione apenas os arquivos de imagem ao menu suspenso.
- Sobrepor a caixa de arrastar e soltar (camada div) do jQueryUI sobre a imagem carregada no CANVAS.
- Quando o botão de corte for pressionado, arraste e solte para obter as coordenadas X,Y e a largura da camada div.
- Recalcular as coordenadas adquiridas e a largura em relação à razão real de tamanho da imagem original, recortar e redimensionar até o tamanho final da saída.
- Converter a imagem final de saída em dados de texto usando o método toDataURL() do CANVAS e postá-la em PHP no Ajax.
- PHP lado converte os dados de texto recebidos em dados binários JPEG/PNG e os envia para a localização especificada.
HTML5 e JavaScript sozinhos não podem gerar arquivos binários como arquivos locais, então processei em PHP.
Eu o desenvolvi como uma extensão da ferramenta de gerenciamento de arquivos de imagem, mas é uma ferramenta protótipo que ainda não viu a luz do dia (então a ferramenta em si parece muito boa).
Código de uso: HTML5, JavaScript, jQuery, PHP