title: download image from canvas by using javascript
body: <p>I was trying to download loaded image by following code but this is not working (not downloading )
  I need to download loaded image in Local Storage of my computer<br>
  I am getting  Error  -> security Exception </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;img  id="imageId" src="https://lh3.googleusercontent.com/Eaxq_eRyitzuD_wcptI_RBva0CiqzWPztZolEDfKrdftel4ENSf2XinyJyjPecUrJQ" &gt;
      &lt;button onclick="storeImageIntoLocal()"&gt;Copy Image &lt;/button&gt;
      &lt;script&gt;
        function storeImageIntoLocal() {
          var img=document.getElementById('imageId');
          img.crossOrigin = "anonymous";
          var canvas = document.createElement("canvas");
          canvas.width = (img.width+50);
          canvas.height = (img.height+15);
          var body = document.getElementsByTagName("body")[0];
          body.appendChild(canvas);
        
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0);
       
          var dataURL = canvas.toDataURL("image/png"); // this is not working 
       alert("converted");
       
       localStorage.setItem("image",dataURL);// this is not working 
  
          //    var base64dataFinal= dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
        }
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>