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

Design help Custom code
#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:

quote

1 Like
#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

#5

@ctrav did you end up working this out???

#6

Not quite, the implementations I was pursuing ended up being too low quality, so I took a different approach all together (ultimately not needing this to work).

Maybe since 2017 something more quality-driven better has been developed. I may recommend a photoshop script paired with their batch automation features, depending on what you need done.

#7

I want clients to login to the editor and manage their own download. I have it working now, I just need to make it work with collections

#8

@ctrv @fagan_Wilcox Did you get images to show/download? Having problems with this.

$("#print").click(function() { PrintDiv(); });

function PrintDiv()
{
var div = document.getElementById(‘printableArea’);
var tempHeader = document.getElementById(‘printheader’).cloneNode(true);

div.insertBefore(tempHeader, div.firstChild);


html2canvas((div), {logging: true, useCORS: true, 
    onrendered: function(canvas) {
      	
      var myImage = canvas.toDataURL();
      downloadURI(myImage, document.title);
      div.removeChild(tempHeader); 
  }
});

}

function downloadURI(uri, name) {
var link = document.createElement(“a”);
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
}

#9

This implementation garnered images that were too low quality to be useful to me, so I stopped pursuing it and have not revisited the code in years.

1 Like