Question

我发现了一个很棒的图像裁剪工具，可用于我的应用程序。 http://tympanus.net/codrops/2014/10/30/resizing-cropping-images-canvas/

工作完美，庄稼就像我想要的那样，但我无法弄清楚如何通过PHP / AJAX保存裁剪文件。虽然涉及许多文件，但要修改的是：

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

在上述链接文章的评论中，有人改变了JS以向PHP文件发送AJAX调用以“保存”裁剪后的图像。我无法让它发挥作用。

这是代码和我对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’);
?>

非常感谢Insight - 整个星期五晚上都试图调试无济于事！

Answer 1

您可能只需要很少的更改，但我仍然发布了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
}

Answer 2

您的$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!');
});

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

2 个答案: