在用html做截图功能时，会要求先从本地选择一张图片，对本地这张图片进行截图操作。
这个时候，为了直接将选择的图片显示在页面上，可以使用如下两种方法：
1. 使用 window.URL
代码如下：
1<!DOCTYPE html>
2<html>
3<head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6</head>
7<body>
8<input type="file" id="testFile" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
9<img style="width:200px;height: 200px;" id="testImage">
10
11<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
12<script>
13 // Import image
14 var $testFile = $('#testFile');
15 var URL = window.URL || window.webkitURL|| window.mozURL;
16 var uploadedImageName = '';
17 var uploadedImageType = 'image/jpeg';
18 var uploadedImageURL;
19 if (URL) {
20 $testFile.change(function () {
21 var files = this.files;
22 var file;
23 if (files && files.length) {
24 file = files[0];
25 if (/^image\/\w+$/.test(file.type)) {
26 uploadedImageName = file.name;
27 uploadedImageType = file.type;
28 if (uploadedImageURL) {
29 URL.revokeObjectURL(uploadedImageURL);
30 }
31 uploadedImageURL = URL.createObjectURL(file);
32 $("#testImage").attr("src",uploadedImageURL);
33 $testFile.val('');
34 } else {
35 window.alert('请选择一张图片');
36 }
37 }
38 });
39 } else {
40 console.log("当前浏览器不支持URL");
41 }
42</script>
43</body>
44</html>
浏览器兼容性：
2. 使用 FileReader
代码如下：
1<!DOCTYPE html>
2<html>
3<head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6</head>
7<body>
8<input type="file" id="testFile" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
9<img style="width:200px;height: 200px;" id="testImage" >
10
11<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
12<script>
13 // Import image
14 var $testFile = $('#testFile');
15 if(typeof FileReader == "undefined"){
16 console.log("当前浏览器不支持FileReader");
17 }
18 $testFile.change(function () {
19 var files = this.files;
20 var file;
21 if (files && files.length) {
22 file = files[0];
23 var reader = new FileReader();
24 reader.onload = function(e){
25 $("#testImage").attr("src", e.target.result);
26 };
27 reader.readAsDataURL(file);
28 }
29 });
30</script>
31</body>
32</html>
浏览器兼容性：