title: Attempting to save an edited image to my local computer using AngularJS
body: <p>I am looking to save an image to my computer, so far I have the code below which displays an image with text inserted above. I'm unsure of how to save the image to my local machine, could someone help point me in the direction.   </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;title&gt;Sample&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
              &lt;style&gt;
                  .container {
                  position: relative;
                  text-align: center;
                  color: white;
                  }
                  .centered {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  }
              &lt;/style&gt;
          &lt;div ng-app= "myapp" ng-controller = "connection"&gt;
             Enter The Text :
              &lt;input type="text" ng-model= "Username" name="Username"&gt;
              &lt;button ng-click="submit(Username)" &gt;Save&lt;/button&gt;&lt;br&gt;&lt;br&gt;
              &lt;div class="container"&gt;
              &lt;img src="DHONI.jpg" &gt;
              &lt;div class="centered"&gt;{{Username}}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script&gt;
          var App = angular.module("myapp",[])
          App.controller ('connection',function ($scope){
          $scope.submit= submit;
          function submit(Username){
              $scope.name = Username;
          }
          });
      &lt;/script&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>