vue電子簽名組件胯究,canvas手寫(xiě)簽名板

<!--
    Name:   手寫(xiě)簽名板
    Author: 
    Create time:2020-03-14
    Update time:2020-03-17
-->
<template>
  <div class="canvas">
    <canvas
      ref="canvas"
      style="background: rgba(255,255,155,0)"
      :width="width"
      :height="height"
      @touchstart.stop="touchstart"
      @touchmove.stop="touchmove"
      @touchend.stop="touchend"
      @mousedown.stop="down"
      @mouseup.stop="up"
    >當(dāng)前瀏覽器不支持手寫(xiě)簽名</canvas>
  </div>
</template>
<script>
export default {
  name: "signCanvas",
  props: {
    width: {
      default: 300
    },
    height: {
      default: 150
    },
    lineWidth: {
      default: 1
    },
    text: {
      default: "簽名區(qū)"
    },
    fontSize: {
      default: 20
    }
  },
  data() {
    return {
      dom: null,
      cxt: null,
      start: 0,
      end: 0
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.dom = this.$refs["canvas"];
      if (!this.dom.getContext) {
        alert("當(dāng)前瀏覽器不支持手寫(xiě)簽名");
        return;
      }
      this.position();
      this.canvasInit();
      window.addEventListener("touchmove", this.position);
      window.addEventListener("resize", this.position);
      window.addEventListener("wheel", this.position);
      window.addEventListener("scroll", this.position);
    },
    // 位置初始化
    position() {
      let direct = this.dom.getBoundingClientRect();
      this.start = direct.x;
      this.end = direct.y;
    },
    // 畫(huà)布初始化
    canvasInit() {
      this.cxt = this.dom.getContext("2d");
      // this.cxt.fillStyle = "#ffffff";
      this.cxt.lineCap = "round";
      this.cxt.lineWidth = this.lineWidth;
      this.cxt.clearRect(0, 0, this.width, this.height);
      // this.cxt.font = this.fontSize + "px bold 黑體";
      // this.cxt.fillStyle = "#eee";
      // this.cxt.textAlign = "center";
      // this.cxt.textBaseline = "middle";
      // this.cxt.fillText(this.text, this.width / 2, this.height / 2);
    },
    // pc端鼠標(biāo)按下開(kāi)始繪畫(huà)
    down(e) {
      this.startLine(e.clientX, e.clientY, e);
      e.target.addEventListener("mousemove", this.move);
      document.addEventListener("mouseleave", this.up);
      document.addEventListener("mouseup", this.up);
    },
    // pc端鼠標(biāo)按下開(kāi)始繪畫(huà)后,跟蹤移動(dòng)軌跡
    move(e) {
      this.moveLine(e.clientX, e.clientY, e);
    },
    // pc端鼠標(biāo)松開(kāi)結(jié)束繪畫(huà)
    up(e) {
      e.target.removeEventListener("mousemove", this.move);
      this.toSave();
    },
    // 移動(dòng)端觸摸開(kāi)始繪畫(huà)
    touchstart(e) {
      this.startLine(
        e.changedTouches[0].clientX,
        e.changedTouches[0].clientY,
        e
      );
    },
    // 移動(dòng)端觸摸開(kāi)始繪畫(huà)后,跟蹤滑動(dòng)軌跡
    touchmove(e) {
      this.moveLine(e.touches[0].clientX, e.touches[0].clientY, e);
    },
    touchend() {
      this.toSave();
    },
    // 開(kāi)始繪畫(huà)
    startLine(x, y) {
      this.cxt.beginPath();
      x -= this.start;
      y -= this.end;
      this.cxt.moveTo(x, y);
    },
    // 繪制移動(dòng)軌跡
    moveLine(x, y, event) {
      event && event.preventDefault();
      x -= this.start;
      y -= this.end;
      this.cxt.lineTo(x, y);
      this.cxt.stroke();
    },
    // 清空繪畫(huà)數(shù)據(jù)
    toClear() {
      this.init();
    },
    // 保存繪畫(huà)數(shù)據(jù)
    toSave() {
      let base64 = this.dom.toDataURL("image/png");
      // base64轉(zhuǎn)為file對(duì)象
      let image = dataURLtoFile(base64, Math.ceil(Math.random() * 100));
      function dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(","),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
      }
      this.$emit("input", base64);
      return image;
    }
  },
  beforeDestroy() {
    this.toClear();
  }
};
</script>
<style lang='less' scoped>
.canvas {
  display: flex;
  justify-content: center;
  background: #fff;
}
canvas {
  border: 1px solid #ccc;
}
</style>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市擅腰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌翁潘,老刑警劉巖趁冈,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡渗勘,警方通過(guò)查閱死者的電腦和手機(jī)沐绒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)旺坠,“玉大人乔遮,你說(shuō)我怎么就攤上這事〖厶剩” “怎么了申眼?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)蝉衣。 經(jīng)常有香客問(wèn)我,道長(zhǎng)巷蚪,這世上最難降的妖魔是什么病毡? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮屁柏,結(jié)果婚禮上啦膜,老公的妹妹穿的比我還像新娘。我一直安慰自己淌喻,他們只是感情好僧家,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著裸删,像睡著了一般八拱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上涯塔,一...
    開(kāi)封第一講書(shū)人閱讀 52,874評(píng)論 1 314
  • 那天肌稻,我揣著相機(jī)與錄音,去河邊找鬼匕荸。 笑死爹谭,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的榛搔。 我是一名探鬼主播诺凡,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼践惑!你這毒婦竟也來(lái)了腹泌?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤童本,失蹤者是張志新(化名)和其女友劉穎真屯,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體穷娱,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡绑蔫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年运沦,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片配深。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡携添,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出篓叶,到底是詐尸還是另有隱情烈掠,我是刑警寧澤,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布缸托,位于F島的核電站左敌,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏俐镐。R本人自食惡果不足惜矫限,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望佩抹。 院中可真熱鬧叼风,春花似錦、人聲如沸棍苹。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)枢里。三九已至孽鸡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間坡垫,已是汗流浹背梭灿。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留冰悠,地道東北人堡妒。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像溉卓,于是被迫代替她去往敵國(guó)和親皮迟。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容