Javascript：模拟裁剪并从内存中获取文件图像

我使用文件输入上传图像：

<input type="file" id="product_images-0"/>

我想从内存中获取图像文件，将其显示给用户，模拟图像裁剪以获得坐标，并使用css转换/翻译将“裁剪的模拟”图像显示给用户

裁剪后，如果用户不喜欢图像，可以将其删除

---

这是可能的。我不想使用Ajax，因为用户可以在提交之前删除图像，而从后端删除此“删除”图像很难做到这一点。

请参阅下面的简单概念证明。提交文件后，您需要创建新的

HTMLImageElement

，并将其附加到预览中。然后，您可以使用在

画布上绘制裁剪后的图像

请记住验证您提交的文件是否为图像类型


var fileInput=document.getElementById（'product_images-0'）；
var preview=document.querySelector（'div.preview'）；
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
fileInput.onchange=函数（事件）{
var curFiles=fileInput.files；
如果（curFiles.length>0）{
while（preview.firstChild）{
preview.removeChild（preview.firstChild）；
}
var image=document.createElement（'img'）；
image.src=window.URL.createObjectURL（curFiles[0]）；
预览。追加子对象（图像）；
image.onload=函数（）{
ctx.drawImage（图像，0.2*image.width，0.2*image.height，0.5*image.width，0.5*image.height，0,0，canvas.width，canvas.height）；
};
}
};

当前没有选择要上载的文件


var element = document.getElementById('product_images-1');
console.log(element.files[0]);