Основният проблем, свързан с конвертирането на HTML платно в PNG файл, е, че HTML платното всъщност не е изображение, а по-скоро динамичен елемент. Това означава, че не може да бъде директно преобразуван във файл с изображение, като например PNG, без първо да бъде преобразуван във формат на изображение. За да направите това, платното трябва да бъде изобразено в буфер извън екрана и след това да бъде експортирано като файл с изображение. Този процес може да бъде сложен и да отнеме много време в зависимост от сложността на платното и неговото съдържание. Освен това някои характеристики на платното, като сенки или градиенти, може да не се рендират правилно, когато се преобразуват във формат на изображение.
To convert a HTML canvas into a PNG file, you can use the <code>toDataURL()</code> method of the canvas element. This method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG).
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL('image/png'); // defaults to png, can also use 'image/jpeg'
</script>
1. Първият ред създава елемент canvas с id "myCanvas" и ширина и височина съответно 200px и 100px.
2. Вторият ред създава променлива, наречена “canvas”, която съхранява HTML елемента с id на “myCanvas”.
3. Третият ред създава променлива, наречена „dataURL“, която съхранява URI данните, върнати от toDataURL() метод, използвайки 'image/png' като параметър тип (по подразбиране е PNG).
JPEG срещу PNG файлов формат за уебсайт
JPEG и PNG са два от най-разпространените файлови формати за изображения, използвани в мрежата. JPEG е формат за компресия със загуба, което означава, че някои данни за изображение се губят, когато файлът се компресира. Това го прави идеален за снимки и други сложни изображения, където някои детайли могат да бъдат пожертвани за по-малък размер на файла. PNG, от друга страна, е формат за компресия без загуби, което означава, че по време на компресията не се губят данни. Това го прави идеален за изображения с остри линии и текст, като лога или икони.
JPEG файловете обикновено са много по-малки от PNG файловете, което ги прави по-бързи за изтегляне и по-лесни за съхранение на уеб сървъри. Въпреки това, те може да не изглеждат толкова остри или ясни като техните PNG двойници поради алгоритъма за компресия със загуби, използван в JPEG.
PNG файловете са по-големи от JPEG, но предлагат изображения с по-добро качество с по-остри линии и по-точни цветове. Те също така поддържат прозрачност, която може да бъде полезна при създаване на лога или икони с прозрачен фон. Изтеглянето им обаче може да отнеме повече време поради по-големия им файлов размер в сравнение с JPEG.
Какво е платно
Canvas е HTML елемент, който може да се използва за рисуване на графики на уеб страница с помощта на скриптови езици като JavaScript. Използва се за създаване на диаграми, анимации, игри и друго графично богато съдържание. Елементът canvas има няколко метода за рисуване на пътеки, кутии, кръгове, текст и добавяне на изображения. Освен това има няколко атрибута за задаване на ширината и височината на областта на платното, както и други свойства, като цвят на фона.
Как да конвертирате HTML canvas в PNG
Преобразуването на HTML платно в PNG изображение е относително прост процес.
1. Създайте HTML canvas елемент във вашата страница:
2. Нарисувайте нещо върху платното:
var ctx = document.getElementById(“myCanvas”).getContext(“2d”);
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0,0,150,75);
3. Вземете URL адреса на данните на платното:
var dataURL = document.getElementById(“myCanvas”).toDataURL();
4. Преобразувайте URL адреса на данните в PNG изображение:
var img = ново изображение ();
img.src = dataURL;
