toDataURL

方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

canvas.toDataURL(type, encoderOptions);

type 可选

图片格式，默认为 image/png

encoderOptions 可选

在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <!-- <script src="./index.js"></script> -->
  9.   <title>签名</title>
  10.   <style>
  11.     .signature {
  12.       position: relative;
  13.     }
  15.     .canvas {
  16.       width: 100%;
  17.       height: 700px;
  18.     }
  20.     .bottom {
  21.       width: 100%;
  22.       text-align: center;
  23.       height: 3rem;
  24.       line-height: 3rem;
  25.       border-top: 1px solid #ccc;
  26.       font-size: 1rem;
  27.     }
  28.   </style>
  29. </head>
  31. <body>
  32.   <div class="signature">
  33.     <div id="canvas" class="canvas">
  34.     </div>
  35.     <div class="bottom" onclick="submit()" style="cursor: pointer">保存签名</div>
  36.   </div>
  37.   <script>
  38.     let draw = false
  40.     window.onload = () => {
  41.       canvas()
  42.     }
  43.     function canvas() {
  44.       let c = document.getElementById("canvas")
  45.       let canvas = document.createElement("canvas")
  46.       let availHeight = document.documentElement.clientHeight
  47.       let off = 0
  48.       canvas.height = '700'
  49.       canvas.width = c.clientWidth
  50.       c.appendChild(canvas)
  51.       let dr = canvas.getContext('2d')
  52.       dr.strokeStyle = 'blue'
  53.       canvas.addEventListener('mousedown', (e) => {
  54.         draw = true
  55.         dr.beginPath()
  56.       })
  57.       canvas.addEventListener('mousemove', (e) => {
  58.         // console.log(e)
  59.         if (draw) {
  60.           dr.lineTo(e.pageX, e.pageY - off)
  61.           dr.stroke()
  62.         }
  63.       })
  64.       canvas.addEventListener('mouseup', (e) => {
  65.         // console.log(e)
  66.         draw = false
  67.       })
  68.     }
  70.     function downLoad(url) {
  71.       console.log(url)
  72.       var oA = document.createElement("a");
  73.       oA.download = '';
  74.       oA.href = url;
  75.       document.body.appendChild(oA);
  76.       oA.click();
  77.       oA.remove();
  78.     }
  80.     function submit() {
  81.       let img = document.querySelector('canvas').toDataURL("image/png")
  82.       downLoad(img)
  83.     }
  84.   </script>
  85. </body>
  87. </html>
文档更新时间: 2019-05-10 14:29