I'm implementing an image editor with the cut and upload tool via Ajax.
Image Editor: link
Upload via Ajax: link
Converting from image to base64 and blob from image editor restricts me to a 500px (server-side error) image while uploading via Ajax conversion is done differently and more efficiently where I can send resolution files (using the same upload code, without errors).
My question is how to integrate the 2 codes: use the cut of tool 1 and the conversion of tool 2.
Problem solved. Instead of sending the base64 string through the HTML POST (where I loaded the string into a hidden field), I'd send it through the AJAX POST.
document.querySelector('#btnCrop').addEventListener('click', function(){
var img = cropper.getDataURL()
$.post('ajax/salvar2.asp', {imagem: img});
This post can be used in PHP and ASP.
Example save base64 in ASP image. (save2.asp)
base64String = Trim(Request.Form("imagem"))
Set tmpDoc = Server.CreateObject("MSXML2.DomDocument")
Set nodeB64 = tmpDoc.CreateElement("b64")
nodeB64.DataType = "bin.base64"
nodeB64.Text = Mid(base64String, InStr(base64String, ",") + 1)
set bStream = server.CreateObject("ADODB.stream")
bStream.type = 1
call bStream.Open()
call bStream.Write(nodeB64.NodeTypedValue)
caminho=Server.MapPath("../caminho_salvaer/imagem.png")
call bStream.SaveToFile(caminho, 2)
call bStream.close()
set bStream = nothing
save.php
<?php
// Recuperando imagem em base64
// Exemplo: data:image/png;base64,AAAFBfj42Pj4
$imagem = $_POST['imagem'];
// Separando tipo dos dados da imagem
// $tipo: data:image/png
// $dados: base64,AAAFBfj42Pj4
list($tipo, $dados) = explode(';', $imagem);
// Isolando apenas o tipo da imagem
// $tipo: image/png
list(, $tipo) = explode(':', $tipo);
// Isolando apenas os dados da imagem
// $dados: AAAFBfj42Pj4
list(, $dados) = explode(',', $dados);
// Convertendo base64 para imagem
$dados = base64_decode($dados);
// Gerando nome aleatório para a imagem
$nome = md5(uniqid(time()));
// Salvando imagem em disco
file_put_contents("../img/{$nome}.jpg", $dados);