Question

4

html2canvas saving as a jpeg without opening in browser

rated 0 times [ 7] [ 3] / answers: 1 / hits: 18228 / 11 Years ago, tue, may 7, 2013, 12:00:00

I am trying to create a screengrab button that creates an image of the user's document.body.

Ideally the user would then have an option to save the image locally as a .jpeg.

I am getting close to creating the functionality I need using the html2canvas library.

function screenGrabber() {

    html2canvas([document.body], {

    logging: true,

    useCORS: true,

    onrendered: function (canvas) {            



        img = canvas.toDataURL(image/jpg);



        console.log(img.length);

        console.log(img);



        window.location.href=img; // it will save locally

    }

});



}

To verify that this is working I've been opening the img variable in a new browser window. The image does not render completely and I am guessing that's because it's length is over 30,000 characters.

How might I better give the user an option to save the canvas locally after the onrendered event?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckenna

Add To Favorites

Follow

Total Points: 445

Total Questions: 109

Total Answers: 109

Location: Virgin Islands (U.S.)

Member since Sun, May 16, 2021

3 Years ago

mckenna questions

1 Laravel Livewire: Component in Foreach loop. Button Click shows on all items instead of Single item

Mon, Sep 6, 21, 00:00, 3 Years ago

1 Jest mock aws-sdk ReferenceError: Cannot access before initialization

Sat, Apr 11, 20, 00:00, 4 Years ago

1 Nest js POST Request Not Recognizing DTO method

Fri, Mar 20, 20, 00:00, 4 Years ago

1 How to use prop inside another prop as default value in vuejs

Thu, Mar 28, 19, 00:00, 5 Years ago

1 Javascript: Bind/unbind function behavior

Tue, Nov 27, 18, 00:00, 6 Years ago

View All

answered 11 Years ago scarlett · Accepted Answer

a downloader function makes it much easier:

function download(strData, strFileName, strMimeType) {

    var D = document,

        A = arguments,

        a = D.createElement(a),

        d = A[0],

        n = A[1],

        t = A[2] || text/plain;



    //build download link:

    a.href = data: + strMimeType + , + escape(strData);





    if (window.MSBlobBuilder) {

        var bb = new MSBlobBuilder();

        bb.append(strData);

        return navigator.msSaveBlob(bb, strFileName);

    } /* end if(window.MSBlobBuilder) */







    if ('download' in a) {

        a.setAttribute(download, n);

        a.innerHTML = downloading...;

        D.body.appendChild(a);

        setTimeout(function() {

            var e = D.createEvent(MouseEvents);

            e.initMouseEvent(click, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

            a.dispatchEvent(e);

            D.body.removeChild(a);

        }, 66);

        return true;

    } /* end if('download' in a) */

    ; //end if a[download]?



    //do iframe dataURL download:

    var f = D.createElement(iframe);

    D.body.appendChild(f);

    f.src = data: + (A[2] ? A[2] : application/octet-stream) + (window.btoa ? ;base64 : ) + , + (window.btoa ? window.btoa : escape)(strData);

    setTimeout(function() {

        D.body.removeChild(f);

    }, 333);

    return true;

} /* end download() */











function screenGrabber() {

    html2canvas([document.body], {

    logging: true,

    useCORS: true,

    onrendered: function (canvas) {            



        img = canvas.toDataURL(image/jpeg);



       download(img, modified.jpg, image/jpeg);

    }

});



}