使用HTML5实现图片预览和查看原图功能

HTML部分：首先，我们需要在HTML中设置一个文件输入元素和一个用于显示预览图像的图像元素。此外，还需要一个链接来查看原图。

<input type='file' id='image-input' accept='image/*'>
<img id='image-preview'>
<a id='view-original-link' href='#'>查看原图</a>

JavaScript部分：接下来，我们使用JavaScript来处理文件输入和显示预览图像。当用户选择一个文件后，我们将使用FileReader API来读取文件，并将其显示在图像元素中。

document.getElementById('image-input').addEventListener('change', function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onloadend = function() {
document.getElementById('image-preview').src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
}
});

最后，我们将添加一个事件监听器到链接元素上，以便用户可以点击链接来查看原图。

document.getElementById('view-original-link').addEventListener('click', function(e) {
e.preventDefault();
var fileURL = this.href;
var newWindow = window.open(fileURL);
newWindow.onloadend = function() {
newWindow.resizeTo(file.width, file.height);
}
});

以上代码演示了如何使用HTML5的FileReader API来实现图片预览和查看原图的功能。在实际应用中，你可能需要根据具体需求进行适当的修改和优化。同时，还需要注意处理好浏览器的安全限制和用户隐私保护的问题。