0

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

  1. 用户以简单的 html 表单选择要上传的文件。

  2. 在文件选择上，打开一个新的花式框，显示他们选择的图像，并允许他们使用 jquery 插件进行裁剪。

  3. 按下裁剪按钮并裁剪图像。Fancybox 关闭，新裁剪的图像显示在预览区域的原始 html 表单上。

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

4

1 回答 1

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 来裁剪图像。

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

于 2013-02-04T23:44:51.127 回答