demos/svg-cors.html

<!doctype html>
<html class="checker">
<head>
  <meta charset="utf-8">
  <title>AlphaJpg (SVG &amp; CORS image)</title>
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./css/prettify.css">
  <link rel="stylesheet" href="./css/sunburst.css">
  <link rel="stylesheet" href="./css/screen.css">
  <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
</head>
<body>

  <header class="header">
    <div class="header__inner">
      <a class="header__back-bttn bttn" href="index.html">Back</a>
      <a id="about-open" href="javascript:void(0);" class="header__label">SVG (Cross Origin Image)<span class="header__icon" title="More Info"></span></a>
      <a id="source-open" class="header__source-bttn bttn" href="javascript:void(0);">View Source</a>
    </div>
  </header>
  <div id="source-code" class="app">

    <div id="myImage" class="preserveAspectRatio"><div></div></div>

    <script src="../js/AlphaJpg-SVG.js"></script>
    <script>
      var myImage = document.getElementById('myImage');
      window.onload = function(){ // source-ignore delay execution so we can capture source before DOM is updated
      AlphaJpg_SVG.load('https://dev-porcupine021.s3.amazonaws.com/alphajpg/img/test0.alpha.jpg', function(svg){
        if(svg === false){
          myImage.innerHTML = 'Sorry! This browser is not supported.';
        }
        else{
          myImage.childNodes[0].appendChild(svg);
        }
      });
      } // source-ignore
    </script>

  </div>

  <div id="source-overlay" class="modal-overlay">
    <a id="source-close" class="close-bttn" href="javascript:void(0);" title="Close"></a>
    <div id="source-body" class="modal-body">
      <pre id="source-pre" class="prettyprint"></pre>
    </div>
  </div>

  <div id="about-overlay" class="modal-overlay" style="display:block;">
    <a id="about-close" class="close-bttn" href="javascript:void(0);" title="Close"></a>
    <div id="about-body" class="modal-body">
      <div class="about-inner">
        <h2>Attention</h2>
        The <a href="../js/AlphaJpg-SVG.js" target="_blank" rel="noopener">AlphaJpg-SVG.js</a>
        library is <strong><em>experimental</em></strong>! It is not meant to be used on a
        production website.
        <h2>Description</h2>
        This demo shows the basic usage of the
        <a href="../js/AlphaJpg-SVG.js" target="_blank" rel="noopener">AlphaJpg-SVG.js</a>
        library.  A specially crafted 
        <a href="img/test0.alpha.jpg" target="_blank" rel="noopener">jpg image</a>
        is loaded from an external domain. It's alpha transparency is reconstructed 
        using a SVG Filer. The returned SVG element is attached to the DOM. 
        The SVG is wrapped in two div elements and styled so that it behaves like 
        a responsive image.<br>
        <h2>Support</h2>
        This technique requires Javascript and 
        <a href="https://caniuse.com/#feat=svg-filters" target="_blank" rel="noopener">SVG Filter support</a>.
        
        <h2>Known Issues</h2>
        <ul>
          <li>This library does not support background images.</li>
          <li>When loading an image from an external domain, several browsers will download the image twice.</li>
          <li>Firefox renders visual artifacts when reconstructing the image. A 
            <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1441294" target="_blank" rel="noopener">bug report</a>
            has been filed.
          </li>
        </ul>
      </div>
    </div>
  </div>

  <script src="./js/prettify.js"></script>
  <script src="./js/demo.js"></script>

</body>
</html>