Question

我正在编写一个程序，它从canvas元素中提取dataURL并将其发送到服务器端以转换回jpg并保存。我现在需要做的是以编程方式从服务器获取此图像并使用另一个ajax函数作为multipart / form-data编码形式发布。有些代码无法修改，而且期待这种类型的帖子。

具体说明：如何从服务器获取图像并将其置于enctype =＆＃34; multipart / form-data＆＃34;的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。我不确定哪个对我的最终目标更有用。

感谢All。

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
});

Ajax使用multipart / form-data发布dataURL

1 个答案: