title: DataURL of an img with CSS class
body: <p>I have to apply some styles on <code>&lt;img&gt;</code> thanks to a CSS class.</p>
  
  <p>Is it possible to get the <code>dataURL</code> of the <code>&lt;img&gt;</code> with the CSS style ?</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>$(function() {
    // Original
    const imgOriginal = document.getElementById('original');
    const c1 = document.getElementById('c1');
    let ctx = c1.getContext('2d');
    ctx.drawImage(imgOriginal, 100, 100);
  
    // Filtered
    const imgFiltered = document.getElementById('filtered');
    const c2 = document.getElementById('c2');
    ctx = c2.getContext('2d');
    ctx.drawImage(imgFiltered, 100, 100);
  
    // Same dataURL :(
    console.log(c1.toDataURL(), c2.toDataURL());
    console.log(c1.toDataURL() === c2.toDataURL());
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.filter::before {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    border: 1px solid red;
  }
  
  .filter {
    position: relative;
    -webkit-filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
    filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
  }
  
  canvas {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div&gt;
  
    &lt;img id="original" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg/170px-Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg"&gt;
    &lt;canvas id="c1"&gt;&lt;/canvas&gt;
  
    &lt;img id="filtered" class="filter" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg/170px-Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg"&gt;
    &lt;canvas id="c2"&gt;&lt;/canvas&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Maybe snippet is going to have a bug because of the <code>&lt;canvas&gt;</code> tag, the idea is there anyway.</p>
  
  <hr>
  
  <p><strong>EDIT</strong> : </p>
  
  <p>If anyone has a suggestion with <code>SVG</code> or something else, I'm using <a href="http://fabricjs.com/" rel="nofollow noreferrer">fabricJS</a>.</p>
  
  <hr>
  
  <p><strong>EDIT 2 (NOT RESOLVE BUT FIND OTHER WAY)</strong> : </p>
  
  <ol>
  <li><p>Thanks to @KavianK. you could replicate <code>CSS</code> style with the <code>canvas</code> context, however to me it's boring because we have to store a different <code>callback</code> for each <code>CSS</code> class to get the <code>dataURL</code>. Working anyway!</p></li>
  <li><p>Thanks to @Emeeus maybe a solution provide from your backend, not solution for me beacause i'm want to do this ONLY on the front-end. <a href="https://wkhtmltopdf.org/" rel="nofollow noreferrer">wkhtmltopdf</a></p></li>
  <li><p>Thanks to @pegasuspect we can filter an image with <code>SVG</code>, I'm following this way and I replace <a href="http://fabricjs.com/" rel="nofollow noreferrer">fabricJS</a> by <a href="http://svgjs.com/" rel="nofollow noreferrer">svgjs</a>, this librairie can replace easly a <code>canvas</code> and it's more easier to work with <code>img</code> and I dind't need the <code>DataURL</code>  anymore !</p></li>
  <li><p>Thanks to @Kaiido there is a way to take a <code>snapshot</code> of your <code>HTML</code> rendered with <code>CSS</code> style with <a href="https://github.com/niklasvh/html2canvas/" rel="nofollow noreferrer">html2canvas</a> easy to get <code>dataURL</code> with this case. Unfortunataly some <code>CSS</code> styles are not supported yet like <code>box-shadow</code> or <code>filter</code> that's why it's not a solution for me</p></li>
  </ol>
  
  <p>This topic is not resolve but with <code>svgjs</code> I don't need actually work with <code>dataURL</code>. </p>