html2canvas保存为jpeg而不在浏览器中打开 [英] html2canvas saving as a jpeg without opening in browser

问题描述

我正在尝试创建一个屏幕抓图按钮，以创建用户document.body的图像.

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

理想情况下，用户可以选择将图像另存为.jpeg.

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

我即将使用 html2canvas 库来创建所需的功能.

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
    }
});

}

为验证此功能是否正常，我一直在新的浏览器窗口中打开img变量.图片无法完全渲染，我猜是因为它的长度超过30,000个字符.

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.

在onrendered事件之后，我如何更好地为用户提供一个在本地保存画布的选项?

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

推荐答案

下载器功能使操作变得更加简单:

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");
    }
});

}

这篇关于html2canvas保存为jpeg而不在浏览器中打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！