我在HTML5 + JS中编写应用程序，在某些时候我需要上传<canvas>元素的内容，其中包含一些PNG文件。所以我正在做：
$('#img').val(canvasElement.toDataURL());
正如您所看到的，我没有为toDataURL函数提供任何参数，因此提取的图像将采用PNG格式。 #img是一个文本输入（名称属性＆＃34; img＆＃34;），稍后用于将从canvas中提取的图像的base64表示上载到服务器。我用AJAX做，请求一个包含以下代码的PHP文件：
$data = explode(',', $_POST['img']);
$imgdata = base64_decode($data[1]);
$ifp = fopen('superGraphicFile.png', "wb");
fwrite($ifp, $imgdata);
fclose($ifp);
这样可行，但遗憾的是300x600的PNG文件足以使AJAX请求持续很长时间（如20秒），因为文件大小约为400 kB。在我的情况下，所需的时间是不可接受的。
我想知道如何减少发送到服务器的数据量，我认为将其作为JPG发送会很酷，因为我们可以指定从画布中提取的JPEG图像的质量。例如，调用toDataURL('image/jpeg',0.7)会使文件超过小10倍，而不是使用无参数调用它。但是，我必须保留原始PNG文件中有关透明度的信息，而且由于JPG不能这样做，我想发明一些方法在服务器端重新创建原始PNG。
首先，我考虑使用某种特定颜色填充原始PNG中的所有透明像素，将其转换为JPG，发送到服务器，并用透明像素替换所有具有该颜色的像素。但是，这可能不起作用，因为我还需要保留原始图像中的半透明像素。也许有一些方法从原始图像中提取alpha通道，将其作为另一个JPG发送到服务器并将其作为掩码应用于服务器端，以这种方式重新创建原始PNG？或者我可能错过了其他一些解决方案？
我提前感谢你的所有意见。
编辑：我写的20秒可能是我的互联网连接存在的一些问题，因为我没有改变任何内容现在需要大约一秒钟来传输400 kb的数据。但我仍然认为，将服务器资源节省10倍并使应用程序更快地运行将是一件很酷的事情。