Похожие чаты

I want to take a snapshot of a web page

and to save it as an image file.
I've found a sample which does it using canvas, on fiddle it's working fine: https://jsfiddle.net/Sjeiti/opsjbrjL/
When I try to implement it on my webserver with the following code:
<head>
<script type="text/javascript" src="canvas.js"></script>
<link rel="stylesheet" type="text/css" href="canvas.css">
</head>
<body>
<canvas width="100" height="100"></canvas>
<div><a href="#" download="image.png">download image</a></div>
</body>
canvas.js:
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const anchor = document.querySelector('a');
const rand = i=>Math.random()*i<<0
const fileName = image${100+rand(100)}.png;

drawOntoCanvas();
anchor.addEventListener('click', onClickAnchor);

function onClickAnchor(e) {
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(canvas.msToBlob(), fileName);
e.preventDefault();
} else {
anchor.setAttribute('download', fileName);
anchor.setAttribute('href', canvas.toDataURL());
}
}
function drawOntoCanvas(){
const size = 100;
context.fillStyle = 'rgba(255,0,0,0.4)';
let i = 10;
while (i--) {
context.fillRect(rand(size),rand(size),rand(size),rand(size));
}
}
it's not working, not even drawing on the canvas nor saving it to a file.
What am I missing there?

5 ответов

10 просмотров

Are you getting an error in the console?

Fab-horn Автор вопроса
Misan
Are you getting an error in the console?

yes, I get an Uncaught TypeError, Cannot read roprties of null (reading 'getContext') at canvas.js:2:24

Fab horn
yes, I get an Uncaught TypeError, Cannot read ropr...

Ok easy fix: load your js after the html has loaded. Put the script at the end of the body.

Fab-horn Автор вопроса

thanks! I get to draw on the canvas, and it's savint it! now got to see if I can put lot of iframes inside the canvas and to be able to save the image...

Похожие вопросы

Обсуждают сегодня

Ready for some fun AND a chance to win TKO Tokens? Join us for exciting minigames in our Telegram group! 🕒 Don’t miss out—games start on today 25 October 2024, at 8 PM! Ge...
Milkyway | Tokocrypto
255
Добрый вечер. Есть вопрос, а может и предложение. Был у меня диалог в другой группе о делфи и я задался вопросом: "А нельзя ли в делфи цвет //коментария и {комментария} сде...
Kraszx
24
How about the project bro Likes the community not that active ?
🅿️abby_FX
19
Всем привет! Подскажи, пожалуйста, как передать в TComboBox сразу значение и id записи. На Delphi я делал так: ComboBox1.Items.AddObject('Какое-то значение', Pointer(id запис...
Евгений
13
Мдя, прикол, боевая сборка запускается (именно под отладчиком) после F9 примерно полторы минуты (97 секунд если быть точным). Начал копать - проблема детектится сразу - зависа...
Александр (Rouse_) Багель
38
How are we going bro about the Raids ??
🅿️abby_FX
13
Россия стала ввозить сливочное масло из ОАЭ. Просто ради любопытства взглянул на статистику и впечатлился. У арабов среднестатистическая корова дает около 42 литров молока в д...
Foxcool
2
Здравствуйте, вопрос по структурам данных. Были у вас случаи, когда пришлось писать деревья или двунаправленные списки?
/ /
50
Товарищи, кто работа с iphelper? Или может я в самой логике ошибки фигачу, не пойму.... var ifTable : PMIB_IFTABLE; size, corSize: DWORD; Buffer ...
Warfarellen
4
я так понимаю, я так подозреваю, что создание такого плагина для человека, кто умеет писать плагины для делфи потребует минут 5-10 времени. но это мое подозрение. хотелось бы ...
Kraszx
7
Карта сайта