Question

我正在使用jquery断头台来裁剪图像并保存到服务器但不幸的是，当我想动态地做事情时，它并没有按照应有的方式工作。我在同一张图片上创建了缩略图，当你点击缩略图时，它应该让你编辑那张图片和裁剪等。我在页面上有3个脚本，1）断头台，2）当你点击缩略图时的脚本交换小大图像的图像，3）当你点击裁剪按钮获取值并在php中完成工作。

在我交换图像后，我调用/运行断头台，但似乎它正在缓存第一个图像尺寸。我创造了一个小提琴。我不知道如何把链接放到jsfiddle这里，但它是jsfiddle / 0 unub 77 f

Answer 1

我有点晚了，但如上所述，它可能会帮助其他人解决同样的问题。

断头台在初始化时获取绝对图像尺寸（这就是为什么图像需要已经加载或缓存），之后一切都是相对的，以保持响应。如果图片尺寸不同，则会导致宽高比和其他意外行为中断。

因此，如果您使用Guillotine处理图像并且想要交换该图像，则应删除该插件的现有实例并在新图像上创建一个新实例，以便它可以正确呈现这样的新图像。

var pictures = $('.picture'),
    gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' // 1x1 gif

// Guillotine loader
pictures.on('load', function() {
  var img = $(this)

  // Remove any existing instance
  if (img.guillotine('instance')) img.guillotine('remove')

  // Create new instance
  img.guillotine({width: 400, height: 300})

  // Bind buttons, only the first time!
  if (! img.data('bindedBtns')) {
    img.data('bindedBtns', true)
    $('#rotate_left').click(function(){ img.guillotine('rotateLeft') })
    $('#rotate_right').click(function(){ img.guillotine('rotateRight') })
    // ...
  }
})

// Swap images as needed.
// Each time you change a 'src' attribute the function above should run.
picture.on('click', function() { /* Swap thumbnail */ })

// Make sure that the 'onload' event is triggered at least once on each picture.
pictures.each(function() {
  // Save the original src, replace it with the 1x1 gif and reload the original src.
  if (this.complete !== false) { var src = this.src; this.src = gif; this.src = src }
}

＆＃39; onload＆＃39;处理程序有两个目的，它为每张图片第一次加载断头台，并在每次交换图片时重新加载。

需要考虑的两个要点：

操作（旋转，缩放等）应仅绑定一次，以避免#5等问题。
您必须确保在每个图片完成加载之前运行脚本，否则在交换图像之前您不会拥有该插件（脚本的最后一部分会处理此图像）。

希望它有所帮助。

Answer 2

好吧我想通了，当我在第二个脚本中设置img src时，我必须销毁所有内容而不是再次调用脚本。

Answer 3

这是我对我的问题的解决方案你加载第一个图像就像在演示页面中，然后把你的javascript放在交换图像上，基本上改变图像的来源，销毁它，然后再次调用函数

var swap_img =   $(this).find('img').attr('src'); //get the src of the image of the thumbnail                                                                                                       
$("#sample_picture").attr('src',swap_img);  //set it , swap it                                      
picture.guillotine('remove'); //remove the current instance
guillotine_function();  //and call it again.

并且一切都应该按原样运作

Answer 4

此代码无需删除断头台实例，img是图像元素：

            guillotine._unwrap();
            guillotine.zoomInFactor = 1 + guillotine.op.zoomStep;
            guillotine.zoomOutFactor = 1 / guillotine.zoomInFactor;
            guillotine.glltRatio = guillotine.op.height / guillotine.op.width;
            guillotine.width = guillotine.height = guillotine.left = guillotine.top = guillotine.angle = 0;
            guillotine.data = {
              scale: 1,
              angle: 0,
              x: 0,
              y: 0,
              w: guillotine.op.width,
              h: guillotine.op.height
            };
            guillotine._wrap(img);
            guillotine.fit();

jQuery断头台 - 交换图像

4 个答案: