Question

我的网站上有一个用户可以绘制的画布，也可以添加图像。通过单击“保存”按钮，我希望将画布保存为PNG图像。在Firefox中一切正常，但在Chrome中，例如当我在画布中添加图像然后尝试保存它时，画布上的图像尚未保存。

我在javascript中添加图片的代码是：

var imageObj = new Image();       
imageObj.onload = function(){
     x.drawImage(this, destX, destY, destWidth, destHeight);
};        
imageObj.src = 'myImage.png';

然后保存画布：

var drawingString = myDrawing.toDataURL("image/png");
var postData = "canvasData="+drawingString;  
var ajax = new XMLHttpRequest();
ajax.open("POST",'save_image.php',true);

<!-- set the mime type so the image goes through as base64 --> 
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.onreadystatechange=function() {
<!-- once the image data has been sent --> 
    if (ajax.readyState == 4){
        alert("Saved");
     }
}
ajax.send(postData);

并在PHP中：

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
   // Get the data like you would with traditional post
   $rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];

   // Remove the headers  
   $removeHeaders=substr($rawImage, strpos($rawImage, ",")+1);

   // decode it from base 64 and into image data only
   $decode=base64_decode($removeHeaders);

   // save to your server
   $imageFile = 'myImage.png';

   $fopen = fopen($imageFile, 'w' );
   fwrite( $fopen, $decode);
   fclose( $fopen ); 
}

问题是它在两种情况下都保存了背景画布。只有背景顶部的图像才会保存在Chrome，Safari或IE中。有谁知道为什么这段代码在Firefox和其他浏览器中表现不同？

使用图像保存画布，因为PNG仅适用于Firefox

0 个答案: