jQuery断头台 - 交换图像 [英] jQuery Guillotine - Swap Image

问题描述

我使用jquery guillotine裁剪图像并保存到服务器，但不幸的是，当我想动态地执行某些操作时，它不能正常工作。我在同一张照片上创建了缩略图，当你点击一个缩略图时，它应该让你编辑该图片和裁剪等。我在页面上有3个脚本，1）断头台，2）脚本，当你点击缩略图时，图像与大的，3），当你点击裁剪按钮获取值，并在PHP中完成工作。

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

解决方案

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

断头台在初始化时获得绝对图像尺寸（这就是为什么图像需要已经加载或缓存），之后，所有事情都会相对保持响应。如果图像的尺寸不一样，您会看到纵横比和其他意外行为。

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

  var pictures = $（'。picture'），
 gif ='data：image / gif; base64，R0lGODlhAQABAIAAAAAAAP /// ywAAAAAAQABAAACAUwAOw =='// 1x1 gif 
 
 //断头台装载器
 pictures.on（'load'，function（）{
 var img = $（this）
 
 //删除任何现有的实例$ b $如果（img.guillotine（'instance'））img.guillotine（'remove'）
 
 //创建新实例
 img.guillotine（{width：400，height：300} ）
 
 //绑定按钮，只有第一次！
 if（！img.data（'bindedBtns'））{
 img.data（'bindedBtns'，true） 
 $（'＃rotate_left'）。click（function（）{img （'rotateLeft'）}）
 $（'＃rotate_right'）。click（function（）{img.guillotine（'rotateRight'）}）
 // ... 
 } 
}）
 
 //根据需要交换图像。 
 //每次更改'src'属性时，都应该运行上面的函数。 
 picture.on（'click'，function（）{/ * Swap thumbnail * /}）
 
 //确保'onload'事件在每张图片上至少触发一次。 
 pictures.each（function（）{
 //保存原始src，将其替换为1x1 gif并重新加载原始src。
 if（this.complete！== false）{ var src = this.src; this.src = gif; this.src = src} 
} 
  

'onload'处理程序有两个目的，第一次为每幅图片加载断头台，并在每次图片交换时重新加载。

要考虑的两个要点：

• 动作（旋转，缩放等）应该只绑定一次以避免像＃5 。


• 必须确保脚本在每个图像加载完成之前运行，或否则，在交换图像之前，您将不会拥有插件（脚本的最后一部分可处理此问题）。
  

希望它有帮助。 / p>

I am using jquery guillotine to crop image and save to the server but unfortunately when i want to do things dynamically it doesn't work as it should be . I have created thumbnails on the same picture and when you click on a thumbnail it should let you edit that picture and crop etc. I have 3 scripts on the page , 1 ) guillotine , 2) scripts that when you click on thumbnails swaps the small image with the big one , 3) and when you click on crop button gets the values and does the job in php.

after i swap the image , i call/run the guillotine but it seems like it is caching the first images dimensions. i have created a fiddle. i dont know how to put link to jsfiddle here but it is jsfiddle / 0 unub 77 f

解决方案

I'm a bit late but as said above it might help others with the same problem.

Guillotine gets the absolute image dimensions when initialized (that's why the image needs to be already loaded or cached) and after that everything is made relative to keep it responsive. If the images don't have the same dimensions you'll get broken aspect ratios and other unexpected behaviors.

So, if you have Guillotine working on an image and you want to swap that image, you should remove the existing instance of the plugin and create a new one over the new image so it can properly render such new image.

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 }
}

The 'onload' handler serves two purposes, it loads guillotine the first time for each picture and reloads it everytime a picture is swapped.

Two important points to consider:

• Actions (rotate, zoom, etc.) should be binded only once to avoid problems like #5.
• You have to make sure that the script runs before each image finishes loading, or otherwise you won't have the plugin before swapping images (the last part of the script handles this).

Hope it helps.

这篇关于jQuery断头台 - 交换图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！