不同的图像

Question

我使用的下一个样品在我的代码执行帆布：http://jsfiddle.net/8wegxnz3/

var lasticon; 
$(function() { 
    $('.icon').click(function() { 
     if (lasticon != this.id) { 
      $('#' + lasticon + 'L').toggle(); 
      lasticon = this.id; 
     } else { 
      lasticon = null; 
     } 
     $('#' + this.id + 'L').toggle(); 

    }); 
}); 

.iconL { 
    display: none; 
    margin-top: 70px; 
    margin-left: 100px; 
    height: 100px; 
    width: 100px; 
    position: absolute; 
} 

var lasticon; 
$(function() { 
    $('.icon').click(function() { 
     if (lasticon != this.id) { 
      $('#' + lasticon + 'L').toggle(); 
      lasticon = this.id; 
     } else { 
      lasticon = null; 
     } 
     $('#' + this.id + 'L').toggle(); 

    }); 
}); 

我想是实现下一个解决方案给我的第一代码，我在接下来的jfiddle发现：http://jsfiddle.net/m1erickson/LAS8L/

我已经做了一些测试，并试图将其实现到我的代码，但没有任何反应。

我希望能够调整并移动单击第一个图像时出现的第二个图像。所以你可以例如点击“电子邮件图标”，然后调整出现的第二个图标的大小。

Answer 1

这并不容易。但这里有一些出发点：

• 阅读this教程的图像裁剪和用帆布调整
• 看到我jsBIN作为一个实现实例。您可以复制的代码，将图像添加到<img class="resize-image" src="img/YOURIMAGE.jpg" alt="image for resizing">标签，你可以调整大小和裁剪
• 替代你可以使用this jquery plugin

基本上你做以下几点：

1. 负载原始图像进入DOM
2. 使用Javascript调整和裁剪图像以向用户显示裁剪结果。
3. 负载原始图像划分为画布
4. 作物&调整图像的大小与由所述用户返回的数据在画布（步骤2）
5. 从画布提取与toDataURL功能的图像
6. 发送DataURL到一个Web服务，它可以将这些信息保存到您的Web服务器的硬盘中。