JSFiddle - React, Tailwind, and code Playground

by codert

HTML

<link rel="stylesheet" href="https://unpkg.com/@gaoding/[email protected]/dist/matting-editor.min.css">
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/[email protected]/lodash.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
    <script>window["lodash"] = window._;</script>
    <script src="https://unpkg.com/@gaoding/[email protected]/dist/matting-editor.min.js"></script>
    <style>
  .external-tools {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    z-index: 1;
  }
  .external-tools > .btn {
    border: 1px solid #ddd;
    color: #666;
    font-size: 14px;
    padding: 1.4em
  }
  </style>
  <div id="app">
    <div class="external-tools">
      <label for="uploadFile">根据文件上传图片</label>
      <input id="uploadFile" type="file" class="btn" @change="uploadByFile($event)"></input>
      <button class="btn" @click="uploadByURL">根据URL上传图片</button>
    </div>
    <matting-editor
      ref="mattingEditor"
      :options="innerOptions"
    >
    <div slot="logo">logo 注入</div>
    </matting-editor>
    <matting-tools
      :matting="mattingEditor"
    >
    </matting-tools>
    <form action="https://sm.ms/api/upload" method="post"></form>
  </div>
  <script>
    fetch('/api/sessions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        guest_finger: "056387c30f6afef5378f3f2cc3d2a99d",
        last_screen_height: 1080,
        last_screen_width: 1920
      }),
      mode: 'same-origin',
      credentials: 'include'
    })
  </script>
  <script>
    var UP = function(file) {
      var formData = new FormData();
      formData.append('smfile', file);
      formData.append('file_id', 0);

      return fetch('http://sm.ms/api/upload?inajax=1&ssl=0', {
        method: 'POST',
        body: formData
      })
      .then(function(res){
        return res.json()
      })
     ...