javascript - jQuery断头台-交换图片

我正在使用jQuery guillotine裁剪图像并将其保存到服务器，但是不幸的是，当我想动态地进行操作时，它无法正常工作。我已经在同一张图片上创建了缩略图，当您单击缩略图时，应该可以编辑该图片并裁剪等。页面上有3个脚本，1）断头台，2）脚本，当您单击缩略图时会交换小的具有一个大的图像，3），然后单击“ crop”按钮获取值并在php中完成工作。

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

最佳答案

我有点迟了，但是如上所述，它可能会帮助其他遇到相同问题的人。

断头台在初始化时会获得绝对的图像尺寸（这就是为什么图像必须已经被加载或缓存的原因），然后进行一切处理以保持其响应速度。如果图像的尺寸不同，则会出现长宽比损坏和其他意外行为。

因此，如果您在图像上使用断头台程序，并且想要交换该图像，则应删除该插件的现有实例，并在新图像上创建一个新实例，以便它可以正确呈现此类新图像。

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之类的问题。
您必须确保脚本在每个图像完成加载之前都已运行，否则在交换图像之前您将没有插件（脚本的最后部分处理了此问题）。


希望能帮助到你。