图像编辑器+ AJAX - Base64

Question

我正在实现一个图像编辑器与切割工具，并通过Ajax上传。

图像编辑器：http://codepen.io/bigaton/pen/NRBKaa

var cropper;
        document.querySelector('#file').addEventListener('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = new cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })

通过Ajax上传：https://github.com/rafaelcouto/Post1334

图像到base64和图像编辑器blob的转换将我限制在500px的图片(服务器端错误)，而通过Ajax上传转换是不同的和更有效的，它可以发送更高分辨率的文件(使用相同的上传代码没有错误)。

我的问题是如何集成这两个代码:使用切割工具1和格式转换工具2。

Answer 1

问题解决了。不是通过HTML POST发送base64字符串(我将字符串放在隐藏字段中)，而是发送AJAX POST。

   document.querySelector('#btnCrop').addEventListener('click', function(){
   var img = cropper.getDataURL()
   $.post('ajax/salvar2.asp', {imagem: img});

此条目可以在PHP和ASP中使用。

示例base64保存在ASP镜像中。(Salvar2.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

salvar.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);