javascript html2canvas另存为jpeg而无需在浏览器中打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16429214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html2canvas saving as a jpeg without opening in browser
提问by jotamon
I am trying to create a screengrab button that creates an image of the user's document.body.
我正在尝试创建一个屏幕抓取按钮，用于创建用户的document.body.
Ideally the user would then have an option to save the image locally as a .jpeg.
理想情况下，用户可以选择将图像在本地保存为.jpeg.
I am getting close to creating the functionality I need using the html2canvaslibrary.
我即将使用html2canvas库创建我需要的功能。
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 imgvariable 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.
为了验证这是否有效，我一直img在新的浏览器窗口中打开变量。图像没有完全渲染，我猜这是因为它的长度超过 30,000 个字符。
How might I better give the user an option to save the canvas locally after the onrenderedevent?
我怎样才能更好地为用户提供在onrendered事件发生后在本地保存画布的选项？
采纳答案by dandavis
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");
}
});
}
