无法将图像画布保存到使用AJAX/PHP的文件

我发现了一个很棒的图像裁剪工具，可用于我的应用程序。 http://tympanus.net/codrops/2014/10/30/resizing-cropping-images-canvas/无法将图像画布保存到使用AJAX/PHP的文件

工作完美，作物就像我想要的，但我无法弄清楚如何通过PHP/AJAX保存裁剪文件。虽然有涉及很多文件，将3修改为：

index.php (Cropper Tool) 
savefile.php 
js/component.js (the main functions)

在上面的链接文章的评论，有人改变了JS一个AJAX调用发送到PHP文件，以“拯救”裁剪后的图像。我无法让它工作。

下面的代码，我的修改component.js

crop = function(){ 
//Find the part of the image that is inside the crop box 
var crop_canvas, 
    left = $('.overlay').offset().left - $container.offset().left, 
    top = $('.overlay').offset().top - $container.offset().top, 
    width = $('.overlay').width(), 
    height = $('.overlay').height(); 

crop_canvas = document.createElement('canvas'); 
crop_canvas.width = width; 
crop_canvas.height = height; 

crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height); 

//=== set our canvas data 
var canvasData = crop_canvas.toDataURL('image/png'); 

//=== call ajax to fire php save function 
var ajax = new XMLHttpRequest();  
ajax.open('POST','savefile.php',true); 
ajax.setRequestHeader('Content-Type', 'application/upload'); 
ajax.send(canvasData); 


//=== displays image in new window to prove its working 
window.open(crop_canvas.toDataURL('image/png')); 

}

接下来的部分是savefile.php。由于没有任何东西可以保存，所以我永远无法分辨这是否真的在开火。

<?php 

$imageData = $_POST['data']; 

//==== replace with dynamic names later === 
$imgFile = “test.jpg”; 

if (!empty($imageData)) { 
    // Remove the headers (data:,) part. 
    // A real application should use them according to needs such as to check image type 
    $filteredData=substr($imageData, strpos($imageData, “,”)+1); 

    // Need to decode before saving since the data we received is already base64 encoded 
    $unencodedData=base64_decode($filteredData); 

    // Save file. 
    $fp = fopen('$imgFile', ‘wb’); 
    fwrite($fp, $unencodedData); 
    fclose($fp); 
} 
header (‘Location: index.php’); 
?>

洞察力非常感谢 - 花了整个星期五晚上试图调试无济于事！

来源

2015-09-26 Michael

请检查我的答案。 –

您可能只需要很少的更改，我仍然发布ajax和php代码。在这里，我不是指向canvas和dataURL，我认为canvasData是dataURL。

这里是ajax，首先根据浏览器选择xmlhttp方法，打开ajax查询，添加请求头并发送数据。

if (window.XMLHttpRequest) 
      { xmlhttp = new XMLHttpRequest(); 
     } else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     }xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {    
       functions(xmlhttp.responseText);} } 
     xmlhttp.open("POST","test1.php",true); 
     xmlhttp.setRequestHeader('Content-Type', 'application/upload'); 
     xmlhttp.send(canvasData);

在php中，数据的帖子将以“HTTP_RAW_POST_DATA”的形式发布。所以PHP会如下。

if(isset($GLOBALS["HTTP_RAW_POST_DATA"])) //if data send 
{ 
$imgFile = 'test.jpg'; //set file name to write 
$imageData=$GLOBALS['HTTP_RAW_POST_DATA']; //copy data from globals to variable 
$filteredData=substr($imageData, strpos($imageData, ",")+1); //filter dataurl string 
$unencodedData=base64_decode($filteredData); //decode url 
$fp = fopen($imgFile, 'wb'); //open file with write permission 
fwrite($fp, $unencodedData);  //write file 
fclose($fp); //close the filehandling 
}

来源

2015-09-26 16:14:36

感谢Subin - 但仍然无法生成文件保存结果。我在之后插入了你的AJAX代码var canvasData = crop_canvas.toDataURL（'image/png'）; 我将PHP剪切/粘贴到我的savefile.php中。它仍然没有激发PHP文件。这是我第一次尝试使用AJAX/PHP保存文件，因此它必须是一些小的内容，禁止JS无法使用PHP。有任何想法吗？谢谢！ – Michael

你$imageData变量变成空$_POST['data']（我猜）。尝试使用FormData：

var ajax = new XMLHttpRequest();  
ajax.open('POST','savefile.php',true); 
var data = new FormData(); 
data.append('data', canvasData); 
ajax.send(data);

或作为您已经使用jQuery：

$.post('saveimage.php', {data: canvasData}, function(){ 
    alert('Image saved!'); 
});

来源

2016-02-06 17:29:16

无法将图像画布保存到使用AJAX/PHP的文件

回答

相关问题