在 jQuery 中裁剪图像并使用 Ajax 发送回答案

【问题标题】：Cropping image in jQuery and sending back with Ajax在 jQuery 中裁剪图像并使用 Ajax 发送回
【发布时间】：2013-01-17 02:48:03
【问题描述】：

我意识到这是一个开放式问题，所以如果不应该在这里问这个问题，我深表歉意，但我对 ajax 是全新的，很难理解我正在尝试做的事情。这是我要完成的基本流程/过程：

用户以简单的 html 形式选择要上传的文件。
在文件选择时会打开一个新的花式框，显示他们选择的图像，并允许他们使用 jquery 插件进行裁剪。
按下裁剪按钮并裁剪图像。 Fancybox 关闭，新裁剪的图像显示在预览区域的原始 html 表单上。

我无法解决的问题是如何将裁剪后的图像发送回表单并显示它，而不会重新加载页面/丢失可能已经输入的任何其他表单数据。我可以使用 ajax 检查裁剪文件是否以某种方式发送？我需要使用会话变量来存储裁剪信息吗？任何帮助或指导将不胜感激！

【问题讨论】：

您的插件实际上是在对图像数据进行裁剪，还是只是裁剪？你用的是哪个插件？
@ClaytonGulick 我还没有选择用于裁剪的插件 - 如果您有任何建议，我愿意接受。我也熟悉从 GD 或 Imagick 的起点进行裁剪，因此可以在需要时完成。

标签： jquery ajax crop fancybox-2

【解决方案1】：

这个问题的答案真的取决于你是想要真正的裁剪，还是仅仅裁剪。

真正的裁剪更复杂，并且会涉及到以下方面的一些事情：

var ctx_src = document.getElementById("someCanvasElement").getContext('2d');
var ctx_dest = document.getElementById("clippedDestinationCanvas").getContext('2d');
var img = new Image();
img.src = "/path/to/image";
img.onload(
  function()
  {
    ctx_src.drawImage(img,0,0);
    //capture a bounding rect from the user
    //draw the image to a new canvas, cropped to the bounding rect
      //see: http://www.w3schools.com/tags/canvas_drawimage.asp
    ctx_dest.drawImage(img,crop_x,crop_y,crop_width,crop_height,0,0);
    //display the destination canvas whereever you want, ie, in jquery do:
    $("#clippedDestinationCanvas").show(); // or fadeIn() or whatever
  });

上面唯一的半棘手部分是捕获剪切区域，但这并不太难，您基本上只需添加一个鼠标按下处理程序，开始跟踪 delta x 和 delta y，然后绘制一个边界框作为覆盖.

它最终会看起来像：

var dragging;
var startx, starty;
var width, height;
$("body").on("mouseup", 
  function() 
  {
    if(dragging)
    { 
      dragging=false; 
      $("#someCanvasElement").off("mousemove");
    }
  });

$("#someCanvasElement").on("mousedown",
  function(evt)
  {
    dragging=true;
    startx = evt.pageX;
    starty = evt.pageY;
  });

$("#someCanvasElement").on("mousemove",
  function(evt)
  {
     width = evt.pageX-startX;
     height = evt.pageY-startY;
     //set the style to whatever looks good
     ctx_overlay.fillRect(startx, starty, width, height);

  });

要做到这一点而不实际上裁剪图像，只需执行相同的鼠标处理程序来捕获裁剪区域的边界框并使用 CSS 来裁剪图像。

当然，这一切都在我的脑海中，所以修改以适应，但这应该足以让你开始。

【讨论】：