|
|
@@ -1,19 +1,268 @@
|
|
|
<template>
|
|
|
<div class="CalligraphyMaster-cread">
|
|
|
<Header />
|
|
|
- <div class="drawing-container">
|
|
|
- <div id="tui-image-editor"></div>
|
|
|
- <el-button class="save" type="primary" size="small" @click="save"
|
|
|
- >保存</el-button
|
|
|
- >
|
|
|
+ <div class="bg_main">
|
|
|
+ <div class="main">
|
|
|
+ <div class="main-top">
|
|
|
+ <div class="left">
|
|
|
+ <span>画布设置：</span>
|
|
|
+ <div>
|
|
|
+ <span>长度</span>
|
|
|
+ <el-input
|
|
|
+ :readonly="true"
|
|
|
+ v-model="form.heightText"
|
|
|
+ style="width: 60px"
|
|
|
+ ></el-input>
|
|
|
+ <div class="add_remove">
|
|
|
+ <img
|
|
|
+ @click="addCanvasWH('H')"
|
|
|
+ src="../../assets/teacherdev/sfds-canvas-add.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="removeCanvasWH('H')"
|
|
|
+ src="../../assets/teacherdev/sfds-canvas-remove.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/teacherdev/sfds-canvas-line.png" alt="" />
|
|
|
+ <span>宽度</span>
|
|
|
+ <el-input
|
|
|
+ :readonly="true"
|
|
|
+ v-model="form.widthText"
|
|
|
+ style="width: 60px"
|
|
|
+ ></el-input>
|
|
|
+ <div class="add_remove">
|
|
|
+ <img
|
|
|
+ @click="addCanvasWH('W')"
|
|
|
+ src="../../assets/teacherdev/sfds-canvas-add.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="removeCanvasWH('W')"
|
|
|
+ src="../../assets/teacherdev/sfds-canvas-remove.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>背景颜色</span>
|
|
|
+ <el-color-picker v-model="form.bg_color"></el-color-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/teacherdev/word-save.png" alt="" />
|
|
|
+ 保存
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/teacherdev/sfds-fb.png" alt="" />
|
|
|
+ 发布
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/teacherdev/word-download.png" alt="" />
|
|
|
+ 下载
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="operation"
|
|
|
+ v-if="changeType == 'text' || changeType == 'luminance'"
|
|
|
+ >
|
|
|
+ <template v-if="changeType == 'text'">
|
|
|
+ <div class="text-operation">
|
|
|
+ <div class="font_sele">
|
|
|
+ <div
|
|
|
+ class="font_sele_input"
|
|
|
+ @click="FontFamilySele = !FontFamilySele"
|
|
|
+ >
|
|
|
+ <span>{{ fontForm.fontFamily }}</span>
|
|
|
+ <img
|
|
|
+ src="../../assets/teacherdev/font-sele-down.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-show="FontFamilySele" class="fontFamily_list">
|
|
|
+ <div class="Boutque_font">
|
|
|
+ <span class="one">精品字体</span>
|
|
|
+ <span
|
|
|
+ v-for="(item, index) in BoutiqueFontList"
|
|
|
+ :key="index + 'BoutiqueFon'"
|
|
|
+ >{{ item }}</span
|
|
|
+ >
|
|
|
+ <span class="more">更多...</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="fontFamily_one"
|
|
|
+ v-for="(item, index) in fontList"
|
|
|
+ :key="index + 'font'"
|
|
|
+ :value="item.fontFamily"
|
|
|
+ >
|
|
|
+ <div class="use" v-if="item.RecentUse">
|
|
|
+ <span>最近使用</span>
|
|
|
+ </div>
|
|
|
+ <div class="fontFamily">{{ item.fontFamily }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <span>{{ item.content }}</span>
|
|
|
+ <img
|
|
|
+ v-if="item.collect"
|
|
|
+ src="../../assets/teacherdev/font-collect-sele.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ src="../../assets/teacherdev/font-collect.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-select
|
|
|
+ v-model="fontForm.fontSize"
|
|
|
+ style="width: 60px; margin-left: 8px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, i) in fontSizeList"
|
|
|
+ :key="i + 'fontsize'"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.name"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-model="fontForm.percent"
|
|
|
+ style="width: 68px; height: 32px; margin-left: 8px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="i in 100"
|
|
|
+ :key="i + 'fontsize'"
|
|
|
+ :value="i"
|
|
|
+ :label="i + '%'"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="img_dv">
|
|
|
+ <img src="../../assets/teacherdev/font-add.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-remove.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-blod.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-red.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <el-color-picker
|
|
|
+ v-model="fontForm.fontColor"
|
|
|
+ style="margin-left: 8px; width: 60px"
|
|
|
+ ></el-color-picker>
|
|
|
+ <div class="img_dv" style="margin-left: 8px">
|
|
|
+ <img src="../../assets/teacherdev/font-left.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-center.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-right.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="img_dv" style="margin-left: 8px">
|
|
|
+ <img
|
|
|
+ src="../../assets/teacherdev/font-line-left-right.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../assets/teacherdev/font-line-top-bottom.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="img_dv" style="margin-left: 8px">
|
|
|
+ <img src="../../assets/teacherdev/font-italic.png" alt="" />
|
|
|
+ <img src="../../assets/teacherdev/font-blod2.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="changeType == 'luminance'">
|
|
|
+ <div class="luminance-operation">
|
|
|
+ <img
|
|
|
+ :style="{ filter: `brightness(${changeluminanceNumber()})` }"
|
|
|
+ src="../../assets/teacherdev/sun.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div class="line-text">
|
|
|
+ <div class="DragLine">
|
|
|
+ <DragLine :min="-100" :max="100" v-model="luminanceNumber" />
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <span>-100</span>
|
|
|
+ <span>0</span>
|
|
|
+ <span>+100</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="canvas"
|
|
|
+ :style="{
|
|
|
+ marginTop:
|
|
|
+ changeType == 'text' || changeType == 'luminance' ? 0 : '32px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ id="imgCanvas"
|
|
|
+ ref="imgCanvas"
|
|
|
+ :style="{
|
|
|
+ width: form.width + 'px',
|
|
|
+ height: form.height + 'px',
|
|
|
+ background: form.bg_color,
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div @click="changeSize">
|
|
|
+ <img src="../../assets/teacherdev/sfds-tailoring.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- <el-upload
|
|
|
+ :accept="'.png,.jpg'"
|
|
|
+ class="upload-demo"
|
|
|
+ :show-file-list="false"
|
|
|
+ :action="url"
|
|
|
+ :on-preview="handlePreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :multiple="true"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :file-list="fileList"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :limit="1"
|
|
|
+ :before-upload="handlebeforeUplaod"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/teacherdev/sfds-image.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </el-upload> -->
|
|
|
+
|
|
|
+ <div @click="addText">
|
|
|
+ <img src="../../assets/teacherdev/sfds-text.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div @click="deleteImage">
|
|
|
+ <img src="../../assets/teacherdev/sfds-delete.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div @click="changeluminance">
|
|
|
+ <img src="../../assets/teacherdev/sfds-sun.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
import Header from "@/components/Header";
|
|
|
+import DragLine from "@/components/DragLine";
|
|
|
+import { getToken, removeToken } from "@/utils/auth";
|
|
|
+import { WebFileDownload } from "@/api/api";
|
|
|
+
|
|
|
import "tui-image-editor/dist/tui-image-editor.css";
|
|
|
import "tui-color-picker/dist/tui-color-picker.css";
|
|
|
import ImageEditor from "tui-image-editor";
|
|
|
+
|
|
|
const locale_zh = {
|
|
|
ZoomIn: "放大",
|
|
|
ZoomOut: "缩小",
|
|
|
@@ -94,7 +343,7 @@ const customTheme = {
|
|
|
"common.bisize.width": "0px",
|
|
|
"common.bisize.height": "0px",
|
|
|
"common.backgroundImage": "none",
|
|
|
- "common.backgroundColor": "#fff",
|
|
|
+ "common.backgroundColor": "#f3f4f6",
|
|
|
"common.border": "1px solid #333",
|
|
|
|
|
|
// header
|
|
|
@@ -166,53 +415,228 @@ const customTheme = {
|
|
|
"colorpicker.button.border": "1px solid #1e1e1e",
|
|
|
"colorpicker.title.color": "#fff",
|
|
|
};
|
|
|
+
|
|
|
export default {
|
|
|
- components: { Header },
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {
|
|
|
+ Header,
|
|
|
+ DragLine,
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
data() {
|
|
|
+ //这里存放数据
|
|
|
return {
|
|
|
- instance: null,
|
|
|
+ form: {
|
|
|
+ width: 500,
|
|
|
+ widthText: "500mm",
|
|
|
+ height: 500,
|
|
|
+ heightText: "500mm",
|
|
|
+ bg_color: "#FF3F3F",
|
|
|
+ },
|
|
|
+ BoutiqueFontList: [
|
|
|
+ "水墨字体",
|
|
|
+ "古风字体",
|
|
|
+ "中国风字体",
|
|
|
+ "书协专家字体",
|
|
|
+ "电影海报字体",
|
|
|
+ "国潮字体",
|
|
|
+ ],
|
|
|
+ fontSizeList: [
|
|
|
+ {
|
|
|
+ name: "5号",
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ fontList: [
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: true,
|
|
|
+ RecentUse: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: false,
|
|
|
+ RecentUse: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: true,
|
|
|
+ RecentUse: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: false,
|
|
|
+ RecentUse: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: true,
|
|
|
+ RecentUse: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: false,
|
|
|
+ RecentUse: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: true,
|
|
|
+ RecentUse: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: false,
|
|
|
+ RecentUse: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: true,
|
|
|
+ RecentUse: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ content: "忽如一夜春风来",
|
|
|
+ collect: false,
|
|
|
+ RecentUse: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ luminanceNumber: 0,
|
|
|
+ changeType: "",
|
|
|
+ fontForm: {
|
|
|
+ fontFamily: "方正颜真卿楷书",
|
|
|
+ fontSize: 5,
|
|
|
+ percent: 100,
|
|
|
+ fontColor: "#FFFFFF",
|
|
|
+ },
|
|
|
+ FontFamilySele: false,
|
|
|
+ loading: false,
|
|
|
+ fileList: [],
|
|
|
+ imgCtx: null,
|
|
|
TUI_selectedItem: null,
|
|
|
TUI_selectedFont: "",
|
|
|
+ instance: null,
|
|
|
};
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.init();
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {
|
|
|
+ url() {
|
|
|
+ let userInfor = JSON.parse(getToken());
|
|
|
+ let UserCode = "",
|
|
|
+ UserType = "",
|
|
|
+ SessionID = "";
|
|
|
+ if (userInfor) {
|
|
|
+ UserCode = userInfor.user_code;
|
|
|
+ UserType = userInfor.user_type;
|
|
|
+ SessionID = userInfor.session_id;
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ process.env.VUE_APP_BASE_API +
|
|
|
+ `/GCLSFileServer/WebFileUpload?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}&SecurityLevel=Mid"`
|
|
|
+ );
|
|
|
+ },
|
|
|
},
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
methods: {
|
|
|
- init() {
|
|
|
- this.instance = new ImageEditor(
|
|
|
- document.querySelector("#tui-image-editor"),
|
|
|
- {
|
|
|
- includeUI: {
|
|
|
- loadImage: {
|
|
|
- path: "https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
|
|
|
- name: "image",
|
|
|
- },
|
|
|
- menu: [
|
|
|
- "mask",
|
|
|
- "resize",
|
|
|
- "crop",
|
|
|
- "rotate",
|
|
|
- "draw",
|
|
|
- "shape",
|
|
|
- "icon",
|
|
|
- "text",
|
|
|
- "filter",
|
|
|
- ], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
|
|
|
- initMenu: "draw", // 默认打开的菜单项
|
|
|
- menuBarPosition: "bottom", // 菜单所在的位置
|
|
|
- locale: locale_zh, // 本地化语言为中文
|
|
|
- theme: customTheme, // 自定义样式
|
|
|
- },
|
|
|
- cssMaxWidth: 500, // canvas 最大宽度
|
|
|
- cssMaxHeight: 500, // canvas 最大高度
|
|
|
+ // 增加画布宽或高
|
|
|
+ addCanvasWH(type) {
|
|
|
+ if (type == "W") {
|
|
|
+ if (this.form.width == 500) {
|
|
|
+ this.$message.warning("已达到上限");
|
|
|
+ return;
|
|
|
}
|
|
|
- );
|
|
|
- document.getElementsByClassName("tui-image-editor-main")[0].style.top =
|
|
|
- "45px"; // 调整图片显示位置
|
|
|
- document.getElementsByClassName(
|
|
|
- "tie-btn-reset tui-image-editor-item help"
|
|
|
- )[0].style.display = "none"; // 隐藏顶部重置按钮
|
|
|
+ this.form.width++;
|
|
|
+ this.form.widthText = this.form.width + "mm";
|
|
|
+ } else {
|
|
|
+ if (this.form.height == 500) {
|
|
|
+ this.$message.warning("已达到上限");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.form.height++;
|
|
|
+ this.form.heightText = this.form.height + "mm";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 减少画布宽或高
|
|
|
+ removeCanvasWH(type) {
|
|
|
+ if (type == "W") {
|
|
|
+ if (this.form.width == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.form.width--;
|
|
|
+ this.form.widthText = this.form.width + "mm";
|
|
|
+ } else {
|
|
|
+ if (this.form.height == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.form.height--;
|
|
|
+ this.form.heightText = this.form.height + "mm";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加文字
|
|
|
+ addText() {
|
|
|
+ this.changeType = "text";
|
|
|
+ },
|
|
|
+ // 修改亮度
|
|
|
+ changeluminance() {
|
|
|
+ this.changeType = "luminance";
|
|
|
+ },
|
|
|
+ // 计算css所需亮度
|
|
|
+ changeluminanceNumber() {
|
|
|
+ if (this.luminanceNumber == 0) {
|
|
|
+ return 1;
|
|
|
+ }
|
|
|
+ if (this.luminanceNumber > 0) {
|
|
|
+ return 1 + (this.luminanceNumber / 100) * 2;
|
|
|
+ } else {
|
|
|
+ return Math.abs(Math.abs(this.luminanceNumber) - 100) / 100;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 裁剪
|
|
|
+ changeSize() {
|
|
|
+ this.instance.ui._actions.crop.cancel();
|
|
|
+ },
|
|
|
+ initCanvasImage() {
|
|
|
+ this.loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "Loading",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)",
|
|
|
+ });
|
|
|
+ // const objectUrl = window.URL.createObjectURL("");
|
|
|
+ this.instance = new ImageEditor(document.querySelector("#imgCanvas"), {
|
|
|
+ includeUI: {
|
|
|
+ loadImage: {
|
|
|
+ path: "https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675",
|
|
|
+ name: "image",
|
|
|
+ },
|
|
|
+ menu: [
|
|
|
+ "resize",
|
|
|
+ "crop",
|
|
|
+ "rotate",
|
|
|
+ "draw",
|
|
|
+ "shape",
|
|
|
+ "icon",
|
|
|
+ "text",
|
|
|
+ "filter",
|
|
|
+ ], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
|
|
|
+ initMenu: "crop", // 默认打开的菜单项
|
|
|
+ menuBarPosition: "bottom", // 菜单所在的位置
|
|
|
+ locale: locale_zh, // 本地化语言为中文
|
|
|
+ theme: customTheme, // 自定义样式
|
|
|
+ },
|
|
|
+ cssMaxWidth: this.form.width, // canvas 最大宽度
|
|
|
+ cssMaxHeight: this.form.heigt, // canvas 最大高度
|
|
|
+ });
|
|
|
let fontArray = [
|
|
|
"Arial",
|
|
|
"Arial Black",
|
|
|
@@ -275,6 +699,7 @@ export default {
|
|
|
this.TUI_updateFontSelected(props);
|
|
|
console.log("TUI_selectedItem", props);
|
|
|
});
|
|
|
+ this.loading.close();
|
|
|
},
|
|
|
TUI_updateFontOnText(font) {
|
|
|
console.log("TUI_updateFontOnText", font, this.TUI_selectedItem.id);
|
|
|
@@ -297,31 +722,394 @@ export default {
|
|
|
this.TUI_selectedFont = layer.fontFamily;
|
|
|
}
|
|
|
},
|
|
|
- // 保存图片，并上传
|
|
|
- save() {
|
|
|
- const base64String = this.instance.toDataURL(); // base64 文件
|
|
|
- const data = window.atob(base64String.split(",")[1]);
|
|
|
- const ia = new Uint8Array(data.length);
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- ia[i] = data.charCodeAt(i);
|
|
|
+ // 删除上传的图片
|
|
|
+ deleteImage() {
|
|
|
+ this.fileList = [];
|
|
|
+ },
|
|
|
+ handlebeforeUplaod(file) {
|
|
|
+ if (file.size > 20 * 1024 * 1024) {
|
|
|
+ this.$message.warning("上传文件大小不能超过20M");
|
|
|
+ return false; //必须返回false
|
|
|
+ }
|
|
|
+ this.loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "Loading",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSuccess(response, file, fileList) {
|
|
|
+ if (response.status == 1) {
|
|
|
+ this.fileList = response.file_info_list;
|
|
|
+ this.loading.close();
|
|
|
+ this.initCanvasImage();
|
|
|
+ } else if (response.status == -1) {
|
|
|
+ this.loading.close();
|
|
|
+ removeToken();
|
|
|
+ this.$message.warning(response.error);
|
|
|
+ this.$router.push("/login");
|
|
|
+ } else {
|
|
|
+ this.loading.close();
|
|
|
}
|
|
|
- const blob = new Blob([ia], { type: "image/png" }); // blob 文件
|
|
|
- const form = new FormData();
|
|
|
- form.append("image", blob);
|
|
|
- // upload file
|
|
|
},
|
|
|
+ handleRemove(file, fileList) {},
|
|
|
+ handlePreview(file) {},
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.warning(
|
|
|
+ `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
|
|
+ files.length + fileList.length
|
|
|
+ } 个文件`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ beforeRemove(file, filleList) {},
|
|
|
},
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ this.initCanvasImage();
|
|
|
+ },
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() {},
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() {},
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() {},
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() {},
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() {},
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() {},
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() {},
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.drawing-container {
|
|
|
- height: 795px;
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* @import url(); 引入css类 */
|
|
|
+.CalligraphyMaster-cread {
|
|
|
+ height: 100%;
|
|
|
position: relative;
|
|
|
+ .bg_main {
|
|
|
+ background: #f7f7f7;
|
|
|
+ min-height: 100%;
|
|
|
+ padding-top: 24px;
|
|
|
+ padding-bottom: 70px;
|
|
|
+ .main {
|
|
|
+ width: 1168px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ .main-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 8px;
|
|
|
+ > img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .add_remove {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ width: 10px;
|
|
|
+ margin-left: 8px;
|
|
|
+ img {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ > :nth-child(1) {
|
|
|
+ margin-bottom: 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ div {
|
|
|
+ margin-left: 16px;
|
|
|
+ width: 96px;
|
|
|
+ height: 40px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .operation {
|
|
|
+ margin-top: 33px;
|
|
|
+ }
|
|
|
+ .text-operation {
|
|
|
+ height: 48px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ border-bottom: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 16px;
|
|
|
+ .font_sele {
|
|
|
+ position: relative;
|
|
|
+ .font_sele_input {
|
|
|
+ width: 193px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0 6px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ cursor: pointer;
|
|
|
+ > span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ > img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .fontFamily_list {
|
|
|
+ position: absolute;
|
|
|
+ top: 39px;
|
|
|
+ left: 0;
|
|
|
+ width: 468px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-width: 0px 1px 1px 1px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: #dbdbdb;
|
|
|
+ height: 520px;
|
|
|
+ overflow: auto;
|
|
|
+ .fontFamily_one {
|
|
|
+ padding: 12px 24px 16px 32px;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ position: relative;
|
|
|
+ .use {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ background: url("../../assets/teacherdev/font-use.png");
|
|
|
+ background-size: cover;
|
|
|
+ position: absolute;
|
|
|
+ left: -20px;
|
|
|
+ top: -20px;
|
|
|
+ -webkit-transform: scale(0.5);
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ position: absolute;
|
|
|
+ transform: translateX(-3px) translateY(20px) rotate(-45deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fontFamily {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ margin-top: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .Boutque_font {
|
|
|
+ padding: 16px 12px 0 12px;
|
|
|
+ background: #f0f0f0;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ cursor: default;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 12px 12px 12px;
|
|
|
+ }
|
|
|
+ .one {
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .more {
|
|
|
+ color: rgba(0, 0, 0, 0.35);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img_dv {
|
|
|
+ img {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .luminance-operation {
|
|
|
+ width: 440px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ > img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ .line-text {
|
|
|
+ margin-left: 17px;
|
|
|
+ .DragLine {
|
|
|
+ margin-top: 7px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ margin-top: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #919c9e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .canvas {
|
|
|
+ height: 500px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ margin-top: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ div {
|
|
|
+ width: 48px;
|
|
|
+ height: 40px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 16px;
|
|
|
+ img {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-.save {
|
|
|
- position: absolute;
|
|
|
- right: 50px;
|
|
|
- top: 15px;
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.CalligraphyMaster-cread {
|
|
|
+ // 图片编辑器操作栏
|
|
|
+ .tui-image-editor-controls {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .tui-image-editor-container .tui-image-editor-main-container {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .main-top {
|
|
|
+ .left {
|
|
|
+ .el-input__inner {
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+ .el-color-picker__color {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-icon-close:before {
|
|
|
+ content: "";
|
|
|
+ }
|
|
|
+ .el-icon-arrow-down:before {
|
|
|
+ content: "";
|
|
|
+ }
|
|
|
+ .el-color-picker__color-inner {
|
|
|
+ position: absolute;
|
|
|
+ left: 3px;
|
|
|
+ top: 3px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-operation {
|
|
|
+ .el-color-picker__trigger {
|
|
|
+ width: 60px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ .el-color-picker__empty,
|
|
|
+ .el-color-picker__icon {
|
|
|
+ left: 72%;
|
|
|
+ }
|
|
|
+ .el-color-picker__color {
|
|
|
+ width: 28px;
|
|
|
+ }
|
|
|
+ .el-icon-close:before,
|
|
|
+ .el-icon-arrow-down:before {
|
|
|
+ color: gray;
|
|
|
+ }
|
|
|
+ .el-color-picker__color-inner {
|
|
|
+ position: absolute;
|
|
|
+ left: -1px;
|
|
|
+ top: -1px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ padding: 0 8px;
|
|
|
+ }
|
|
|
+ .el-input__inner,
|
|
|
+ .el-input__suffix {
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
gcj