title: html2canvas border image issue
body: <p>I am using html2canvas library to take screenshot of html view.</p>
  
  <p>but background-image failed to load. i am getting error message Error loading background:</p>
  
  <p>here is my <a href="http://jsfiddle.net/sodofkcs/1042/" rel="nofollow noreferrer">JSFiddle</a>.</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-js lang-js prettyprint-override"><code>window.takeScreenShot = function() {
      html2canvas(document.getElementById("target"), {
          onrendered: function (canvas) {
              document.body.appendChild(canvas);
          },
          useCORS:true,
          logging:true,
          allowTaint:true
      });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#target{
      width:300px;
      height:160px;
      background:lightblue;
      color:#fff;
      padding:10px;
      background-image: url(https://static.pexels.com/photos/20974/pexels-photo.jpg);
      background-repeat:no-repeat;
      background-position:center center;
      -o-background-size: 100%;
      -moz-background-size: 100%;
      -webkit-background-size: 100%;
      background-size: 100%;
     height: 100%;
  }
  
  #borderimg1 { 
      border: 10px solid transparent;
      padding: 15px;
      -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Safari 3.1-5 */
      -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Opera 11-12.1 */
      border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
  }
  
  #borderimg2 { 
      border: 10px solid transparent;
      padding: 15px;
      -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Safari 3.1-5 */
      -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Opera 11-12.1 */
      border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"&gt;&lt;/script&gt;
      &lt;button onclick="takeScreenShot()"&gt;to image&lt;/button&gt;
  &lt;div id="target"&gt;
      
  &lt;p&gt;The border-image property specifies an image to be used as the border around an element:&lt;/p&gt;
  &lt;p id="borderimg1"&gt;Here, the middle sections of the image are repeated to create the border.&lt;/p&gt;
  &lt;p id="borderimg2"&gt;Here, the middle sections of the image are stretched to create the border.&lt;/p&gt;
  
  &lt;p&gt;Here is the original image:&lt;/p&gt;&lt;img src="https://www.w3schools.com/cssref/border.png"&gt;
  &lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; Internet Explorer 10, and earlier versions, do not support the border-image property.&lt;/p&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/UDFai.png" rel="nofollow noreferrer">image for error message</a></p>