jQuery Guillotine - 交换图像答案

【问题标题】：jQuery Guillotine - Swap ImagejQuery Guillotine - 交换图像
【发布时间】：2015-02-07 10:33:07
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html image crop

【解决方案1】：

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

Guillotine 在初始化时获取绝对图像尺寸（这就是图像需要已经加载或缓存的原因），然后一切都相对于保持响应。如果图像的尺寸不同，则会出现纵横比损坏和其他意外行为。

因此，如果您使用 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 }
}

“onload”处理程序有两个用途，它为每张图片首次加载断头台，并在每次交换图片时重新加载。

需要考虑的两个要点：

动作（旋转、缩放等）只能绑定一次，以避免出现#5 等问题。
您必须确保脚本在每个图像完成加载之前运行，否则在交换图像之前您将没有插件（脚本的最后部分处理此问题）。

希望对你有帮助。

【讨论】：

那个绑定按钮只是第一次，帮我解决了使用ajax更新图片时的图片旋转问题，谢谢

【解决方案2】：

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

【讨论】：

您能否更准确地解释一下您是如何解决这个问题的？它可以帮助其他有同样问题的用户。
我会很高兴，但我什至不能在这里放一个 jsfiddle 代码。基本上在动态加载 img 之后，使用 picture.destroy() 销毁 guillitione 脚本；并重新启动它。
好的，现在我们知道你破坏了的东西就更清楚了。您可以发布指向 JSFiddle 的链接或在您的答案中复制和粘贴代码。

【解决方案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.

一切都应该正常工作

【讨论】：

【解决方案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();

【讨论】：