Canvas e imagem se convertem com o código de amostra

Comentário: Este artigo mostra como converter a imagem em tela e como extrair uma imagem. O código de amostra é o seguinte. Amigos dessa necessidade podem se referir a ela. Espero que seja útil para você.

Demonstração original: demonstração de conversão de imagem JavaScript

Na conferência de Desenvolvimento da Web Mozilla da semana passada, acabamos passando a maior parte do dia discutindo futuras aplicações de mercado da Mozilla. O Instagram é o aplicativo móvel mais popular recentemente, vendido ao Facebook por um preço alto de US $ 1 bilhão.

Não me importo de ganhar algum dinheiro extra, então decidi criar um aplicativo no estilo do Instagram (compartilharei mais tarde)

Este artigo mostra como converter a imagem em tela e como extrair uma imagem.

Converter imagem em tela

Para converter uma imagem em lona (quadro -de -obra, tela), você pode usar o método de drawimage do contexto do elemento de tela:

// Converta a imagem em objeto de tela

Função ConvertimageTocanvas (imagem) {

// Crie um elemento de tela DOM e defina sua largura e altura da mesma forma que a imagem

var canvas = document.createElement ("tela");

canvas.width = image.width;

canvas.Height = Image.Height;

// coordenadas (0,0) indicam o desenho daqui, que é equivalente a compensar.

Canvas.getContext ("2d"). DrawImage (imagem, 0, 0);

retornar tela;

}

Converter tela em imagem

Supondo que a imagem tenha sido processada na tela, você pode usar o seguinte método para converter tela em um objeto de imagem de imagem.

// extraia imagem da tela

Função ConvertCanvastoimage (Canvas) {

// O novo objeto de imagem pode ser entendido como dom

Var Image = new Image ();

// canvas.todataurl retorna uma sequência de URLs codificados base64. Obviamente, o próprio navegador deve apoiá -lo.

// Especifique o formato png

image.src = canvas.todataurl ("image/png");

imagem de retorno;

}

Uh! A conversão de imagens de imagem e tela é mais fácil do que você pensa. No futuro, demonstrarei diferentes tecnologias de processamento de imagens para você. Acredito que você definitivamente ganhará muito dinheiro com essas tecnologias no futuro.