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

基本上你做了以下事情：

将原始图片加载到DOM
使用Javascript调整图像大小并裁剪图像，以便向用户显示裁剪结果。
将原始图片加载到画布
crop＆amp;使用用户返回的数据调整画布中的图像大小（步骤2）
使用画布中的toDataURL函数提取图像
将DataURL发送到将此信息保存到网络硬盘的Web服务。

Canvas在不同的图像上实现

1 个答案: