BaseImagePro.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  1. <!-- 基本图片的属性框 -->
  2. <template>
  3. <div class="base-image">
  4. <div class="title">属性</div>
  5. <ul>
  6. <li>
  7. <div class="small-title">尺寸大小</div>
  8. <div class="property">
  9. <div>
  10. <span>W</span>
  11. <el-input style="width: 74px; margin-left: 6px" size="mini" type="number" v-model="width" placeholder="输入宽度"></el-input>
  12. </div>
  13. <div>
  14. <span>H</span>
  15. <el-input style="width: 74px; margin-left: 6px" size="mini" type="number" v-model="height" placeholder="输入高度"></el-input>
  16. </div>
  17. <div @click="lockItem" :title="isLock ? '锁定' : '解锁'">
  18. <i class="el-icon-link" :style="{ color: isLock ? '#409EFF' : '', cursor: 'pointer' }"></i>
  19. </div>
  20. <div class="rotate">
  21. <span>R</span>
  22. <el-input
  23. disabled
  24. style="width: 74px; margin-left: 6px"
  25. size="mini"
  26. type="number"
  27. v-model="rotate"
  28. placeholder="输入角度"
  29. >
  30. <template slot="suffix">°</template>
  31. </el-input>
  32. </div>
  33. </div>
  34. </li>
  35. <li class="m-picture">
  36. <p class="title">图片</p>
  37. <el-upload
  38. class="avatar-uploader"
  39. drag
  40. action="/#"
  41. :show-file-list="false"
  42. :before-upload="beforeAvatarUpload"
  43. accept="image/jpeg,image/jpg,image/png,"
  44. >
  45. <i class="el-icon-upload"></i>
  46. <div class="el-upload__text">
  47. 将文件拖动到这里替换
  48. <p><em>本地上传</em></p>
  49. </div>
  50. </el-upload>
  51. </li>
  52. <li>
  53. <div class="small-title">边框</div>
  54. <div class="property">
  55. <div class="color-box">
  56. <div class="cololorSelect">
  57. <el-color-picker show-alpha popper-class="imgae-color-picker" class="fix-box-1" v-model="color"></el-color-picker>
  58. </div>
  59. <span class="text">颜色</span>
  60. </div>
  61. <div class="line-width">
  62. <el-input style="width: 80px" v-model="lineWidth" type="number" size="mini" placeholder="输入线宽"></el-input>
  63. <span class="text">线宽</span>
  64. </div>
  65. <div class="line-width">
  66. <el-select
  67. v-model="lineStyle"
  68. popper-class="image-select"
  69. :default-value="borderLineOption[0].id"
  70. size="mini"
  71. style="width: 80px"
  72. placeholder="请选择"
  73. :ref="`selectLine`"
  74. >
  75. <el-option v-for="item in borderLineOption" :key="item.id" :label="item.src" :value="item.id">
  76. <img :src="item.src" alt width="60" />
  77. </el-option>
  78. </el-select>
  79. <span class="text">线型</span>
  80. </div>
  81. </div>
  82. </li>
  83. </ul>
  84. </div>
  85. </template>
  86. <script>
  87. import bus from "@/bus/bus";
  88. import { imgBaseUrl, imgServeUpload } from "@/api/imageservice";
  89. import { SColor } from "@persagy-web/draw";
  90. import { rgbaNum } from "@persagy-web/big-edit/lib/until";
  91. import { findIndex } from "lodash";
  92. import { dataURLtoBlob } from "@/utils/utils";
  93. export default {
  94. props: ["ImageItem"],
  95. data() {
  96. return {
  97. borderLineOption: [
  98. {
  99. id: "Solid",
  100. src: require("@/assets/images/solidLine.png"),
  101. },
  102. {
  103. id: "Dashed",
  104. src: require("@/assets/images/dashedLine.png"),
  105. },
  106. {
  107. id: "Dotted",
  108. src: require("@/assets/images/dotLine.png"),
  109. },
  110. ],
  111. isLock: true, //锁定图片宽高比
  112. aspectRatio: 1, // 图片宽高比
  113. };
  114. },
  115. computed: {
  116. /**
  117. * 图片宽度
  118. */
  119. width: {
  120. get: function () {
  121. return this.ImageItem.width;
  122. },
  123. set: function (newV) {
  124. if (!newV) newV = 0;
  125. newV = Number(newV);
  126. const oldV = this.ImageItem.width;
  127. if (this.isLock) {
  128. this.ImageItem.height = newV * this.aspectRatio;
  129. }
  130. this.ImageItem.width = newV;
  131. bus.$emit("undoAttr", this.ImageItem, "width", oldV, newV);
  132. },
  133. },
  134. /**
  135. * 图片高度
  136. */
  137. height: {
  138. get: function () {
  139. return this.ImageItem.height;
  140. },
  141. set: function (newV) {
  142. if (!newV) newV = 0;
  143. newV = Number(newV);
  144. const oldV = this.ImageItem.height;
  145. if (this.isLock) {
  146. this.ImageItem.width = newV / this.aspectRatio;
  147. }
  148. this.ImageItem.height = newV;
  149. bus.$emit("undoAttr", this.ImageItem, "height", oldV, newV);
  150. },
  151. },
  152. /**
  153. * 图片角度
  154. */
  155. rotate: {
  156. get() {
  157. return this.ImageItem.rotate
  158. },
  159. set(newV) {
  160. const oldV = this.ImageItem.rotate
  161. // 宽度改变,修改对象的宽度
  162. if (newV !== oldV) {
  163. this.ImageItem.rotate = newV;
  164. bus.$emit("undoAttr", this.ImageItem, "rotate", oldV, newV);
  165. }
  166. }
  167. },
  168. /**
  169. * 边框线宽
  170. */
  171. lineWidth: {
  172. get: function () {
  173. return this.ImageItem.lineWidth;
  174. },
  175. set: function (newV) {
  176. if (!newV) newV = 0;
  177. newV = Number(newV);
  178. const oldV = this.ImageItem.lineWidth;
  179. // 宽度最大20
  180. if (newV > 20) {
  181. newV = 20
  182. } else if (newV < 0) { //宽度最小0
  183. newV = 0
  184. }
  185. // 宽度改变,修改对象的宽度
  186. if (newV !== oldV) {
  187. this.ImageItem.lineWidth = newV;
  188. bus.$emit("undoAttr", this.ImageItem, "lineWidth", oldV, newV);
  189. }
  190. },
  191. },
  192. /**
  193. * 边框颜色
  194. */
  195. color: {
  196. get: function () {
  197. return this.ImageItem.strokeColor.toRgba();
  198. },
  199. set: function (val) {
  200. const colorList = rgbaNum(val);
  201. const oldVal = this.ImageItem.strokeColor;
  202. const newVal = new SColor(Number(colorList[0]), Number(colorList[1]), Number(colorList[2]), colorList[3] * 255);
  203. this.ImageItem.strokeColor = newVal;
  204. bus.$emit("undoAttr", this.ImageItem, "strokeColor", oldVal, newVal);
  205. },
  206. },
  207. /**
  208. * 边框线型
  209. */
  210. lineStyle: {
  211. get: function () {
  212. const id = this.borderLineOption[this.ImageItem.lineStyle].id;
  213. // 修改线型下啦菜单样式
  214. this.$nextTick(() => {
  215. this.setLineStyle(id);
  216. });
  217. return id;
  218. },
  219. set: function (newV) {
  220. newV = findIndex(this.borderLineOption, ["id", newV]);
  221. const oldV = this.ImageItem.lineStyle;
  222. this.ImageItem.lineStyle = newV;
  223. bus.$emit("undoAttr", this.ImageItem, "lineStyle", oldV, newV);
  224. },
  225. },
  226. },
  227. mounted() {
  228. console.log(this.ImageItem)
  229. },
  230. methods: {
  231. /**
  232. * 切换锁状态
  233. */
  234. lockItem() {
  235. this.isLock = !this.isLock;
  236. if (this.isLock) {
  237. this.aspectRatio = this.width / this.height;
  238. }
  239. },
  240. /**
  241. * 修改线型下啦菜单样式
  242. * @param {String} id 选中的线型id
  243. */
  244. setLineStyle(id) {
  245. const img = this.borderLineOption.filter((v) => v.id === id)[0]?.src;
  246. if (img) {
  247. this.$refs.selectLine?.$el?.children[0].children[0].setAttribute(
  248. "style",
  249. `
  250. background: url(${img}) no-repeat;
  251. color: rgba(0,0,0,0);
  252. text-indent: -9999px;
  253. background-position: 15px center;
  254. background-size: 40px 1px;
  255. `
  256. );
  257. } else {
  258. this.$refs.selectLine?.$el?.children[0].children[0].setAttribute(
  259. "style",
  260. `
  261. background: inherit;
  262. color:inherit;
  263. text-indent: 0;
  264. `
  265. );
  266. }
  267. },
  268. /**
  269. * 图片上传
  270. */
  271. beforeAvatarUpload(file) {
  272. const fileReader = new FileReader();
  273. fileReader.readAsDataURL(file); //读取图片
  274. const ftype = file.type;
  275. const fname = file.name;
  276. const uploadKey = file.uid;
  277. fileReader.addEventListener("load", () => {
  278. // 读取完成
  279. const res = fileReader.result;
  280. //将canvas的base64位图片转换成图片png的file
  281. const blob = dataURLtoBlob(res, ftype);
  282. //将其转换成file对象
  283. const file = new File([blob], fname, {
  284. type: ftype,
  285. lastModified: Date.now(),
  286. }); //blob转file
  287. // try sending
  288. const reader = new FileReader();
  289. const fileType = file.name.split(".");
  290. const imgType = fileType[fileType.length - 1];
  291. reader.onloadend = () => {
  292. // 这个事件在读取结束后,无论成功或者失败都会触发
  293. if (reader.error) {
  294. //
  295. } else {
  296. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  297. const xhr = new XMLHttpRequest();
  298. xhr.open("POST", `${imgServeUpload}${uploadKey}.${imgType}`);
  299. xhr.send(reader.result);
  300. xhr.onreadystatechange = () => {
  301. if (xhr.readyState == 4) {
  302. if (xhr.status == 200) {
  303. const olDefaultUrl = this.ImageItem.defaultUrl;
  304. const oldUrl = this.ImageItem.url;
  305. const newDefaultUrl = `${uploadKey}.${imgType}`;
  306. const newUrl = `${imgBaseUrl}${uploadKey}.${imgType}`;
  307. bus.$emit("undoAttr", this.ImageItem, "defaultUrl", olDefaultUrl, newDefaultUrl);
  308. bus.$emit("undoAttr", this.ImageItem, "url", oldUrl, newUrl);
  309. this.ImageItem.defaultUrl = newDefaultUrl;
  310. this.ImageItem.url = newUrl;
  311. }
  312. }
  313. };
  314. }
  315. };
  316. reader.readAsArrayBuffer(file);
  317. });
  318. },
  319. },
  320. };
  321. </script>
  322. <style lang="less">
  323. .image-select {
  324. .el-select-dropdown__item {
  325. text-align: center;
  326. }
  327. }
  328. .imgae-color-picker {
  329. /deep/.el-input__inner {
  330. padding-right: 0 !important;
  331. }
  332. }
  333. </style>
  334. <style lang="less" scoped>
  335. ul,
  336. li {
  337. margin: 0;
  338. padding: 0;
  339. list-style-type: none;
  340. }
  341. .base-image {
  342. & > .title {
  343. height: 40px;
  344. line-height: 40px;
  345. color: #000000;
  346. background: #f8f9fa;
  347. font-size: 14px;
  348. padding-left: 12px;
  349. box-sizing: border-box;
  350. font-weight: 600;
  351. }
  352. ul {
  353. width: 100%;
  354. li {
  355. padding: 0 12px;
  356. margin-bottom: 16px;
  357. .small-title {
  358. font-size: 12px;
  359. color: #8d9399;
  360. margin: 12px 0;
  361. font-weight: 600;
  362. }
  363. .property {
  364. display: flex;
  365. align-items: center;
  366. justify-content: space-around;
  367. flex-wrap: wrap;
  368. .color-box {
  369. display: flex;
  370. align-items: center;
  371. flex-direction: column;
  372. .cololorSelect {
  373. width: 32px;
  374. height: 20px;
  375. overflow: hidden;
  376. position: relative;
  377. margin: 4px 0;
  378. .fix-box-1 {
  379. margin-top: -8px;
  380. margin-left: -8px;
  381. /deep/ .el-color-picker__trigger {
  382. width: 200px;
  383. height: 200px;
  384. }
  385. }
  386. }
  387. }
  388. .line-width {
  389. display: flex;
  390. align-items: center;
  391. flex-direction: column;
  392. margin-left: 8px;
  393. position: relative;
  394. }
  395. .text {
  396. font-size: 12px;
  397. color: #1f2429;
  398. font-weight: 600;
  399. margin-top: 4px;
  400. }
  401. .rotate {
  402. flex-basis: 100%;
  403. margin-left: 7px;
  404. margin-top: 10px;
  405. }
  406. }
  407. }
  408. li.m-picture {
  409. border-top: 1px solid #e4e5e7;
  410. border-bottom: 1px solid #e4e5e7;
  411. padding: 12px 0 18px 0;
  412. .title {
  413. padding: 0 12px;
  414. margin-bottom: 12px;
  415. color: #8d9399;
  416. font-size: 14px;
  417. line-height: 16px;
  418. font-weight: 600;
  419. }
  420. .avatar-uploader {
  421. width: 100%;
  422. text-align: center;
  423. /deep/ .el-upload-dragger {
  424. width: 200px !important;
  425. }
  426. }
  427. }
  428. }
  429. /deep/ .el-input-number .el-input__inner {
  430. padding-right: 40px !important;
  431. }
  432. }
  433. </style>