JavaScript/jQuery 签名板

Question

想问是否有办法将<canvas>内容转移到另一个<div> 。 这样在放上签名之后，它就会在它被转移到的<div>的内部进行预览。

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

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

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

谢谢。

Answer 1

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