zhuishuyun
/
zhuishuyun_quickapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>distribution</title>
  <style>
    .novel-to__picBox {
      width: 1000px;
      margin: 0 auto;
      background: #fff;
      padding: 26px;
    }

    .canvas-content {
      user-select: none;
      background: #fff;
    }

    .pic-title {
      font-size: 18px;
    }

    .item-group {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 20px 0;
    }

    .item-label {
      width: 120px;
      font-size: 16px;
    }

    .content-input {
      width: 400px;
    }

    .button {
      background-color: #39a4ff;
      color: #fff;
      padding: 5px 10px;
      font-weight: 900
    }
  </style>
</head>

<body>
<div id="app">
  <div class="novel-to__picBox">
    <div class="pic-title">文字转图片</div>
    <div class="cavans-box">
      <div class="item-group">
        <div class="item-label">文字内容</div>
        <div class="item-content">
          <div id="summernote"></div>
        </div>
      </div>
      <div class="item-group">
        <div class="item-label"></div>
        <div class="item-content">
          <div class="button" @click="build">生成</div>
        </div>
      </div>
    </div>
    <div class="preview-box">
      <div class="pic-title">预览:</div>
      <p class="canvas-content" v-html="content"></p>
    </div>
    <a id="download" href="#" style="display:none"></a>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                fontSize: 16,
                content: "",
                bold: "normal",
                isPreview: false
            };
        },
        created() {
            $(document).ready(function () {
                $("#summernote").summernote({
                    height: 300,
                    minHeight: null,
                    maxHeight: null,
                    focus: true
                });
                $("#summernote").summernote("code", "");
            });
        },
        mounted() {
            let that = this;
            $("#summernote").summernote({
                height: 300,
                callbacks: {
                    onChange: function (contents) {
                        that.content = contents;
                        console.log(that.content);
                    }
                }
            });
        },
        methods: {
            build() {
                html2canvas(document.querySelector(".canvas-content")).then(canvas => {
                    let img = canvas.toDataURL("image/jpeg");
                let downLoad = document.querySelector("#download");
                downLoad.setAttribute("download", "章节内容");
                downLoad.setAttribute("href", img);
                downLoad.click();
            });
            }
        }
    })
</script>

</html>