Save Text As File JavaScript | CodingNepal

Выводим текст на HTML5 Canvas

HTML5 Canvas – очень обширная тема со многими “вкусностями”, о многих из которых уже писали и ещё будут писать. Поэтому, я хочу немного рассказать в этой статье, только об одной маленькой, и как на первый взгляд может показаться банальной темой – работа с текстом. Я хочу показать, что с ним почти также можно работать, как с обычным текстом в вебе, т.е. позиционировать, накладывать стили и градиенты, а также писать многострочные предложения легко и без проблем.

Простой текст

Чтобы вывести обычный текст, можно воспользоваться двумя функциями контекста fillText() и strokeText().
Эти функции принимают три обязательных параметра: сам текст и координаты X и Y, т.е. место его расположения, и последний – необязательный: максимальная ширина текста, если вы зададите максимальную ширину текста меньше, чем фактическая ширина, то текст сожмется до указанной вами ширины. Не советую задавать максимальную ширину, так как при сжатии и у него становится плохой вид. Вместо такого сжатия рекомендую переносить текст на новую строку, стандартной функции для этого нет, но я приведу пример, как это легко реализовывается.
Если просто вывести текст при помощи таких функций, то такой текст будет мелкий и невзрачный. Это мы можем исправить задав ему шрифт в переменную контекста font. Шрифт задается, также как и в CSS ([font style][font weight][font size][font face]). Пример:

 ctx.fillStyle = "#00F"; ctx.strokeStyle = "#F00"; ctx.font = "italic 30pt Arial"; ctx.fillText("Fill text", 20, 50); ctx.font = 'bold 30px sans-serif'; ctx.strokeText("Stroke text", 20, 100); 

Расположение текста

Есть два стандартных способа позиционирования текста, относительно своего расположения: вертикальное и горизонтальное.
Вертикальное позиционирование задается при помощи textBaseline, в неё устанавливается один из возможных вариантом: top, hanging, middle, alphabetic, ideographic и bottom.

 ctx.textBaseline = "bottom"; ctx.fillText("bottom", 400, 75); 

А горизонтально при помощи textAlign, может быть один из следующих параметров: center, start, end, left, right.

 context.textAlign = "center"; ctx.textBaseline = "bottom"; context.fillText("center", 250, 20); 

Эти способы далеко не идеальны и при помощи них иногда проблематично спозиционировать текст, так как хочется именно вам. Ниже я опишу способ, как можно использовать своё позиционирование, даже многострочного текста.

Стилизация
Самое простое, как мы можем стилизовать текст, это задать ему цвет. Цвет задается при помощи fillStyle – для задания цвета заливки и strokeStyle – для задания цвета обводки.
Так же как и в CSS3 можно накладывать тени и на текст в канвасе. Это делается при помощи: shadowColor – задание цвета тени, shadowOffsetX и shadowOffsetY – задание отступа и shadowBlur – задание размытия тени.

 ctx.shadowColor = "#F00"; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 5; ctx.strokeText("Shadow text", 20, 100); 

Поддерживаются также и градиенты для текста. Сам градиент создается при помощи функции createLinearGradient(). А при помощи функции addColorStop() задаются цвета и позиции их в нём. Текст заливается градиентом также как и сплошным цветом, при помощи fillStyle и strokeStyle.

 var gradient = ctx.createLinearGradient(0, 0, 0, 60); gradient.addColorStop(0.0, 'rgba(0, 0, 255, 1)'); gradient.addColorStop(0.3, 'rgba(128, 0, 255, 0.6)'); gradient.addColorStop(0.6, 'rgba(0, 0, 255, 0.4)'); gradient.addColorStop(1.0, 'rgba(0, 255, 0, 0.2)'); ctx.fillStyle = gradient; 

Кроме обычной заливки и заливки градиентом можно также залить какой-либо текстурой. Для этого необходимо до начала вывода текста загрузить изображение-текстуру. А затем при помощи createPattern() создать текстуру на его основе. Можно задать, чтобы изображение повторялось либо нет.

 var pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern; 

Ширина текста и многострочный текст

Допустим, вам необходимо написать текст на канвасе неограниченной длинны, будь то одно слово, или несколько предложений. Если вы будете его писать как есть, т.е. весь текст вставите в fillText(), то на экране будет видна только та часть, которая по своей ширине не превышает ширину канваса. Т.е. если ширина канваса 400 пикселей, то вы не уведете текст, который выходит за его ширину. Для того, чтобы сделать многострочный текст необходимо исхитрится. Но алгоритм прост. Сначала высчитываем ширину текста, сверяем её с максимальной шириной области, куда мы хотим вывести этот текст. Если ширина текста не превышает ту ширину, то выводим текст, а если превышает, то разбиваем текст самым удобным для вас способом, я предпочитаю разбивать по пробелам.
Для того чтобы высчитать ширину текста можно воспользоваться функцией measureText(), которая отдает в объектной форме ширину текста (к сожалению данная функция не отдает высоту текста, надеюсь эта возможность будет добавлена, но а пока придется высчитывать иными способами, как именно далее в статье).
Пример:

function wrapText(context, text, marginLeft, marginTop, maxWidth, lineHeight) < var words = text.split(" "); var countWords = words.length; var line = ""; for (var n = 0; n < countWords; n++) < var testLine = line + words[n] + " "; var testWidth = context.measureText(testLine).width; if (testWidth >maxWidth) < context.fillText(line, marginLeft, marginTop); line = words[n] + " "; marginTop += lineHeight; >else < line = testLine; >> context.fillText(line, marginLeft, marginTop); > var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var maxWidth = 400; //размер поле, где выводится текст var lineHeight = 25; /*если мы знаем высоту текста, то мы можем предположить, что высота строки должна быть именно такой*/ var marginLeft = 20; var marginTop = 40; var text = "Сначала мы разбиваем текст на слова по пробелам, а потом обходим эти слова в цикле, " + "объединяя их по одному в строку. Если при последнем объединении ширина этой строки меньше максимальной, " + "то продолжаем, а если больше, то выводим строку без последнего слова, а его записываем в новую строку." + "И так продолжаем, пока не обработаем весь текст."; context.font = "16pt Calibri"; context.fillStyle = "#000"; wrapText(context, text, marginLeft, marginTop, maxWidth, lineHeight); 

Вроде как всё хорошо, не нужно задавать координаты текста, самому вручную вычислять влезет ли текст по ширине или нет. Почти всё автоматизировано и выглядит неплохо, но остается всё-таки маленький нюанс, высота текста у нас захардкоджена, по этому при смени шрифта или размера придется каждый раз подправлять вручную высоту текста (в примере переменная lineHeight).

Определяем высоту текста

При работе с текстом на канвасе ни функция measureText(), ни одна другая не дают нам определить высоту текста. Всё же можно справиться и с этой бедой, вариант решения этой проблемы, который я хочу предложить вам, не очень красив, но всё же оно работает.
Когда мы задаем стиль текста (размер и стиль шрифта) в font, то мы его задаем в таком же стиле, так как бы мы его задавали в CSS. Шрифты и их размеры, конечно если доступен такой шрифт в канвасе, то также он будет доступен и в обычных стилях.
И так, идея вот в чем, у нас есть размер и тип шрифта в переменной font, мы создаем в DOM новый элемент, туда помещаем текст, и устанавливаем стили из той переменной. Далее при помощи offsetHeight получаем высоту элемента, которая и будет высотой нашего текста. После этого можем благополучно удалить этот элемент из DOM.
Пример реализации этой идеи:

var text = "Этот текст должен быть написан справа в самом низу."; var marginLeft = canvas.width - context.measureText(text).width; var marginTop = canvas.height - getFontHeight(context.font); context.fillText(text, marginLeft, marginTop); function getFontHeight(font)

Буду рад, если кто-то предложит более красивый или правильный вариант получения высоты текста.
Спасибо.

Источник

How to Save Text As File in HTML CSS & JavaScript

Did you know that you can convert any text into a file and download it in different formats like txt, html, css, docs, ppt, etc using vanilla JavaScript? If your answer is no then this blog is for you.

Hey friends, today in this blog, you’ll learn to create a simple but useful project and that is how to save webpage content as a file using HTML CSS & JavaScript. Earlier, I shared a blog on how to Convert Text to Speech in JavaScript, and this time I want to show you how to convert text to file and download it with JavaScript. So, let’s get started with the project.

As you have seen in the preview image, in this project, there is a text box, an input box, select options, and a save button. When you type some text into the text box, select the file format, and hit the “save” button, a new file will be saved on your computer with the entered text in it. The file name is not mandatory and if you don’t give it, the file will be saved with a unique name.

If you’re curious to view a live demo of this project then check it out here. For a demo or a full video tutorial of this project (Save Text As File), you can watch the given YouTube video.

Video Tutorial of Save Text As File in JavaScript

In the above video, you’ve seen a demo of how to save the text as a file and how I created it using HTML CSS & JavaScript. I hope you’ve watched the video till the end and also learned something new from it.

If you liked this project and want to get the source codes or files, you can easily get them from the bottom of this page. But before that make sure you watched the video and understand the codes or methods properly else you might get confused later on while implementing that code in your projects.

You may like these projects:

Save Text As File in JavaScript [Source Codes]

To create this project (Save Text As File in JavaScript), first, you need to create three files – HTML, CSS & JavaScript file and paste the given codes into your file one by one. If you don’t know how to create these files or what to do or don’t want to do it, you can download the source code files of this project by clicking on the given download button that is bottom of this page.

First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

        
Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsuam has been the industries standard dummy texts ever since this 1500s, when an unknown printer took a galley of type and scrambled it to make a type of dollar specimen book. It have survived not only five centuries, but also from the leap into electronic typesetting. 
 
File name 
Save as 
 Text File (.txt) JS File (.js) HTML File (.html) SVG File (.svg) Doc File (.doc) PPT File (.ppt)  
 
 
 Save As Text File 
  

Second, create a CSS file with the name style.css and paste the given codes into your CSS file. Remember, you’ve to create a file with a .css extension.

/* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); * < margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; >body < display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 10px; background: #17A2B8; >.wrapper < width: 443px; border-radius: 7px; background: #fff; padding: 30px 25px 40px; box-shadow: 0 10px 15px rgba(0,0,0,0.05); >.wrapper :where(textarea, input, select, button) < width: 100%; outline: none; border: none; font-size: 17px; border-radius: 5px; >.wrapper :where(textarea, input)::placeholder < color: #aaa; >.wrapper :where(textarea, input):focus < box-shadow: 0px 2px 4px rgba(0,0,0,0.08); >.wrapper textarea < height: 270px; resize: none; padding: 8px 13px; font-size: 17.6px; border: 1px solid #ccc; >.wrapper .file-options < display: flex; margin-top: 10px; align-items: center; justify-content: space-between; >.file-options .option < width: calc(100% / 2 - 8px); >.option label < font-size: 17px; >.option :where(input, .select-menu) < height: 50px; padding: 0 13px; margin-top: 6px; border-radius: 5px; border: 1px solid #bfbfbf; >.option .select-menu select < height: 50px; background: none; >.wrapper .save-btn < color: #fff; cursor: pointer; opacity: 0.6; padding: 16px 0; margin-top: 20px; pointer-events: none; background: #17A2B8; >.save-btn:hover < background: #148c9f; >textarea:valid ~ .save-btn < opacity: 1; pointer-events: auto; transition: all 0.3s ease; >@media screen and (max-width: 475px) < .wrapper< padding: 25px 18px 30px; >.wrapper :where(textarea, input, select, button, label) < font-size: 16px!important; >.file-options .option < width: calc(100% / 2 - 5px); >.option :where(input, .select-menu) < padding: 0 10px; >.wrapper .save-btn < padding: 15px 0; >>

Last, create a JavaScript file with the name script.js inside js folder and paste the given codes into your JavaScript file. Remember, you’ve to create a file with a .js extension.

const textarea = document.querySelector("textarea"), fileNameInput = document.querySelector(".file-name input"), selectMenu = document.querySelector(".save-as select"), saveBtn = document.querySelector(".save-btn"); selectMenu.addEventListener("change", () => < const selectedFormat = selectMenu.options[selectMenu.selectedIndex].text; saveBtn.innerText = `Save As $File`; >); saveBtn.addEventListener("click", () => < const blob = new Blob([textarea.value], ); const fileUrl = URL.createObjectURL(blob); const link = document.createElement("a"); link.download = fileNameInput.value; link.href = fileUrl; link.click(); >);

That’s all, now you’ve successfully created a project about How to Save Text As a File in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It is free and a zip file will be downloaded that contains the project folder with source code files.

Источник