Downloading image created from a div to phone

Question

I'm building an app where it's important that the user is able to save an image that is created to mobile devices. I'm able to download this image no problem to a desktop, but phones...they're being difficult!

I'm using html2canvas to help with the conversion from a div to a pdf(for desktop) and a jpg (for mobile).

I've tried a couple different things, but nothing seems to really be working.

I've done

    var HTML_Width = '38em';
    var HTML_Height = '48em';
    var top_left_margin = 5;
    var jpg_Width = HTML_Width + (top_left_margin * 2);
    var jpg_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = 0;

    html2canvas($("#posterFrame")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var jpg = new jsPDF('p', 'pt', [jpg_Width, PDF_Height]);
        jpg.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) {
            jpg.addPage(PDF_Width, jpg_Height);
            jpg.addImage(imgData, 'JPG', top_left_margin, -(jpg_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
        }

        jpg.save($('#animalName').text() + ".jpg");
    });

and this kind of works, but it opens it up into a new tab as a blob image and you're not able to save it.

and then I've tried something like this

 html2canvas(document.querySelector("#to_save")).then(canvas => {
    canvas.toBlob(function(blob) {
      window.saveAs(blob, 'my_image.jpg');
});
    });

but no matter what I do the 'window.saveAs' keeps returning that it's not a function.

Any ideas or pushes in the right directions? I've been all over stackoverflow and I feel like I'm just going down a dark rabbit hole.

I would create a jsFiddle or something of the like, but we're going to get a cors error because of the cross domain