Панель подписи JavaScript / jQuery - PullRequest
Новая
       32

Панель подписи JavaScript / jQuery

0 голосов
/ 27 сентября 2019

Хотел бы спросить, есть ли способ передать <canvas> содержимое другому <div>.Так что после установки подписи она будет предварительно просматриваться внутри <div>, на который она была передана.

Я использовал эту библиотеку https://github.com/szimek/signature_pad в нашем предыдущем проекте, и подпись выглядитреальная, как будто она была написана пером.

Эта библиотека может сохранить подпись в файл, так что я сделал в нашем предыдущем проекте, как только я отправлю форму, подпись будет сохранена, и она будетПредварительный просмотр путем присоединения исходного файла к элементу <img>.

Что я хотел бы сделать, это то, что у меня есть <button>, который покажет модал, который содержит панель для подписи, и как только модал будет закрыт,подпись будет передана другому <div>, размер которого будет уменьшаться в зависимости от размера div без необходимости сохранять подпись в файле.

Спасибо.

1 Ответ

1 голос
/ 27 сентября 2019

Взгляните на HTMLCanvasElement.toDataURL .Это даст вам изображение холста в виде URI данных , который вы затем сможете добавить на свою страницу в виде изображения.

Вот простой пример: 

let canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');

// Draw something
ctx.fillStyle = "lightgray";
ctx.fillRect(0, 0, 200, 100);
ctx.fillStyle = 'orange';
ctx.fillRect(20, 20, 160, 60);
ctx.fillStyle = 'black';
ctx.font = "50px monospace";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("image", 100, 50);

// Make the image and put it in the output
let uri = canvas.toDataURL('image/png'),
    outdiv = document.querySelector('#out'),
    outimg = new Image();
outimg.src = uri;
outdiv.appendChild(outimg);
<div style="display: inline-block;">
  <h6>Canvas with border</h6>
  <canvas width="200" height="100"
          style="border: 1px solid black;">
  </canvas>
</div>

<div style="display: inline-block;">
  <h6>Output image in a <code>div</code></h6>
  <div id="out"></div>
</div>
...