从文件中将图像添加到HTML5 Canvas(Add image to HTML5 Canvas from a file)

 在HTML5 Canvas中我试图添加和图像。 这条线： 
 
 imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';
 
 是不正确的。 如何将文件添加到HTML5 Canvas图像？ 
 
  <canvas id="myCanvas" width="1000" height="1000"></canvas>
  <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var imageObj = new Image();
        imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';
        imageObj.onload = function () {
            context.drawImage(imageObj, centerX, centerY);
        };
   </script>

In HTML5 Canvas I am trying to add and image. The line:
 
 imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';
 
is not correct. How do I add a file to HTML5 Canvas Image?
 
  <canvas id="myCanvas" width="1000" height="1000"></canvas>
  <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var imageObj = new Image();
        imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';
        imageObj.onload = function () {
            context.drawImage(imageObj, centerX, centerY);
        };
   </script>

原文：https://stackoverflow.com/questions/36772219