Estou usando a ferramenta JavaScript "Canvas2Image" da Nihilogic para converter desenhos de tela em imagens PNG. O que eu preciso agora é transformar as strings base64 que essa ferramenta gera, em arquivos PNG reais no servidor, usando PHP.
Em resumo, o que estou fazendo atualmente é gerar um arquivo no lado do cliente usando o Canvas2Image, recuperar os dados codificados em base64 e enviá-los ao servidor usando o AJAX:
// Generate the image file
var image = Canvas2Image.saveAsPNG(canvas, true);
image.id = "canvasimage";
canvas.parentNode.replaceChild(image, canvas);
var url = 'hidden.php',
data = $('#canvasimage').attr('src');
$.ajax({
type: "POST",
url: url,
dataType: 'text',
data: {
base64data : data
}
});
Neste ponto, "hidden.php" recebe um bloco de dados parecido com dados: image / png; base64, iVBORw0KGgoAAAANSUhEUgAABE ...
A partir deste momento, estou praticamente perplexo. Pelo que li, acredito que devo usar a função imagecreatefromstring do PHP , mas não tenho certeza de como criar uma imagem PNG real a partir da string codificada em base64 e armazená-la no meu servidor. Por favor, ajudem!
fonte
Respostas:
Você precisa extrair os dados da imagem base64 dessa string, decodificá-los e salvá-los no disco, não precisa do GD, pois já é um png.
E como uma linha:
Um método eficiente para extrair, decodificar e verificar erros é:
fonte
$type
recebe um valor atribuído da explosão, dependendo se são dados: imagem / jpg ou dados: imagem / png etc.Tente o seguinte:
file_put_contents docs
fonte
data:image/png;base64,
que quebra o arquivo.data:image/png;base64,
sequência, a sequência para a qual está passandobase64_decode
não é válida base64. Você precisa enviar apenas os dados, que é o que a resposta de drew010 está ilustrando. Não há nada quebrado com esta resposta. Você não pode copiar e colar sem entender e espera que "funcione".Eu tive que substituir espaços por mais símbolos
str_replace(' ', '+', $img);
para fazer isso funcionar.Aqui está o código completo
Espero que ajude.
fonte
$img = str_replace(' ', '+', $img);
me ajudou muito, obrigado! Por que eu tenho que converter o espaço para "+" antes?Vale dizer que o tópico discutido está documentado na RFC 2397 - O esquema de URL "dados" ( https://tools.ietf.org/html/rfc2397 )
Por causa disso, o PHP tem uma maneira nativa de lidar com esses dados - "data: stream wrapper" ( http://php.net/manual/en/wrappers.data.php )
Portanto, você pode manipular facilmente seus dados com fluxos PHP:
fonte
preg_replace
+file_put_contents
?Bem, sua solução acima depende da imagem ser um arquivo jpeg. Para uma solução geral, usei
fonte
Adotada a idéia @ dre010, estendi-a para outra função que funciona com qualquer tipo de imagem: PNG, JPG, JPEG ou GIF e fornece um nome exclusivo ao nome do arquivo
A função separa dados e tipo de imagem
fonte
Total de preocupações:
fonte
Solução linear.
fonte
com base no exemplo drew010, fiz um exemplo prático para facilitar o entendimento.
fonte
tente isso ...
fonte
Este código funciona para mim, verifique o código abaixo:
fonte
Esta função deve funcionar. ele possui o parâmetro photo que contém a string base64 e também o caminho para um diretório de imagens existente, caso você já tenha uma imagem existente que deseja desvincular enquanto salva a nova.
fonte
É simples :
Vamos imaginar que você esteja tentando fazer upload de um arquivo dentro da estrutura js, solicitação ajax ou aplicativo móvel (lado do cliente)
Aqui como fazê-lo usando PHP
fonte
Se você deseja renomear imagens aleatoriamente e armazenar o caminho da imagem no banco de dados como blob e a própria imagem nas pastas, esta solução o ajudará. Os usuários do seu site podem armazenar quantas imagens quiserem, enquanto as imagens serão renomeadas aleatoriamente por motivos de segurança.
Código php
Gere varchars aleatórios para usar como nome da imagem.
Obtenha a extensão de dados da imagem e a parte base_64 (parte após os dados: image / png; base64,) da imagem.
fonte
PHP já tem um tratamento justo base64 -> transformação de arquivo
Eu uso para fazê-lo desta maneira:
fonte