Javascript 不同图像上的画布实现

我正在代码中使用下一个示例：

我想要的是为我在下一个jfiddle中找到的第一个代码实现下一个解决方案：

我做了一些测试，并试图将其实现到我的代码中，但什么也没发生

---

我想能够调整大小和移动第二个图像时，点击第一个图像出现。例如，您可以单击“电子邮件图标”，然后调整显示的第二个图标的大小。

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

• 阅读有关使用画布裁剪和调整图像大小的教程
• 请将my作为示例实现。您可以复制代码，将图像添加到
  标记，并可以调整其大小和裁剪
• 您可以使用的替代方案

基本上，您可以执行以下操作：

将原始图像加载到DOM中

使用Javascript调整图像大小并裁剪图像，以便向用户显示裁剪结果

将原始图像加载到画布中

使用用户返回的数据裁剪画布中的图像并调整其大小（步骤2）

使用toDataURL函数从画布中提取图像

将DataURL发送到将此信息保存到web服务器硬盘的web服务

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();

    });
});