图像编辑器+ AJAX - Base64
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);
相关文章:
- AJAX 帖子 8 位干净吗?/ 与 Base64 的关系 / 另一种选择?/它在哪里
- Base64 图像通过 Ajax encodeURIComponent 发送
- 在javascript中将base64图像转换为文件,或者如何使用jquery ajax传递一个大的base64字符串
- 返回 base64 文件的字符串作为响应 ASP.NET 使用 httpHandler 对 AJAX 请求的响应
- base64编码的ajax的损坏发送了一些想法
- 用于 AJAX 文件上传的分段或 base64
- 谷歌地图叠加图块:JSON base64 ajax 调用而不是图像网址
- 使用Ajax上传base64图像
- 如何通过.ajax发布base64编码的图像
- Ajax调用Php脚本以获取base64字符串中的图像,该字符串可在本地主机上工作,但不能从托管服务器中获取
- 通过ajax将base64图像数据发送到cfc
- Ajax API请求返回base64图像数据的400
- 无法通过异步ajax调用呈现base64图像返回
- 图像编辑器+ AJAX - Base64
- 从ajax响应到img标签的Base64字符串
- 当通过file_put_contents将base64图像发送到文件夹时,从ajax获得413请求实体太大错误
- 通过jQuery AJAX接收图像并显示图像,而不需要服务器对图像进行base64编码
- Ajax发送多个base64图像
- Ajax POST large base64 from mobible
- 如何发送大图像或其base64字符串,使用ajax