[英]Image Editor + AJAX - Base64
我正在使用切割工具實現圖像編輯器,並通過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。
問題解決了。 而不是通過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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.