BaseImagePro.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  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
  12. style="width: 74px; margin-left: 6px"
  13. size="mini"
  14. v-model="width"
  15. @input="changeWidth"
  16. placeholder="请输入内容"
  17. ></el-input>
  18. </div>
  19. <div>
  20. <span>H</span>
  21. <el-input
  22. style="width: 74px; margin-left: 6px"
  23. size="mini"
  24. v-model="height"
  25. @input="changeHeight"
  26. placeholder="请输入内容"
  27. ></el-input>
  28. </div>
  29. <el-upload
  30. class="avatar-uploader"
  31. action="https://jsonplaceholder.typicode.com/posts/"
  32. :show-file-list="false"
  33. :before-upload="beforeAvatarUpload"
  34. >
  35. <i class="el-icon-link"></i>
  36. </el-upload>
  37. </div>
  38. </li>
  39. <li>
  40. <div class="small-title">边框</div>
  41. <div class="property">
  42. <div class="color-box">
  43. <div class="cololorSelect">
  44. <el-color-picker
  45. show-alpha
  46. @change="changeColor"
  47. class="fix-box-1"
  48. v-model="color"
  49. ></el-color-picker>
  50. </div>
  51. <span>颜色</span>
  52. </div>
  53. <div class="line-width">
  54. <el-input-number
  55. style="width: 80px"
  56. v-model="linewidth"
  57. controls-position="right"
  58. @change="changeLineWidth"
  59. size="mini"
  60. :min="1"
  61. :max="20"
  62. :maxlength="100"
  63. ></el-input-number>
  64. <span>线宽</span>
  65. </div>
  66. <div class="line-width">
  67. <a-select
  68. style="width: 80px"
  69. v-model="linestyle"
  70. :default-value="borderLineOption[0].id"
  71. @change="changeLineStyle"
  72. >
  73. <a-select-option
  74. v-for="item in borderLineOption"
  75. :key="item.id"
  76. :label="item.src"
  77. :value="item.id"
  78. >
  79. <img :src="item.src" alt width="60" />
  80. </a-select-option>
  81. </a-select>
  82. <span>线型</span>
  83. </div>
  84. </div>
  85. </li>
  86. <li>
  87. <div class="small-title">图片</div>
  88. <el-upload
  89. class="avatar-uploader"
  90. action="https://jsonplaceholder.typicode.com/posts/"
  91. :show-file-list="false"
  92. :before-upload="beforeAvatarUpload"
  93. >
  94. <el-button size="small" plain>点击上传</el-button>
  95. </el-upload>
  96. </li>
  97. <li v-show="isSvg">
  98. <div class="small-title">滤镜(只针对svg)</div>
  99. <div class="color-box">
  100. <div class="cololorSelect">
  101. <el-color-picker
  102. show-alpha
  103. @change="changeFilterColor"
  104. class="fix-box-1"
  105. v-model="filterColor"
  106. ></el-color-picker>
  107. </div>
  108. <span>颜色</span>
  109. </div>
  110. </li>
  111. <li v-show="isSvg">
  112. <div class="small-title">旋转角度</div>
  113. <div>
  114. <span>度</span>
  115. <el-input
  116. style="width: 74px; margin-left: 6px"
  117. size="mini"
  118. v-model="rotate"
  119. @input="changeRotate"
  120. placeholder="请输入内容"
  121. ></el-input>
  122. </div>
  123. </li>
  124. </ul>
  125. </div>
  126. </template>
  127. <script>
  128. import bus from "@/bus/bus";
  129. //////////////////////////////////////
  130. // 常量
  131. // 图服务路径
  132. const imgBaseUrl = window.__systemConf.imgServeUri;
  133. // 图上传路径
  134. const imgServeUpload = window.__systemConf.imgServeUpload;
  135. import { uploadGroup, getImageGroup } from "@/api/editer";
  136. export default {
  137. props: ["strokeColor", "lineStyle", "lineWidth", "Width", "Height", "isSvg", "Rotate"],
  138. data() {
  139. return {
  140. width: 0,
  141. height: 0,
  142. color: "#cccccc", //颜色
  143. linewidth: 1,
  144. borderLineOption: [
  145. {
  146. id: "Solid",
  147. src: require("@/assets/images/solidLine.png"),
  148. },
  149. {
  150. id: "Dashed",
  151. src: require("@/assets/images/dashedLine.png"),
  152. },
  153. {
  154. id: "Dotted",
  155. src: require("@/assets/images/dotLine.png"),
  156. },
  157. ],
  158. linestyle: "solid",
  159. url: "",
  160. filterColor: "",
  161. rotate: 0, // 对象旋转角度
  162. };
  163. },
  164. methods: {
  165. changeHeight(val) {
  166. bus.$emit("updateStyle", "height", val);
  167. },
  168. changeWidth(val) {
  169. bus.$emit("updateStyle", "width", val);
  170. },
  171. changeLineWidth(val) {
  172. bus.$emit("updateStyle", "lineWidth", val);
  173. },
  174. // 改变线样式
  175. changeLineStyle(val) {
  176. bus.$emit("updateStyle", "lineStyle", val);
  177. },
  178. // 改变颜色
  179. changeColor(val) {
  180. bus.$emit("updateStyle", "strokeColor", val);
  181. },
  182. // 改变旋转角度
  183. changeRotate(val) {
  184. if (val.length > 0 && !isNaN(Number(val))) {
  185. if (val > 360) {
  186. val = 360;
  187. }
  188. if (val < -360) {
  189. val = -360;
  190. }
  191. bus.$emit("updateStyle", "rotate", Number(val));
  192. }
  193. },
  194. beforeAvatarUpload(file) {
  195. let that = this;
  196. const fileReader = new FileReader();
  197. fileReader.readAsDataURL(file); //读取图片
  198. const ftype = file.type;
  199. const fname = file.name;
  200. const uploadKey = file.uid;
  201. const imgType = ftype.split(".")[ftype.length - 1];
  202. fileReader.addEventListener("load", function () {
  203. // 读取完成
  204. let res = fileReader.result;
  205. //将canvas的base64位图片转换成图片png的file
  206. var blob = that.dataURLtoBlob(res, ftype);
  207. //将其转换成file对象
  208. let file = new File([blob], fname, {
  209. type: ftype,
  210. lastModified: Date.now(),
  211. }); //blob转file
  212. // try sending
  213. let reader = new FileReader();
  214. let fileType = file.name.split(".");
  215. let imgType = fileType[fileType.length - 1];
  216. let CreateTime = that.formatDate(new Date(file.lastModified));
  217. reader.onloadend = function () {
  218. // 这个事件在读取结束后,无论成功或者失败都会触发
  219. if (reader.error) {
  220. } else {
  221. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  222. var xhr = new XMLHttpRequest();
  223. xhr.open(
  224. /* method */
  225. "POST",
  226. /* target url */
  227. imgServeUpload + uploadKey + "." + imgType
  228. );
  229. xhr.send(reader.result);
  230. xhr.onreadystatechange = function () {
  231. if (xhr.readyState == 4) {
  232. if (xhr.status == 200) {
  233. that.url = uploadKey + "." + imgType;
  234. bus.$emit("updateStyle", "url", uploadKey + "." + imgType);
  235. }
  236. }
  237. };
  238. }
  239. };
  240. reader.readAsArrayBuffer(file);
  241. });
  242. },
  243. dataURLtoBlob(dataURI, type) {
  244. var binary = atob(dataURI.split(",")[1]);
  245. var array = [];
  246. for (var i = 0; i < binary.length; i++) {
  247. array.push(binary.charCodeAt(i));
  248. }
  249. return new Blob([new Uint8Array(array)], { type: type });
  250. },
  251. formatDate(now) {
  252. let year = now.getFullYear();
  253. let month = now.getMonth() + 1;
  254. let date = now.getDate();
  255. let hour = now.getHours();
  256. let minute = now.getMinutes();
  257. let second = now.getSeconds();
  258. return (
  259. year +
  260. "-" +
  261. month +
  262. "-" +
  263. (date > 10 ? date : "0" + date) +
  264. " " +
  265. hour +
  266. ":" +
  267. (minute > 10 ? minute : "0" + minute) +
  268. ":" +
  269. (second > 10 ? second : "0" + second)
  270. );
  271. },
  272. // 改变图片滤镜颜色
  273. changeFilterColor(val) {
  274. bus.$emit("updateStyle", "filterColor", val);
  275. },
  276. },
  277. watch: {
  278. strokeColor(val) {
  279. this.color = val;
  280. },
  281. lineWidth(val) {
  282. this.linewidth = val;
  283. },
  284. lineStyle(val) {
  285. this.linestyle = val;
  286. },
  287. Width(val) {
  288. this.width = val;
  289. },
  290. Height(val) {
  291. this.height = val;
  292. },
  293. Url(val) {
  294. this.url = val;
  295. },
  296. Rotate(val) {
  297. this.rotate = val;
  298. }
  299. },
  300. };
  301. </script>
  302. <style lang="less" scoped>
  303. ul,
  304. li {
  305. margin: 0;
  306. padding: 0;
  307. list-style-type: none;
  308. }
  309. .base-image {
  310. .title {
  311. height: 47px;
  312. border-bottom: 1px solid #979797;
  313. color: #646c73;
  314. font-size: 16px;
  315. padding-left: 12px;
  316. box-sizing: border-box;
  317. }
  318. ul {
  319. width: calc(~"100% - 24px");
  320. margin: -1px 12px 0 12px;
  321. li {
  322. border-top: 1px solid #979797;
  323. margin-bottom: 16px;
  324. .small-title {
  325. font-size: 12px;
  326. color: #8d9399;
  327. margin: 12px 0;
  328. }
  329. .property {
  330. display: flex;
  331. align-items: center;
  332. justify-content: space-around;
  333. .color-box {
  334. display: flex;
  335. align-items: center;
  336. flex-direction: column;
  337. .cololorSelect {
  338. width: 32px;
  339. height: 20px;
  340. overflow: hidden;
  341. position: relative;
  342. margin: 4px 0;
  343. .fix-box-1 {
  344. margin-top: -8px;
  345. margin-left: -8px;
  346. /deep/ .el-color-picker__trigger {
  347. width: 200px;
  348. height: 200px;
  349. }
  350. }
  351. }
  352. }
  353. .line-width {
  354. display: flex;
  355. align-items: center;
  356. flex-direction: column;
  357. margin-left: 8px;
  358. position: relative;
  359. }
  360. span {
  361. font-size: 12px;
  362. color: #1f2429;
  363. margin-top: 4px;
  364. }
  365. }
  366. }
  367. }
  368. }
  369. </style>