Javascript 在画布中的上载图像上添加剪贴板后获取图像

我正在上传画布上的图像。我使用剪贴板限制了图像的区域。点击提交按钮后，我想得到画布的完整图像和单独的上传图像。现在我得到的是画布的图像，而不是单独上传的图像。我想要什么，我会把屏幕截图

在旋转图像之后。

单击“提交”按钮后：

但我还想单独修改花的形象。 在下面的屏幕截图中显示预期结果。

var canvas=newfabric.canvas（'canvas'）；
$（“#画布颜色>输入”）。单击（函数（）{
canvas.setBackgroundImage（this.src、canvas.renderAll.bind（canvas）{
交叉源：“匿名”
});
});
//启动时触发第一个
$（“#canvascolor>input:first-of-type（）”）[0]。单击（）；
功能夹衬衫（ctx）{
ctx.save（）；
setTransform（1,0,0,1,0,0）；
变量x=140，y=100，w=225，h=300；
ctx.moveTo（x，y）；
ctx.lineTo（x+w，y）；
ctx.lineTo（x+w，y+h）；
ctx.lineTo（x，y+h）；
ctx.lineTo（x，y）；
ctx.restore（）；
}
document.getElementById（'file'）.addEventListener（“更改”，函数（e）{
var file=e.target.files[0]；
var reader=new FileReader（）；
控制台日志（“读卡器”+读卡器）；
reader.onload=函数（f）{
var数据=f.target.result；
fabric.Image.fromURL（数据、函数（img））{
var oImg=img.set({
左：140，
前100名，
宽度：250，
身高：200，
角度：0，
lockUniScaling：没错，
centeredScaling：正确，
衬衫
}).比例（0.9）；
oImg.lockMovementX=真；
canvas.add（oImg.renderAll（）；
var a=canvas.setActiveObject（oImg）；
var dataURL=canvas.toDataURL({
格式：“png”，
质量：0.8
});
});
};
reader.readAsDataURL（文件）；
});
document.querySelector（'#txt'）.onclick=function（e）{
e、 预防默认值（）；
canvas.deactivateAll（）.renderAll（）；
document.querySelector（'#preview'）.src=canvas.toDataURL（）；
};
画布{
边框：1px纯黑；
}
#画布颜色输入{
高度：50px；
宽度：50px；
}

提交

您是否真的将项目的所有新步骤都发送到这里，而不尝试自己学习如何做事？？？在第二次调用
.renderAll（）.toDataURL（）
..@kaido之前，请删除背景。首先我尝试了所有的东西，但是我对HTML5和fabric js是新手，然后我遇到了一些问题。但我担心的是，你确实从这些
中学到了什么。请给我一些codez
问题。我可以直接给你，但这真的对你有帮助吗？事实上，如果你写的问题是“如何删除先前设置的背景图像”，我就知道你确实理解了我们在你所有问题中告诉你的内容，我已经回答了。另外，你在这个问题中使用的图像来自我的个人dropbox帐户，我可能会在某个时候删除这些内容，这样你就可以更好地创建自己的dropbox帐户并再次上传这些内容。@kaido。你的意思是我需要删除我上传的图片。你真的在这里发送了你项目的所有新步骤，而没有尝试自己学习如何做事？？？在第二次调用
.renderAll（）.toDataURL（）
..@kaido之前，请删除背景。首先我尝试了所有的东西，但是我对HTML5和fabric js是新手，然后我遇到了一些问题。但我担心的是，你确实从这些
中学到了什么。请给我一些codez
问题。我可以直接给你，但这真的对你有帮助吗？事实上，如果你写的问题是“如何删除先前设置的背景图像”，我就知道你确实理解了我们在你所有问题中告诉你的内容，我已经回答了。另外，你在这个问题中使用的图像来自我的个人dropbox帐户，我可能会在某个时候删除这些内容，这样你就可以更好地创建自己的dropbox帐户并再次上传这些内容。@kaido。你的意思是我需要删除我上传的图像。