У меня на сайте есть холст, на котором пользователь может рисовать, а также добавлять изображения.Нажав кнопку «Сохранить», я хочу сохранить холст в виде изображения в формате 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 и в других браузерах?