Streaming live at 10am (PST)

Need help saving the contents of a div upon the click of a button


#1

Hello all,

I have hit a roadblock attempting to get the contents of a div to save upon click of a button. I have my test site published here and can provide the preview link here.

I have been playing around with it for about an hour now and doing research in a variety of places, but I am coming up empty handed. I am currently using code assembled from my research here on the webflow forums about button-triggered scripts and here about html2canvas:

<script src="https://rawgithub.com/niklasvh/html2canvas/master/dist/html2canvas.min.js">    </script>
<script type="text/javascript">
$(document).ready(function() {
     $('save').click(function() {
          html2canvas($('shell'), {
               useCORS: true,
               allowTaint: true,
               onrendered: function (canvas) {
                    var img = document.createElement("a");
                    img.href = canvas.toDataURL();
                    img.download = "quote.png";
                    img.click();
               }
          });
     });
});
</script>

I’m not sure whether or not my button onClick is faulty, or if the html2canvas portion is faulty. Any guidance would be greatly appreciated. You can find this code in the custom code of the Home page.

Best,
Christopher


#2

Your selectors are incorrect, and allowTaint:true will prevent the canvas from being downloaded.

Image can be downloaded once fixed:


#3

Hey @samliew thanks for the response. I removed the allowTaint:true bit, but could you clarify more about the selectors? Thank you.

Best,
Christopher


#4

Hey @samliew (or anyone else watching on), can you provide further clarification on this?

Best,
Christopher