Создание изображения с использованием HTML5 - PullRequest
Новая
       3

Создание изображения с использованием HTML5

0 голосов
/ 22 июня 2011

Я хотел знать, возможно ли создать изображение, используя html5.В настоящее время я создаю текст с помощью canvas, теперь я хочу преобразовать этот текст в изображение.

Ответы [ 2 ]

4 голосов
/ 22 июня 2011

Чтобы сохранить холст в файл изображения, вы можете использовать код Nihilogic .

Использование текстовых функций canvas .

Например: 

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          ctx.fillText("Sample String", 10, 50);
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>
0 голосов
/ 16 марта 2017

Создайте DOM-элемент изображения и установите для src метод canvas.toDataURL. 

var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

function copy() {
 
       var image = document.getElementById("Img");
           image.src = c.toDataURL("image/png");


}
<canvas id="c" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<img id="Img" width="300" height="150" style="border:1px solid #d3d3d3;"/>
<button onclick="copy()">Copy</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...