正在保存从 div-tag 裁剪的图片

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 in order to crop the image to the set width/height you want), or use the javascript canvas method, which are explained in many tutorials, one of which can be found here 的内容。

正在保存从 div-tag 裁剪的图片

Saving picture croped from div-tag

php

jquery

html

css

crop