使用multipart / form-data的Ajax Post dataURL

Question

我正在编写一个程序，该程序从canvas元素中提取dataURL并将其发送到服务器端，以转换回jpg并保存。 我现在需要做的是，以编程方式从服务器获取此图像，并使用另一个ajax函数将其发布为多部分/表单数据编码表单。 有些代码无法修改，因此需要这种类型的帖子。

具体来说：如何从服务器上获取图像并将其放入enctype =“ multipart / form-data”的POST中，以便接收请求的代码将其视为来自常规形式的帖子。 所有这些都使用Jquery或JavaScript Ajax。

额外信息：发布到的代码为ASP经典版本。 我正在使用PHP转换DataURL。 PHP代码：

//Get the base-64 string from data
$data=$_POST['img_val'];

list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);

file_put_contents('filename.png', $data);

$images_orig = imagecreatefrompng('filename.png');
$photoX = ImagesX($images_orig);
$photoY = ImagesY($images_orig);
$images_fin = ImageCreateTrueColor(650, 650);
ImageCopyResampled($images_fin, $images_orig, 0, 0, 0, 0, 650+1, 650+1, $photoX, $photoY);
imagejpeg($images_fin, NULL, 100);

ImageDestroy($images_orig);
ImageDestroy($images_fin);

上面的代码可用于返回二进制映像文件或将内容保存到磁盘并返回映像URL。 我不确定哪个对我的最终目标会更有用。

谢谢大家。

Answer 1

因此，对于那些需要解决此类问题的人来说，答案有点复杂。 上面的PHP代码确实将图​​像从dataURL正确转换为png，然后将其调整为jpg。 从ajax制作multipart / form-data Post的正确方法是这样的：

var url = "example.php"
var image_as_blob = previousAjaxRequest(); //use xhr.responseType = "blob" and a GET request to grab server image 
var form = new FormData();
form.append('image_variable_name', image_as_blob, 'file_name.extension'); //the third argument seemed to make all the difference in server code seeing the file correctly.
$.ajax({
    url: url,
    type: 'post',
    data: form,
    cache: false,
    contentType: false, //required for multipart
    processData: false  //required for multipart
}).done(function( data ) {
    //do what you want with returned data
});