英文:
html2canvas(document.body) generates error - "Error loading image"
问题
我正在尝试使用html2canvas进行屏幕截图，但出现了“加载图像时出错”的错误。
我的代码非常简单 -
function SaveScreenshot() {
html2canvas(document.body).then(canvas => {
var image = canvas.toDataURL('image/webp');
try {
localStorage.setItem("img1", image);
} catch (e) {
console.log("Storage failed: " + e);
}
});
return false;
}
您可以自行尝试。转到 - https://bengurion.azurewebsites.net/gallerynew
使用相机按钮拍摄一张照片（或者不要拍摄，这并不重要）。
通过点击汉堡按钮进入菜单。
转到相册按钮（看起来像有人的4张图片）。
这是调用该函数的按钮。
请协助。
英文:
I am trying to take a screenshot with html2canvas and I am getting the error "Error loading image".
My code is fairly simple -
function SaveScreenshot() {
html2canvas(document.body).then(canvas => {
var image = canvas.toDataURL('image/webp');
try {
localStorage.setItem("img1", image);
}
catch (e) {
console.log("Storage failed: " + e);
}
});
return false;
}
You can try it yourself. Go to - https://bengurion.azurewebsites.net/gallerynew
Take a snap with the webcam using the camera button (or don't. It doesn't really matter).
Go to the menu by pressing on the hamburger button.
Go to the gallery button (looks like 4 images with people in them).
This is the button that's calling the function.
Please assist.
答案1
得分: 2
I'm not pretty sure why you use 'image/webp' MIME type but it is supported only by chrome. I think you can try something like this. Much common way of doing screen shots.
function SaveScreenshot() {
html2canvas(document.body).then(canvas => {
const base64Image = canvas.toDataURL('image/jpeg', 1);
try {
localStorage.setItem("img1", base64Image);
}
catch (e) {
console.log("Storage failed: " + e);
}
});
return false;
}
英文:
I'm not pretty sure why you use 'image/webp' MIME type but it is supported only by chrome. I think you can try something like this. Much common way of doing screen shots.
function SaveScreenshot() {
html2canvas(document.body).then(canvas => {
const base64Image = canvas.toDataURL('image/jpeg', 1);
try {
localStorage.setItem("img1", base64Image);
}
catch (e) {
console.log("Storage failed: " + e);
}
});
return false;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论