保存div中的背景图像，包​​括变换比例属性

Question

我正在为我的网站制作一个图片裁剪器，我设法创建了一个面板，您可以在其中选择图像的方形分区。

我已经尝试过使用html2canvas，但它一直在破坏我的div，使用它时看起来完全不同。我真的希望能够将我的预览div保存为.png图像。

我目前隐藏了div中的背景图片，因此预览面板现在只包含一个img标记。

希望有人可以帮助我，我知道在包装div中添加绝对定位的图片可能是一个解决方案，但我希望有一种方法来保存裁剪的图像。

现场演示：http://hurks.it/profile/edit.php

我的代码

$(document).ready(function(e){
    var previewWidth = $(".preview").css("width").replace("px",""); //this is a square
    var f = $(".resize-image").css("width").replace("px","");
    
    var h1 = $(".overlay").css("height").replace("px","");
    var h2 = $(".resize-image").css("height").replace("px","");

    //height including 2 borders of 3px
    var border = 1 * 2;
    var h22 = h2*1 - border;

    // e = zoomfactor
    var e = (h22/h1);
    
    //g is the height of the original picture (which is always 380)
    var g = $(".resize-image").css("height").replace("px","");

    var ratio = f / g;

    //offset of the selection panel
    var x1 = $(".overlay").css("left").replace("px","");
    var y1 = $(".overlay").css("top").replace("px","");
    var offsetx = ratio * previewWidth * (x1 / f) * e;
    var offsety = previewWidth * (y1 / g) * e;

    //total width and original width
    var totalw = e*ratio*previewWidth;
    var totalh = e*previewWidth;
    var orw = ratio*previewWidth;
    var orh = previewWidth;

    var recoupLeft, recoupTop;

    $(".overlay")
        .css("top", $(".resize-image").css("top"))
        .css("left", $(".resize-image").css("left"))
        .draggable({
            containment: ".resize-image",
            start: function(event, ui){
                var left = parseInt($(this).css('left'),10);
                left = isNaN(left) ? 0 : left;
                var top = parseInt($(this).css('top'),10);
                top = isNaN(top) ? 0 : top;
                recoupLeft = left - ui.position.left;
                recoupTop = top - ui.position.top;


            },
            drag: function(e, ui){
                ui.position.left += recoupLeft;
                ui.position.top += recoupTop;

                previewWidth = $(".preview").css("width").replace("px",""); //this is a square
                f = $(".resize-image").css("width").replace("px","");

                h1 = $(".overlay").css("height").replace("px","");
                h2 = $(".resize-image").css("height").replace("px","");

                //height including 2 borders of 3px
                border = 1 * 2;
                h22 = h2*1 - border;

                // e = zoomfactor
                e = (h22/h1);

                //g is the height of the original picture (which is always 380)
                g = $(".resize-image").css("height").replace("px","");

                ratio = f / g;

                //offset of the selection panel
                x1 = $(".overlay").css("left").replace("px","");
                y1 = $(".overlay").css("top").replace("px","");
                offsetx = ratio * previewWidth * (x1 / f) * e;
                offsety = previewWidth * (y1 / g) * e;

                var offsetx2 = (x1 / (f - h1))*100;
                var offsety2 = (y1 / (g - h1))*100;

                //total width and original width
                totalw = e*ratio*previewWidth;
                totalh = e*previewWidth;
                orw = ratio*previewWidth;
                orh = previewWidth;

                $(".preview-image")
                    .css("transform","scale("+e+","+e+")")
                    .css("-ms-transform","scale("+e+","+e+")")
                    .css("-webkit-transform","scale("+e+","+e+")")
                    .css("margin-left", -offsetx+((totalw-orw)/2)+"px")
                    .css("margin-top", -offsety+((totalh-orh)/2)+"px");

                $(".preview")
                    .css("backgroundSize", (ratio*previewWidth)*e+"px")
                    .css("backgroundPosition", offsetx2+"% "+offsety2+"%");
            }
        })
        .resizable({
            maxHeight: 380,
            maxWidth: 380,
            handles: 'nw,ne,sw,se',
            aspectRatio: 1/1,
            start: function(e, ui) {

            },
            resize: function(e, ui) {
                previewWidth = $(".preview").css("width").replace("px",""); //this is a square
                f = $(".resize-image").css("width").replace("px","");

                h1 = $(".overlay").css("height").replace("px","");
                h2 = $(".resize-image").css("height").replace("px","");

                //height including 2 borders of 3px
                border = 1 * 2;
                h22 = h2*1 - border;

                // e = zoomfactor
                e = (h22/h1);

                //g is the height of the original picture (which is always 380)
                g = $(".resize-image").css("height").replace("px","");

                ratio = f / g;

                //offset of the selection panel
                x1 = $(".overlay").css("left").replace("px","");
                y1 = $(".overlay").css("top").replace("px","");
                offsetx = ratio * previewWidth * (x1 / f) * e;
                offsety = previewWidth * (y1 / g) * e;

                //total width and original width
                totalw = e*ratio*previewWidth;
                totalh = e*previewWidth;
                orw = ratio*previewWidth;
                orh = previewWidth;

                $(".preview-image")
                    .css("transform","scale("+e+","+e+")")
                    .css("-ms-transform","scale("+e+","+e+")")
                    .css("-webkit-transform","scale("+e+","+e+")")
                    .css("margin-left", -offsetx+((totalw-orw)/2)+"px")
                    .css("margin-top", -offsety+((totalh-orh)/2)+"px");
            }
            ,
            stop: function(e, ui) {

            }
        });
});

$("#savepic").click(function(e){
    //this is where it should save the image
});

//less
*{
  margin: 0;
  padding: 0;
}

a, a:active, a:focus{
  text-decoration: none;
}

@col: #a9d0f4;
.grab{

  font-size: 10px;
  line-height: 10px;
  color: @col;

  &:hover{
    color: @col;
  }
}

.nw, .ne, .sw, .se{
  .grab;
}

.nw{
  position: absolute;
  top: -5px;
  left: -5px;
}
.ne{
  position: absolute;
  top: -5px;
  right: -5px;
}
.sw{
  position: absolute;
  bottom: -5px;
  left: -5px;
}
.se{
  position: absolute;
  bottom: -5px;
  right: -5px;
}

.resize-image{
  position: absolute;
  display: block;

  height: 380px;
  width: auto;

  max-height: 380px;
}

.overlay{
  position: absolute;
  z-index: 3;
  min-width: 75px;
  min-height: 75px;
  height: 200px;
  width: 200px;
  border: 1px dotted @col;
}

.preview{
  position: absolute;
  width: 300px;
  max-width: 300px;
  height: 300px;
  max-height: 300px;
  overflow: hidden;
  padding: 0;

  background-size: 300px;
  background-repeat: no-repeat;
}

.preview-image{
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  height: 300px;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<article>
    Edit your profile picture
</article>

<article>

    <div class="row">
        <div class="col8" style="padding-right: 5px;">
            Profilepicture
            <div style="height: 400px; overflow: auto;">
                <div style="position: relative; width: 100%; vertical-align: top;">
                    <img class="resize-image" src="../include/pics/background3.png" alt="Image"/>
                    <div class="overlay">
                        <i id="nw" class="fa fa-square nw"></i>
                        <i id="ne" class="fa fa-square ne"></i>
                        <i id="sw" class="fa fa-square sw"></i>
                        <i id="se" class="fa fa-square se"></i>
                    </div>
                </div>
            </div>

        </div><br>
        <div class="col4" style="height: 400px; width: 300px; clear:both; padding-left: 5px; vertical-align: top; margin-right: 10px; margin-top: 0; padding-top: 0; float: right;">
            <div class="row">
                Preview<br>
                <div id="preview" class="preview">
                    <img class="preview-image" src="../include/pics/background3.png" alt="preview"/>
                </div>
                <div style="height: 300px;">

                </div>
            </div>
            <div class="row">
                <br><input type="submit" id="savepic" value="Save picture">
            </div>

        </div>

    </div>

</article>

<article>
    <div class="test">

    </div>
</article>