Javascript 从包含变换比例属性的div保存背景图像

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

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

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

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

现场演示，网址：

我的代码

$（文档）.ready（函数（e）{
var previewWidth=$（“.preview”）.css（“宽度”）.replace（“px”，“”“）；//这是一个正方形
var f=$（“.resize image”）.css（“width”）.replace（“px”）和“）；
var h1=$（“.overlay”）.css（“高度”）.replace（“px”，“高度”）；
var h2=$（“.resize image”）.css（“高度”）.replace（“px”，“高度”）；
//高度包括3倍的2个边框
var-border=1*2；
var h22=h2*1-边界；
//e=变焦因子
变量e=（h22/h1）；
//g是原始图片的高度（始终为380）
var g=$（“.resize image”）.css（“高度”）.replace（“px”，“高度”）；
var比率=f/g；
//选择面板的偏移量
var x1=$（“.overlay”）.css（“左”）.replace（“px”，“左”）；
变量y1=$（“.overlay”）.css（“top”）.replace（“px”），”）；
var offsetx=比率*预览宽度*（x1/f）*e；
var offsety=预览宽度*（y1/g）*e；
//总宽度和原始宽度
var totalw=e*比率*预览宽度；
var totalh=e*previewWidth；
var orw=比率*预览宽度；
var orh=预览宽度；
var补偿，补偿；
$（“.overlay”）
.css（“顶部”，$（.resize image”）.css（“顶部”）
.css（“左”），$（.resize image”）.css（“左”））
.拖拉({
包含：“.resize图像”，
开始：功能（事件、用户界面）{
var left=parseInt（$（this）.css（'left'），10）；
左=isNaN（左）？0：左；
var top=parseInt（$（this）.css（'top'），10）；
top=isNaN（top）？0:top；
RecoverPleft=左-ui.position.left；
Receptop=top-ui.position.top；
},
拖动：函数（e、ui）{
ui.position.left+=recoverpleft；
ui.position.top+=补偿点；
previewWidth=$（“.preview”）.css（“宽度”）.replace（“px”，“”“）；//这是一个正方形
f=$（“.resize image”）.css（“width”）.replace（“px”，即“）；
h1=$（“.overlay”）.css（“高度”）.replace（“px”）和“）；
h2=$（“.resize image”）.css（“height”）.replace（“px”，即“）；
//高度包括3倍的2个边框
边框=1*2；
h22=h2*1-边界；
//e=变焦因子
e=（h22/h1）；
//g是原始图片的高度（始终为380）
g=$（“.resize image”）.css（“height”）.replace（“px”），”）；
比值=f/g；
//选择面板的偏移量
x1=$（“.overlay”）.css（“左”）.replace（“px”，“左”）；
y1=$（“.overlay”）.css（“top”）.replace（“px”），”）；
偏移量x=比率*预览宽度*（x1/f）*e；
偏移量=预览宽度*（y1/g）*e；
var offsetx2=（x1/（f-h1））*100；
风险价值抵销2=（y1/（g-h1））*100；
//总宽度和原始宽度
totalw=e*比率*预览宽度；
totalh=e*previewWidth；
orw=比率*预览宽度；
orh=预览宽度；
$（“.preview image”）
.css（“变换”、“缩放”（“+e+”，“+e+”））
.css（“-ms转换”、“缩放（“+e+”、“+e+”））
.css（“-webkit transform”，“scale（“+e+”，“+e+”））
.css（“左边距”、-offsetx+（（总宽度）/2）+“像素”）
.css（“页边距顶部”、-offsety+（（totalh-orh）/2）+“px”）；
$（“.preview”）
.css（“背景尺寸”（比率*预览宽度）*e+“px”）
.css（“背景位置”，偏移量x2+“%”+偏移量2+“%”）；
}
})
.可调整大小({
最大高度：380，
最大宽度：380，
手柄：“西北、东北、西南、东南”，
方面：1/1，
开始：功能（e、ui）{
},
调整大小：功能（e、ui）{
previewWidth=$（“.preview”）.css（“宽度”）.replace（“px”，“”“）；//这是一个正方形
f=$（“.resize image”）.css（“width”）.replace（“px”，即“）；
h1=$（“.overlay”）.css（“高度”）.replace（“px”）和“）；
h2=$（“.resize image”）.css（“height”）.replace（“px”，即“）；
//高度包括3倍的2个边框
边框=1*2；
h22=h2*1-边界；
//e=变焦因子
e=（h22/h1）；
//g是原始图片的高度（始终为380）
g=$（“.resize image”）.css（“height”）.replace（“px”），”）；
比值=f/g；
//选择面板的偏移量
x1=$（“.overlay”）.css（“左”）.replace（“px”，“左”）；
y1=$（“.overlay”）.css（“top”）.replace（“px”），”）；
偏移量x=比率*预览宽度*（x1/f）*e；
偏移量=预览宽度*（y1/g）*e；
//总宽度和原始宽度
totalw=e*比率*预览宽度；
totalh=e*previewWidth；
orw=比率*预览宽度；
orh=预览宽度；
$（“.preview image”）
.css（“变换”、“缩放”（“+e+”，“+e+”））
.css（“-ms转换”、“缩放（“+e+”、“+e+”））
.css（“-webkit transform”，“scale（“+e+”，“+e+”））