Obtendo dados binários (base64) do Canvas HTML5 (readAsBinaryString)

Existe alguma maneira de ler o conteúdo de uma canvas HTML como dados binários?

No momento, eu tenho o seguinte HTML para mostrar um arquivo de input e a canvas abaixo:

Input:

Canvas

Eu configurei meu arquivo de input para definir a canvas corretamente, o que funciona bem:

 $('#fileInput').on('change', function() { $.each(this.files, function() { var image = new Image(); image.src = window.URL.createObjectURL(this); image.onload = function() { $("canvas").drawImage({ source: image, x: 50, y: 50, width: 100, fromCenter: false }); }; }); }); 

Agora preciso obter os dados binários (Base64 codificados) do Canvas quando o botão é clicado, para que os dados sejam enviados ao servidor …

O resultado final é que preciso fornecer ao usuário a capacidade de selecionar um arquivo, recortar / redimensioná-lo e, em seguida, clicar em um botão no ponto em que a imagem editada será carregada no servidor (não é possível fazer o server-side corte / redimensionamento devido a limitações do lado do servidor …)

Qualquer ajuda seria ótimo! Felicidades

O elemento canvas fornece um método toDataURL que retorna um data: URL que inclui os dados da imagem codificada em base64 em um determinado formato. Por exemplo:

 var jpegUrl = canvas.toDataURL("image/jpeg"); var pngUrl = canvas.toDataURL(); // PNG is the default 

Embora o valor de retorno não seja apenas os dados binários codificados em base64, é simples remover o esquema e o tipo de arquivo para obter apenas os dados desejados.

O método toDataURL falhará se o navegador achar que você desenhou para a canvas todos os dados que foram carregados de uma origem diferente, portanto, essa abordagem só funcionará se os arquivos de imagem forem carregados do mesmo servidor da página HTML cujo script está executando esta operação.

Para obter mais informações, consulte os documentos do MDN na API da canvas , que inclui detalhes sobre toDataURL e o artigo da Wikipedia sobre os data: esquema de URI , que inclui detalhes sobre o formato do URI que você receberá dessa chamada.

Vendo como você desenha sua canvas com

$("canvas").drawImage();

parece que você usa o jQuery Canvas ( jCanvas ) por Caleb Evans. Eu realmente uso esse plugin e ele tem uma maneira simples de recuperar a string de imagem $('canvas').getCanvasImage(); com $('canvas').getCanvasImage();

Aqui está um violino trabalhando para você: http://jsfiddle.net/e6nqzxpn/