Сохранить холст с изображением, так как PNG работает только в Firefox - PullRequest
1 голос
/ 02 марта 2012

У меня на сайте есть холст, на котором пользователь может рисовать, а также добавлять изображения.Нажав кнопку «Сохранить», я хочу сохранить холст в виде изображения в формате PNG.В Firefox все работает нормально, но в Chrome, например, когда я добавляю изображение на холст, а затем пытаюсь сохранить его, изображение на холсте не сохраняется.

Мой код в javascript для добавления изображенияis:

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 и в других браузерах?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...