title: Html2Canvas Not Capturing Image in Shopify
body: <p>I am attempting to convert the contents of a div into an image using Html2Canvas.</p>
  <p>I developed the following coded and it works perfectly locally.</p>
  <p><strong>Index.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;html2canvas.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a href=&quot;#&quot; onclick=&quot;UploadImage();&quot;&gt;upload file&lt;/a&gt;
      &lt;div id=&quot;dpo_base_image&quot;&gt;
          &lt;img src=&quot;Images/Lowen Glas.jpg&quot; /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;script src=&quot;ImageUploader.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p><strong>ImageUploader.js</strong></p>
  <pre><code>function UploadImage() {
      html2canvas(document.querySelector(&quot;#dpo_base_image&quot;)).then(canvas =&gt; {
          $.ajax({
              type: 'POST',
              url: &quot;https://shopiflistener.azurewebsites.net/api/ImageUpload&quot;,
              data: canvas.toDataURL(),
              dataType: &quot;json&quot;,
              success: function (data) {
                  alert(data.ImageDatabaseId);
              },
              error: function (data) { alert(&quot;Error&quot;) }
          });
      });
  }
  </code></pre>
  <p>I now attempting to port this code into a Shopify Theme.</p>
  <p>I have added the main html2canvas.js as an asset and linked to it in the header of the liquid theme.
  I have added a link to the JQuert CDN.</p>
  <p>And this is the &quot;final&quot; code in Shopify that just doesn't work:</p>
  <pre><code>debugger;
  try {
      if ($(&quot;#Image15346471927913&quot;).length) {
  
          html2canvas($(&quot;#Image15346471927913&quot;), {
              onrendered: function (canvas) {
                  debugger;
                  var img = canvas.toDataURL();
                  alert(img);
              }
          });
      }
      else {
          console.log(&quot;Image div missing!&quot;);
      }
  } catch (err) {
      console.log(err);
  }
  });
  </code></pre>
  <p>When debugging it gets to the line where it html2canvas attempts to convert the div to an image, pauses briefly and then skips out of the function. I can't get it to hit the catch or log any errors to the console.</p>
  <p>Any help would be greatly appreciated.</p>
  <p><strong>Update:</strong></p>
  <p>As per the comments I have swapped back to this and it still doesn't work.
  It gets to the line that proves the image exists and then just jumps to the bottom line</p>
  <pre><code>jQuery(window).on('dpo_before_form_submit', function (e, form) {
      debugger;
      try {
          if ($(&quot;#Image15376602267753&quot;).length) {
           html2canvas(document.querySelector(&quot;#Image15376602267753&quot;)).then(canvas =&gt; {
                  this.alert(&quot;Hello!&quot;);
              });
          }
          else {
              console.log(&quot;Image div missing!&quot;);
          }
      } catch (err) {
          console.log(err);
      }
  });
  </code></pre>