圖像編輯器+ AJAX - Base64

我正在使用切割工具實現圖像編輯器，並通過Ajax進行上傳。圖像編輯器+ AJAX - Base64

圖像編輯器：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和圖像編輯器團塊的轉化限制我的500像素（誤差在服務器側）的圖象，而通過Ajax進行上傳的轉換以不同的方式更高效地完成，這可以將分辨率文件發送到更高的位置（使用相同的上傳代碼而不會出錯）。

我的問題是如何將兩個代碼集成：利用切削刀具1和格式轉換工具2.

來源

2016-10-27 Everson Bigaton

問題解決了。而不是通過HTML POST發送base64字符串（我將字符串攜帶在隱藏字段中），派發AJAX POST。

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

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

保存在ASP映像中的示例base64。（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);

來源

2016-10-27 19:43:38

圖像編輯器+ AJAX - Base64

回答

相關問題