123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371 |
- <!-- 基本图片的属性框 -->
- <template>
- <div class="base-image">
- <div class="title">属性</div>
- <ul>
- <li>
- <div class="small-title">尺寸大小</div>
- <div class="property">
- <div>
- <span>W</span>
- <el-input
- style="width: 74px; margin-left: 6px"
- size="mini"
- v-model="width"
- @input="changeWidth"
- placeholder="请输入内容"
- ></el-input>
- </div>
- <div>
- <span>H</span>
- <el-input
- style="width: 74px; margin-left: 6px"
- size="mini"
- v-model="height"
- @input="changeHeight"
- placeholder="请输入内容"
- ></el-input>
- </div>
- <el-upload
- class="avatar-uploader"
- action="https://jsonplaceholder.typicode.com/posts/"
- :show-file-list="false"
- :before-upload="beforeAvatarUpload"
- >
- <i class="el-icon-link"></i>
- </el-upload>
- </div>
- </li>
- <li>
- <div class="small-title">边框</div>
- <div class="property">
- <div class="color-box">
- <div class="cololorSelect">
- <el-color-picker
- show-alpha
- @change="changeColor"
- class="fix-box-1"
- v-model="color"
- ></el-color-picker>
- </div>
- <span>颜色</span>
- </div>
- <div class="line-width">
- <el-input-number
- style="width: 80px"
- v-model="linewidth"
- controls-position="right"
- @change="changeLineWidth"
- size="mini"
- :min="1"
- :max="20"
- :maxlength="100"
- ></el-input-number>
- <span>线宽</span>
- </div>
- <div class="line-width">
- <a-select
- style="width: 80px"
- v-model="linestyle"
- :default-value="borderLineOption[0].id"
- @change="changeLineStyle"
- >
- <a-select-option
- v-for="item in borderLineOption"
- :key="item.id"
- :label="item.src"
- :value="item.id"
- >
- <img :src="item.src" alt width="60" />
- </a-select-option>
- </a-select>
- <span>线型</span>
- </div>
- </div>
- </li>
- <li>
- <div class="small-title">图片</div>
- <el-upload
- class="avatar-uploader"
- action="https://jsonplaceholder.typicode.com/posts/"
- :show-file-list="false"
- :before-upload="beforeAvatarUpload"
- >
- <el-button size="small" plain>点击上传</el-button>
- </el-upload>
- </li>
- <li v-show="isSvg">
- <div class="small-title">滤镜(只针对svg)</div>
- <div class="color-box">
- <div class="cololorSelect">
- <el-color-picker
- show-alpha
- @change="changeFilterColor"
- class="fix-box-1"
- v-model="filterColor"
- ></el-color-picker>
- </div>
- <span>颜色</span>
- </div>
- </li>
- <li v-show="isSvg">
- <div class="small-title">旋转角度</div>
- <div>
- <span>度</span>
- <el-input
- style="width: 74px; margin-left: 6px"
- size="mini"
- v-model="rotate"
- @input="changeRotate"
- placeholder="请输入内容"
- ></el-input>
- </div>
- </li>
- </ul>
- </div>
- </template>
- <script>
- import bus from "@/bus/bus";
- //////////////////////////////////////
- // 常量
- // 图服务路径
- const imgBaseUrl = window.__systemConf.imgServeUri;
- // 图上传路径
- const imgServeUpload = window.__systemConf.imgServeUpload;
- import { uploadGroup, getImageGroup } from "@/api/editer";
- export default {
- props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height", "isSvg", "Rotate"],
- data() {
- return {
- width: 0,
- height: 0,
- color: "#cccccc", //颜色
- linewidth: 1,
- borderLineOption: [
- {
- id: "Solid",
- src: require("@/assets/images/solidLine.png"),
- },
- {
- id: "Dashed",
- src: require("@/assets/images/dashedLine.png"),
- },
- {
- id: "Dotted",
- src: require("@/assets/images/dotLine.png"),
- },
- ],
- linestyle: "solid",
- url: "",
- filterColor: "",
- rotate: 0, // 对象旋转角度
- };
- },
- methods: {
- changeHeight(val) {
- bus.$emit("updateStyle", "height", val);
- },
- changeWidth(val) {
- bus.$emit("updateStyle", "width", val);
- },
- changeLineWidth(val) {
- bus.$emit("updateStyle", "lineWidth", val);
- },
- // 改变线样式
- changeLineStyle(val) {
- bus.$emit("updateStyle", "lineStyle", val);
- },
- // 改变颜色
- changeColor(val) {
- bus.$emit("updateStyle", "strokeColor", val);
- },
- // 改变旋转角度
- changeRotate(val) {
- if (val.length > 0 && !isNaN(Number(val))) {
- if (val > 360) {
- val = 360;
- }
- if (val < -360) {
- val = -360;
- }
- bus.$emit("updateStyle", "rotate", Number(val));
- }
- },
- beforeAvatarUpload(file) {
- let that = this;
- const fileReader = new FileReader();
- fileReader.readAsDataURL(file); //读取图片
- const ftype = file.type;
- const fname = file.name;
- const uploadKey = file.uid;
- const imgType = ftype.split(".")[ftype.length - 1];
- fileReader.addEventListener("load", function () {
- // 读取完成
- let res = fileReader.result;
- //将canvas的base64位图片转换成图片png的file
- var blob = that.dataURLtoBlob(res, ftype);
- //将其转换成file对象
- let file = new File([blob], fname, {
- type: ftype,
- lastModified: Date.now(),
- }); //blob转file
- // try sending
- let reader = new FileReader();
- let fileType = file.name.split(".");
- let imgType = fileType[fileType.length - 1];
- let CreateTime = that.formatDate(new Date(file.lastModified));
- reader.onloadend = function () {
- // 这个事件在读取结束后,无论成功或者失败都会触发
- if (reader.error) {
- } else {
- // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
- var xhr = new XMLHttpRequest();
- xhr.open(
- /* method */
- "POST",
- /* target url */
- imgServeUpload + uploadKey + "." + imgType
- );
- xhr.send(reader.result);
- xhr.onreadystatechange = function () {
- if (xhr.readyState == 4) {
- if (xhr.status == 200) {
- that.url = uploadKey + "." + imgType;
- bus.$emit("updateStyle", "url", uploadKey + "." + imgType);
- }
- }
- };
- }
- };
- reader.readAsArrayBuffer(file);
- });
- },
- dataURLtoBlob(dataURI, type) {
- var binary = atob(dataURI.split(",")[1]);
- var array = [];
- for (var i = 0; i < binary.length; i++) {
- array.push(binary.charCodeAt(i));
- }
- return new Blob([new Uint8Array(array)], { type: type });
- },
- formatDate(now) {
- let year = now.getFullYear();
- let month = now.getMonth() + 1;
- let date = now.getDate();
- let hour = now.getHours();
- let minute = now.getMinutes();
- let second = now.getSeconds();
- return (
- year +
- "-" +
- month +
- "-" +
- (date > 10 ? date : "0" + date) +
- " " +
- hour +
- ":" +
- (minute > 10 ? minute : "0" + minute) +
- ":" +
- (second > 10 ? second : "0" + second)
- );
- },
- // 改变图片滤镜颜色
- changeFilterColor(val) {
- bus.$emit("updateStyle", "filterColor", val);
- },
- },
- watch: {
- strokeColor(val) {
- this.color = val;
- },
- lineWidth(val) {
- this.linewidth = val;
- },
- lineStyle(val) {
- this.linestyle = val;
- },
- Width(val) {
- this.width = val;
- },
- Height(val) {
- this.height = val;
- },
- Url(val) {
- this.url = val;
- },
- Rotate(val) {
- this.rotate = val;
- }
- },
- };
- </script>
- <style lang="less" scoped>
- ul,
- li {
- margin: 0;
- padding: 0;
- list-style-type: none;
- }
- .base-image {
- .title {
- height: 47px;
- border-bottom: 1px solid #979797;
- color: #646c73;
- font-size: 16px;
- padding-left: 12px;
- box-sizing: border-box;
- }
- ul {
- width: calc(~"100% - 24px");
- margin: -1px 12px 0 12px;
- li {
- border-top: 1px solid #979797;
- margin-bottom: 16px;
- .small-title {
- font-size: 12px;
- color: #8d9399;
- margin: 12px 0;
- }
- .property {
- display: flex;
- align-items: center;
- justify-content: space-around;
- .color-box {
- display: flex;
- align-items: center;
- flex-direction: column;
- .cololorSelect {
- width: 32px;
- height: 20px;
- overflow: hidden;
- position: relative;
- margin: 4px 0;
- .fix-box-1 {
- margin-top: -8px;
- margin-left: -8px;
- /deep/ .el-color-picker__trigger {
- width: 200px;
- height: 200px;
- }
- }
- }
- }
- .line-width {
- display: flex;
- align-items: center;
- flex-direction: column;
- margin-left: 8px;
- position: relative;
- }
- span {
- font-size: 12px;
- color: #1f2429;
- margin-top: 4px;
- }
- }
- }
- }
- }
- </style>
|