的Javascript：模拟种植，让来来往往的内存

Question

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

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

然后我得到的JavaScript文件：

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

我想要得到的图像文件从内存中显示给用户，通过使用css transform/translate来模拟图像裁剪以获取坐标并向用户显示“裁剪模拟”图像。

裁剪后如果用户不喜欢图像可以删除它。

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

Answer 1

请参阅下面的简单概念验证。提交文件后，您需要创建新的HTMLImageElement并将其附加到您的预览中。然后，您可以使用drawImage在canvas上绘制裁剪后的图像。

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

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 = function (event) { 
 
    var curFiles = fileInput.files; 
 
    if (curFiles.length > 0) { 
 
    while (preview.firstChild) { 
 
     preview.removeChild(preview.firstChild); 
 
    } 
 
    var image = document.createElement('img'); 
 
    image.src = window.URL.createObjectURL(curFiles[0]); 
 
    preview.appendChild(image); 
 
    image.onload = function() { 
 
     ctx.drawImage(image, 0.2 * image.width, 0.2 * image.height, 0.5 * image.width, 0.5 * image.height, 0, 0, canvas.width, canvas.height); 
 
    }; 
 
    } 
 
};

<input type="file" id="product_images-0"/> 
 
<div class="preview"> 
 
    <p>No files currently selected for upload</p> 
 
</div> 
 
<canvas id="canvas" width="200" height="200"></canvas>