JavaScript/jQuery 签名板

Question

请问有没有办法转账<canvas>内容到另一个<div> 。这样放上签名后，就会在<div>里面预览。它被转移到。

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

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

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

谢谢。

Answer 1

看看HTMLCanvasElement.toDataURL 。这将为您提供 Canvas 图像 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>