JavaScript/jQuery 签名板

Question

想问是否有办法将<canvas> 的内容转移到另一个<div>。这样放上签名后，会在转入的<div>里面预览。

我在之前的项目中使用过这个库https://github.com/szimek/signature_pad，签名看起来很真实，就像是用钢笔写的一样。

这个库可以将签名保存到文件中，所以我在之前的项目中所做的是，一旦我提交表单，签名将被保存，并且通过将源文件附加到 <img> 元素来进行预览。

我想做的是我有一个<button>，它将显示一个包含签名板的模态，一旦模态关闭，签名将转移到另一个<div>，其中它的大小将缩小取决于div 的大小，而无需将签名保存在文件中。

谢谢。

Answer 1

看看HTMLCanvasElement.toDataURL。这将为您提供作为 Data 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>