Question

我找到了一种在标签框中移动图片的方法。它完美地工作，因为我想要它。代码是流程：

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#my-image").css({top: 0, left: 0});

        var maskWidth = jQuery("#my-mask").width();
        var maskHeight = jQuery("#my-mask").height();
        var imgPos = jQuery("#my-image").offset();
        var imgWidth = jQuery("#my-image").width();
        var imgHeight = jQuery("#my-image").height();

        var x1 = (imgPos.left + maskWidth) - imgWidth;
        var y1 = (imgPos.top + maskHeight) - imgHeight;
        var x2 = imgPos.left;
        var y2 = imgPos.top;

   jQuery("#my-image").draggable({containment: [x1, y1, x2, y2]});
        jQuery("#my-image").css({cursor: 'move'});
   });

</script>


<div id="my-mask" style="width: 600px; height: 200px; overflow: hidden;">
    <img id="my-image" src="stormP.jpg" width="" height=""/>
</div>

现在我想要一个可以将图片的可见部分保存在新文件中的按钮。任何人都可以指出我正确的方向。我不知道该怎么做。我正在使用PHP，CSS和JQuery。

或者，我可以使用CSS将孔图片放在标签内，并隐藏溢出。在这种情况下，我需要左上角的坐标与图片坐标相比较。然后我会设置背景位置：-300px -330px;作为左上角的X，Y坐标相对于图片如下：

<div style="cursor: pointer; width: 600px; height: 200px; background-image: url(stormP.jpg); background-repeat: no-repeat;  background-position: -300px -330px;">

这两个中的任何一个都可以。

任何帮助将不胜感激！

Answer 1

您可以通过两种方式处理此问题。在PHP中，您可以进行服务器端编辑（您可以将坐标传递给服务器，然后使用与GD类似的内容，以便将图像裁剪为您想要的设置宽度/高度），或者使用javascript canvas方法，在许多教程中都有解释，其中一个可以找到here。

保存图片来自div-tag

1 个答案: