icon_make.php 107 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150
  1. <?php
  2. // by 请勿倒卖,已申请软著,否则追究法律责任
  3. namespace app\index;
  4. class icon_make extends Base
  5. {
  6. function index()
  7. {
  8. ?> <!doctype html>
  9. <html lang="">
  10. <head>
  11. <meta charset="utf-8">
  12. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>
  13. <meta name="keywords" content="<?php echo IN_KEYWORDS;?>"/>
  14. <meta name="description" content="<?php echo IN_DESCRIPTION;?>"/>
  15. <title>APP图标在线制作 - 工具箱 - <?php echo IN_NAME;?> - 免费应用内测托管平台|iOS应用Beta测试分发|Android应用内测分发</title>
  16. <link rel="stylesheet" href="/static/index/css/font.css"/>
  17. <link rel="stylesheet" type="text/css" href="/static/index/css/spectrum.css"/>
  18. <link rel="stylesheet" type="text/css" href="/static/index/css/bootstrap.min.css"/>
  19. <link rel="stylesheet" type="text/css" href="/static/index/css/base.css"/>
  20. <link rel="stylesheet" type="text/css" href="/static/index/css/main.css"/>
  21. <link rel="stylesheet" type="text/css" href="/static/index/css/h5.css"/>
  22. <script src="/static/index/js/jquery.min.js"></script>
  23. <script src="/static/index/js/bootstrap.min.js"></script>
  24. <script src="/static/index/js/vue.js"></script>
  25. <script src="/static/index/js/js.js"></script>
  26. <script src="/static/index/js/spectrum.js"></script>
  27. <script src="/static/index/js/jquery.lazyload.js"></script>
  28. <script>
  29. isHideFooter = false;
  30. </script>
  31. </head>
  32. <body>
  33. <?php
  34. $this->header();
  35. ?> <span class="icon-menu iconfont phone-menu visible-xs"></span>
  36. <div class="phone-shadow"></div>
  37. <script src="/static/index/js/html2canvas.js"></script>
  38. <script src="/static/index/js/canvas2image.js"></script>
  39. <div class="toolkit-common-wrap">
  40. <div class="container">
  41. <div class="crumbs"><a href="/index/utils">工具箱</a><span>/</span>图标制作</div>
  42. <div class="toolkit-make-icon">
  43. <div class="make-icon">
  44. <div class="clearfix row">
  45. <div class="col-sm-3">
  46. <div class="m-left">
  47. <div class="m-tit">预览效果</div>
  48. <div id="iconPreview" class="m-icon"
  49. style="background-image: url(/static/index/image/make/m-0.png);">
  50. <div class="m-icon-con">
  51. <div class="i-name1"></div>
  52. <img src="/static/index/image/make/0.png">
  53. <div class="i-name2"></div>
  54. </div>
  55. <div class="m-name"></div>
  56. </div>
  57. </div>
  58. </div>
  59. <div class="col-sm-9">
  60. <div class="m-right">
  61. <div class="m-tit">图标背景色</div>
  62. <div class="icon-bg">
  63. <dl class="clearfix m-icon-bg1">
  64. <dt class="fl">背景图色值</dt>
  65. <dd class="fl">
  66. <input type="text" id="colorPicker6">
  67. </dd>
  68. </dl>
  69. <dl class="clearfix m-icon-bg2">
  70. <dt class="fl">背景图效果</dt>
  71. <dd class="fl">
  72. <ul class="clearfix small-bg-list">
  73. <li class="active" data-bg="0" data-container="body"
  74. data-toggle="popover"
  75. data-placement="bottom" data-content="纯色" data-trigger="hover">
  76. <div class="small-bg">
  77. <img src="/static/index/image/make/m-0.png"
  78. class="img-responsive">
  79. </div>
  80. <span class="icon icon-checkbox-small"></span>
  81. </li>
  82. <li data-bg="1" data-container="body" data-toggle="popover"
  83. data-placement="top" data-content="菱形" data-trigger="hover">
  84. <div class="small-bg">
  85. <img src="/static/index/image/make/m-1.png"
  86. class="img-responsive">
  87. </div>
  88. <span class="icon icon-checkbox-small"></span>
  89. </li>
  90. <li data-bg="2" data-container="body" data-toggle="popover"
  91. data-placement="bottom" data-content="不规则" data-trigger="hover">
  92. <div class="small-bg">
  93. <img src="/static/index/image/make/m-2.png"
  94. class="img-responsive">
  95. </div>
  96. <span class="icon icon-checkbox-small"></span>
  97. </li>
  98. <li data-bg="3" data-container="body" data-toggle="popover"
  99. data-placement="top" data-content="同心圆" data-trigger="hover">
  100. <div class="small-bg"><img
  101. src="/static/index/image/make/m-3.png"
  102. class="img-responsive">
  103. </div>
  104. <span class="icon icon-checkbox-small"></span>
  105. </li>
  106. <li data-bg="4" data-container="body" data-toggle="popover"
  107. data-placement="bottom" data-content="斜线" data-trigger="hover">
  108. <div class="small-bg"><img
  109. src="/static/index/image/make/m-4.png"
  110. class="img-responsive">
  111. </div>
  112. <span class="icon icon-checkbox-small"></span>
  113. </li>
  114. <li data-bg="5" data-container="body" data-toggle="popover"
  115. data-placement="top" data-content="六边形" data-trigger="hover">
  116. <div class="small-bg"><img
  117. src="/static/index/image/make/m-5.png"
  118. class="img-responsive">
  119. </div>
  120. <span class="icon icon-checkbox-small"></span>
  121. </li>
  122. <li data-bg="6" data-container="body" data-toggle="popover"
  123. data-placement="bottom" data-content="箭头" data-trigger="hover">
  124. <div class="small-bg"><img
  125. src="/static/index/image/make/m-6.png"
  126. class="img-responsive">
  127. </div>
  128. <span class="icon icon-checkbox-small"></span>
  129. </li>
  130. <li data-bg="7" data-container="body" data-toggle="popover"
  131. data-placement="top" data-content="五角星" data-trigger="hover">
  132. <div class="small-bg"><img
  133. src="/static/index/image/make/m-7.png"
  134. class="img-responsive">
  135. </div>
  136. <span class="icon icon-checkbox-small"></span>
  137. </li>
  138. <li data-bg="8" data-container="body" data-toggle="popover"
  139. data-placement="bottom" data-content="旋转" data-trigger="hover">
  140. <div class="small-bg"><img
  141. src="/static/index/image/make/m-8.png"
  142. class="img-responsive">
  143. </div>
  144. <span class="icon icon-checkbox-small"></span>
  145. </li>
  146. <li data-bg="9" data-container="body" data-toggle="popover"
  147. data-placement="top" data-content="对角线" data-trigger="hover">
  148. <div class="small-bg">
  149. <img src="/static/index/image/make/m-9.png"
  150. class="img-responsive">
  151. </div>
  152. <span class="icon icon-checkbox-small"></span>
  153. </li>
  154. </ul>
  155. </dd>
  156. </dl>
  157. </div>
  158. <div class="foreground-map">
  159. <div class="m-tit">前景图</div>
  160. <div class="f-tab">
  161. <ul class="tab clearfix">
  162. <li class="active">使用图形</li>
  163. <li>使用文字</li>
  164. </ul>
  165. <div class="tab-con">
  166. <div class="tab1" style="display: block;">
  167. <div class="form-horizontal">
  168. <div class="form-group">
  169. <label class="col-sm-2 control-label">选择图形</label>
  170. <div class="col-sm-10">
  171. <div>
  172. <ul class="clearfix icons-ul">
  173. <li data-icon="0">
  174. <div class="t-con">
  175. <img src="/static/index/image/make/loading.gif"
  176. data-original="/static/index/image/make/0.png"
  177. class="img-responsive">
  178. <span class="icon icon-checkbox-small"></span>
  179. </div>
  180. </li>
  181. <li data-icon="1">
  182. <div class="t-con">
  183. <img src="/static/index/image/make/loading.gif"
  184. data-original="/static/index/image/make/1.png"
  185. class="img-responsive">
  186. <span class="icon icon-checkbox-small"></span>
  187. </div>
  188. </li>
  189. <li data-icon="2">
  190. <div class="t-con">
  191. <img src="/static/index/image/make/loading.gif"
  192. data-original="/static/index/image/make/2.png"
  193. class="img-responsive">
  194. <span class="icon icon-checkbox-small"></span>
  195. </div>
  196. </li>
  197. <li data-icon="3">
  198. <div class="t-con">
  199. <img src="/static/index/image/make/loading.gif"
  200. data-original="/static/index/image/make/3.png"
  201. class="img-responsive">
  202. <span class="icon icon-checkbox-small"></span>
  203. </div>
  204. </li>
  205. <li data-icon="4">
  206. <div class="t-con">
  207. <img src="/static/index/image/make/loading.gif"
  208. data-original="/static/index/image/make/4.png"
  209. class="img-responsive">
  210. <span class="icon icon-checkbox-small"></span>
  211. </div>
  212. </li>
  213. <li data-icon="5">
  214. <div class="t-con">
  215. <img src="/static/index/image/make/loading.gif"
  216. data-original="/static/index/image/make/5.png"
  217. class="img-responsive">
  218. <span class="icon icon-checkbox-small"></span>
  219. </div>
  220. </li>
  221. <li data-icon="6">
  222. <div class="t-con">
  223. <img src="/static/index/image/make/loading.gif"
  224. data-original="/static/index/image/make/6.png"
  225. class="img-responsive">
  226. <span class="icon icon-checkbox-small"></span>
  227. </div>
  228. </li>
  229. <li data-icon="7">
  230. <div class="t-con">
  231. <img src="/static/index/image/make/loading.gif"
  232. data-original="/static/index/image/make/7.png"
  233. class="img-responsive">
  234. <span class="icon icon-checkbox-small"></span>
  235. </div>
  236. </li>
  237. <li data-icon="8">
  238. <div class="t-con">
  239. <img src="/static/index/image/make/loading.gif"
  240. data-original="/static/index/image/make/8.png"
  241. class="img-responsive">
  242. <span class="icon icon-checkbox-small"></span>
  243. </div>
  244. </li>
  245. <li data-icon="9">
  246. <div class="t-con">
  247. <img src="/static/index/image/make/loading.gif"
  248. data-original="/static/index/image/make/9.png"
  249. class="img-responsive">
  250. <span class="icon icon-checkbox-small"></span>
  251. </div>
  252. </li>
  253. <li data-icon="10">
  254. <div class="t-con">
  255. <img src="/static/index/image/make/loading.gif"
  256. data-original="/static/index/image/make/10.png"
  257. class="img-responsive">
  258. <span class="icon icon-checkbox-small"></span>
  259. </div>
  260. </li>
  261. <li data-icon="11">
  262. <div class="t-con">
  263. <img src="/static/index/image/make/loading.gif"
  264. data-original="/static/index/image/make/11.png"
  265. class="img-responsive">
  266. <span class="icon icon-checkbox-small"></span>
  267. </div>
  268. </li>
  269. <li data-icon="12">
  270. <div class="t-con">
  271. <img src="/static/index/image/make/loading.gif"
  272. data-original="/static/index/image/make/12.png"
  273. class="img-responsive">
  274. <span class="icon icon-checkbox-small"></span>
  275. </div>
  276. </li>
  277. <li data-icon="13">
  278. <div class="t-con">
  279. <img src="/static/index/image/make/loading.gif"
  280. data-original="/static/index/image/make/13.png"
  281. class="img-responsive">
  282. <span class="icon icon-checkbox-small"></span>
  283. </div>
  284. </li>
  285. <li data-icon="14">
  286. <div class="t-con">
  287. <img src="/static/index/image/make/loading.gif"
  288. data-original="/static/index/image/make/14.png"
  289. class="img-responsive">
  290. <span class="icon icon-checkbox-small"></span>
  291. </div>
  292. </li>
  293. <li data-icon="15">
  294. <div class="t-con">
  295. <img src="/static/index/image/make/loading.gif"
  296. data-original="/static/index/image/make/15.png"
  297. class="img-responsive">
  298. <span class="icon icon-checkbox-small"></span>
  299. </div>
  300. </li>
  301. <li data-icon="16">
  302. <div class="t-con">
  303. <img src="/static/index/image/make/loading.gif"
  304. data-original="/static/index/image/make/16.png"
  305. class="img-responsive">
  306. <span class="icon icon-checkbox-small"></span>
  307. </div>
  308. </li>
  309. <li data-icon="17">
  310. <div class="t-con">
  311. <img src="/static/index/image/make/loading.gif"
  312. data-original="/static/index/image/make/17.png"
  313. class="img-responsive">
  314. <span class="icon icon-checkbox-small"></span>
  315. </div>
  316. </li>
  317. <li data-icon="18">
  318. <div class="t-con">
  319. <img src="/static/index/image/make/loading.gif"
  320. data-original="/static/index/image/make/18.png"
  321. class="img-responsive">
  322. <span class="icon icon-checkbox-small"></span>
  323. </div>
  324. </li>
  325. <li data-icon="19">
  326. <div class="t-con">
  327. <img src="/static/index/image/make/loading.gif"
  328. data-original="/static/index/image/make/19.png"
  329. class="img-responsive">
  330. <span class="icon icon-checkbox-small"></span>
  331. </div>
  332. </li>
  333. <li data-icon="20">
  334. <div class="t-con">
  335. <img src="/static/index/image/make/loading.gif"
  336. data-original="/static/index/image/make/20.png"
  337. class="img-responsive">
  338. <span class="icon icon-checkbox-small"></span>
  339. </div>
  340. </li>
  341. <li data-icon="21">
  342. <div class="t-con">
  343. <img src="/static/index/image/make/loading.gif"
  344. data-original="/static/index/image/make/21.png"
  345. class="img-responsive">
  346. <span class="icon icon-checkbox-small"></span>
  347. </div>
  348. </li>
  349. <li data-icon="22">
  350. <div class="t-con">
  351. <img src="/static/index/image/make/loading.gif"
  352. data-original="/static/index/image/make/22.png"
  353. class="img-responsive">
  354. <span class="icon icon-checkbox-small"></span>
  355. </div>
  356. </li>
  357. <li data-icon="23">
  358. <div class="t-con">
  359. <img src="/static/index/image/make/loading.gif"
  360. data-original="/static/index/image/make/23.png"
  361. class="img-responsive">
  362. <span class="icon icon-checkbox-small"></span>
  363. </div>
  364. </li>
  365. <li data-icon="24">
  366. <div class="t-con">
  367. <img src="/static/index/image/make/loading.gif"
  368. data-original="/static/index/image/make/24.png"
  369. class="img-responsive">
  370. <span class="icon icon-checkbox-small"></span>
  371. </div>
  372. </li>
  373. <li data-icon="25">
  374. <div class="t-con">
  375. <img src="/static/index/image/make/loading.gif"
  376. data-original="/static/index/image/make/25.png"
  377. class="img-responsive">
  378. <span class="icon icon-checkbox-small"></span>
  379. </div>
  380. </li>
  381. <li data-icon="26">
  382. <div class="t-con">
  383. <img src="/static/index/image/make/loading.gif"
  384. data-original="/static/index/image/make/26.png"
  385. class="img-responsive">
  386. <span class="icon icon-checkbox-small"></span>
  387. </div>
  388. </li>
  389. <li data-icon="27">
  390. <div class="t-con">
  391. <img src="/static/index/image/make/loading.gif"
  392. data-original="/static/index/image/make/27.png"
  393. class="img-responsive">
  394. <span class="icon icon-checkbox-small"></span>
  395. </div>
  396. </li>
  397. <li data-icon="28">
  398. <div class="t-con">
  399. <img src="/static/index/image/make/loading.gif"
  400. data-original="/static/index/image/make/28.png"
  401. class="img-responsive">
  402. <span class="icon icon-checkbox-small"></span>
  403. </div>
  404. </li>
  405. <li data-icon="29">
  406. <div class="t-con">
  407. <img src="/static/index/image/make/loading.gif"
  408. data-original="/static/index/image/make/29.png"
  409. class="img-responsive">
  410. <span class="icon icon-checkbox-small"></span>
  411. </div>
  412. </li>
  413. <li data-icon="30">
  414. <div class="t-con">
  415. <img src="/static/index/image/make/loading.gif"
  416. data-original="/static/index/image/make/30.png"
  417. class="img-responsive">
  418. <span class="icon icon-checkbox-small"></span>
  419. </div>
  420. </li>
  421. <li data-icon="31">
  422. <div class="t-con">
  423. <img src="/static/index/image/make/loading.gif"
  424. data-original="/static/index/image/make/31.png"
  425. class="img-responsive">
  426. <span class="icon icon-checkbox-small"></span>
  427. </div>
  428. </li>
  429. <li data-icon="32">
  430. <div class="t-con">
  431. <img src="/static/index/image/make/loading.gif"
  432. data-original="/static/index/image/make/32.png"
  433. class="img-responsive">
  434. <span class="icon icon-checkbox-small"></span>
  435. </div>
  436. </li>
  437. <li data-icon="33">
  438. <div class="t-con">
  439. <img src="/static/index/image/make/loading.gif"
  440. data-original="/static/index/image/make/33.png"
  441. class="img-responsive">
  442. <span class="icon icon-checkbox-small"></span>
  443. </div>
  444. </li>
  445. <li data-icon="34">
  446. <div class="t-con">
  447. <img src="/static/index/image/make/loading.gif"
  448. data-original="/static/index/image/make/34.png"
  449. class="img-responsive">
  450. <span class="icon icon-checkbox-small"></span>
  451. </div>
  452. </li>
  453. <li data-icon="35">
  454. <div class="t-con">
  455. <img src="/static/index/image/make/loading.gif"
  456. data-original="/static/index/image/make/35.png"
  457. class="img-responsive">
  458. <span class="icon icon-checkbox-small"></span>
  459. </div>
  460. </li>
  461. <li data-icon="36">
  462. <div class="t-con">
  463. <img src="/static/index/image/make/loading.gif"
  464. data-original="/static/index/image/make/36.png"
  465. class="img-responsive">
  466. <span class="icon icon-checkbox-small"></span>
  467. </div>
  468. </li>
  469. <li data-icon="37">
  470. <div class="t-con">
  471. <img src="/static/index/image/make/loading.gif"
  472. data-original="/static/index/image/make/37.png"
  473. class="img-responsive">
  474. <span class="icon icon-checkbox-small"></span>
  475. </div>
  476. </li>
  477. <li data-icon="38">
  478. <div class="t-con">
  479. <img src="/static/index/image/make/loading.gif"
  480. data-original="/static/index/image/make/38.png"
  481. class="img-responsive">
  482. <span class="icon icon-checkbox-small"></span>
  483. </div>
  484. </li>
  485. <li data-icon="39">
  486. <div class="t-con">
  487. <img src="/static/index/image/make/loading.gif"
  488. data-original="/static/index/image/make/39.png"
  489. class="img-responsive">
  490. <span class="icon icon-checkbox-small"></span>
  491. </div>
  492. </li>
  493. <li data-icon="40">
  494. <div class="t-con">
  495. <img src="/static/index/image/make/loading.gif"
  496. data-original="/static/index/image/make/40.png"
  497. class="img-responsive">
  498. <span class="icon icon-checkbox-small"></span>
  499. </div>
  500. </li>
  501. <li data-icon="41">
  502. <div class="t-con">
  503. <img src="/static/index/image/make/loading.gif"
  504. data-original="/static/index/image/make/41.png"
  505. class="img-responsive">
  506. <span class="icon icon-checkbox-small"></span>
  507. </div>
  508. </li>
  509. <li data-icon="42">
  510. <div class="t-con">
  511. <img src="/static/index/image/make/loading.gif"
  512. data-original="/static/index/image/make/42.png"
  513. class="img-responsive">
  514. <span class="icon icon-checkbox-small"></span>
  515. </div>
  516. </li>
  517. <li data-icon="43">
  518. <div class="t-con">
  519. <img src="/static/index/image/make/loading.gif"
  520. data-original="/static/index/image/make/43.png"
  521. class="img-responsive">
  522. <span class="icon icon-checkbox-small"></span>
  523. </div>
  524. </li>
  525. <li data-icon="44">
  526. <div class="t-con">
  527. <img src="/static/index/image/make/loading.gif"
  528. data-original="/static/index/image/make/44.png"
  529. class="img-responsive">
  530. <span class="icon icon-checkbox-small"></span>
  531. </div>
  532. </li>
  533. <li data-icon="45">
  534. <div class="t-con">
  535. <img src="/static/index/image/make/loading.gif"
  536. data-original="/static/index/image/make/45.png"
  537. class="img-responsive">
  538. <span class="icon icon-checkbox-small"></span>
  539. </div>
  540. </li>
  541. <li data-icon="46">
  542. <div class="t-con">
  543. <img src="/static/index/image/make/loading.gif"
  544. data-original="/static/index/image/make/46.png"
  545. class="img-responsive">
  546. <span class="icon icon-checkbox-small"></span>
  547. </div>
  548. </li>
  549. <li data-icon="47">
  550. <div class="t-con">
  551. <img src="/static/index/image/make/loading.gif"
  552. data-original="/static/index/image/make/47.png"
  553. class="img-responsive">
  554. <span class="icon icon-checkbox-small"></span>
  555. </div>
  556. </li>
  557. <li data-icon="48">
  558. <div class="t-con">
  559. <img src="/static/index/image/make/loading.gif"
  560. data-original="/static/index/image/make/48.png"
  561. class="img-responsive">
  562. <span class="icon icon-checkbox-small"></span>
  563. </div>
  564. </li>
  565. <li data-icon="49">
  566. <div class="t-con">
  567. <img src="/static/index/image/make/loading.gif"
  568. data-original="/static/index/image/make/49.png"
  569. class="img-responsive">
  570. <span class="icon icon-checkbox-small"></span>
  571. </div>
  572. </li>
  573. <li data-icon="50">
  574. <div class="t-con">
  575. <img src="/static/index/image/make/loading.gif"
  576. data-original="/static/index/image/make/50.png"
  577. class="img-responsive">
  578. <span class="icon icon-checkbox-small"></span>
  579. </div>
  580. </li>
  581. <li data-icon="51">
  582. <div class="t-con">
  583. <img src="/static/index/image/make/loading.gif"
  584. data-original="/static/index/image/make/51.png"
  585. class="img-responsive">
  586. <span class="icon icon-checkbox-small"></span>
  587. </div>
  588. </li>
  589. <li data-icon="52">
  590. <div class="t-con">
  591. <img src="/static/index/image/make/loading.gif"
  592. data-original="/static/index/image/make/52.png"
  593. class="img-responsive">
  594. <span class="icon icon-checkbox-small"></span>
  595. </div>
  596. </li>
  597. <li data-icon="53">
  598. <div class="t-con">
  599. <img src="/static/index/image/make/loading.gif"
  600. data-original="/static/index/image/make/53.png"
  601. class="img-responsive">
  602. <span class="icon icon-checkbox-small"></span>
  603. </div>
  604. </li>
  605. <li data-icon="54">
  606. <div class="t-con">
  607. <img src="/static/index/image/make/loading.gif"
  608. data-original="/static/index/image/make/54.png"
  609. class="img-responsive">
  610. <span class="icon icon-checkbox-small"></span>
  611. </div>
  612. </li>
  613. <li data-icon="55">
  614. <div class="t-con">
  615. <img src="/static/index/image/make/loading.gif"
  616. data-original="/static/index/image/make/55.png"
  617. class="img-responsive">
  618. <span class="icon icon-checkbox-small"></span>
  619. </div>
  620. </li>
  621. <li data-icon="56">
  622. <div class="t-con">
  623. <img src="/static/index/image/make/loading.gif"
  624. data-original="/static/index/image/make/56.png"
  625. class="img-responsive">
  626. <span class="icon icon-checkbox-small"></span>
  627. </div>
  628. </li>
  629. <li data-icon="57">
  630. <div class="t-con">
  631. <img src="/static/index/image/make/loading.gif"
  632. data-original="/static/index/image/make/57.png"
  633. class="img-responsive">
  634. <span class="icon icon-checkbox-small"></span>
  635. </div>
  636. </li>
  637. <li data-icon="58">
  638. <div class="t-con">
  639. <img src="/static/index/image/make/loading.gif"
  640. data-original="/static/index/image/make/58.png"
  641. class="img-responsive">
  642. <span class="icon icon-checkbox-small"></span>
  643. </div>
  644. </li>
  645. <li data-icon="59">
  646. <div class="t-con">
  647. <img src="/static/index/image/make/loading.gif"
  648. data-original="/static/index/image/make/59.png"
  649. class="img-responsive">
  650. <span class="icon icon-checkbox-small"></span>
  651. </div>
  652. </li>
  653. <li data-icon="60">
  654. <div class="t-con">
  655. <img src="/static/index/image/make/loading.gif"
  656. data-original="/static/index/image/make/60.png"
  657. class="img-responsive">
  658. <span class="icon icon-checkbox-small"></span>
  659. </div>
  660. </li>
  661. <li data-icon="61">
  662. <div class="t-con">
  663. <img src="/static/index/image/make/loading.gif"
  664. data-original="/static/index/image/make/61.png"
  665. class="img-responsive">
  666. <span class="icon icon-checkbox-small"></span>
  667. </div>
  668. </li>
  669. <li data-icon="62">
  670. <div class="t-con">
  671. <img src="/static/index/image/make/loading.gif"
  672. data-original="/static/index/image/make/62.png"
  673. class="img-responsive">
  674. <span class="icon icon-checkbox-small"></span>
  675. </div>
  676. </li>
  677. <li data-icon="63">
  678. <div class="t-con">
  679. <img src="/static/index/image/make/loading.gif"
  680. data-original="/static/index/image/make/63.png"
  681. class="img-responsive">
  682. <span class="icon icon-checkbox-small"></span>
  683. </div>
  684. </li>
  685. <li data-icon="64">
  686. <div class="t-con">
  687. <img src="/static/index/image/make/loading.gif"
  688. data-original="/static/index/image/make/64.png"
  689. class="img-responsive">
  690. <span class="icon icon-checkbox-small"></span>
  691. </div>
  692. </li>
  693. <li data-icon="65">
  694. <div class="t-con">
  695. <img src="/static/index/image/make/loading.gif"
  696. data-original="/static/index/image/make/65.png"
  697. class="img-responsive">
  698. <span class="icon icon-checkbox-small"></span>
  699. </div>
  700. </li>
  701. <li data-icon="66">
  702. <div class="t-con">
  703. <img src="/static/index/image/make/loading.gif"
  704. data-original="/static/index/image/make/66.png"
  705. class="img-responsive">
  706. <span class="icon icon-checkbox-small"></span>
  707. </div>
  708. </li>
  709. <li data-icon="67">
  710. <div class="t-con">
  711. <img src="/static/index/image/make/loading.gif"
  712. data-original="/static/index/image/make/67.png"
  713. class="img-responsive">
  714. <span class="icon icon-checkbox-small"></span>
  715. </div>
  716. </li>
  717. <li data-icon="68">
  718. <div class="t-con">
  719. <img src="/static/index/image/make/loading.gif"
  720. data-original="/static/index/image/make/68.png"
  721. class="img-responsive">
  722. <span class="icon icon-checkbox-small"></span>
  723. </div>
  724. </li>
  725. <li data-icon="69">
  726. <div class="t-con">
  727. <img src="/static/index/image/make/loading.gif"
  728. data-original="/static/index/image/make/69.png"
  729. class="img-responsive">
  730. <span class="icon icon-checkbox-small"></span>
  731. </div>
  732. </li>
  733. <li data-icon="70">
  734. <div class="t-con">
  735. <img src="/static/index/image/make/loading.gif"
  736. data-original="/static/index/image/make/70.png"
  737. class="img-responsive">
  738. <span class="icon icon-checkbox-small"></span>
  739. </div>
  740. </li>
  741. <li data-icon="71">
  742. <div class="t-con">
  743. <img src="/static/index/image/make/loading.gif"
  744. data-original="/static/index/image/make/71.png"
  745. class="img-responsive">
  746. <span class="icon icon-checkbox-small"></span>
  747. </div>
  748. </li>
  749. <li data-icon="72">
  750. <div class="t-con">
  751. <img src="/static/index/image/make/loading.gif"
  752. data-original="/static/index/image/make/72.png"
  753. class="img-responsive">
  754. <span class="icon icon-checkbox-small"></span>
  755. </div>
  756. </li>
  757. <li data-icon="73">
  758. <div class="t-con">
  759. <img src="/static/index/image/make/loading.gif"
  760. data-original="/static/index/image/make/73.png"
  761. class="img-responsive">
  762. <span class="icon icon-checkbox-small"></span>
  763. </div>
  764. </li>
  765. <li data-icon="74">
  766. <div class="t-con">
  767. <img src="/static/index/image/make/loading.gif"
  768. data-original="/static/index/image/make/74.png"
  769. class="img-responsive">
  770. <span class="icon icon-checkbox-small"></span>
  771. </div>
  772. </li>
  773. <li data-icon="75">
  774. <div class="t-con">
  775. <img src="/static/index/image/make/loading.gif"
  776. data-original="/static/index/image/make/75.png"
  777. class="img-responsive">
  778. <span class="icon icon-checkbox-small"></span>
  779. </div>
  780. </li>
  781. <li data-icon="76">
  782. <div class="t-con">
  783. <img src="/static/index/image/make/loading.gif"
  784. data-original="/static/index/image/make/76.png"
  785. class="img-responsive">
  786. <span class="icon icon-checkbox-small"></span>
  787. </div>
  788. </li>
  789. <li data-icon="77">
  790. <div class="t-con">
  791. <img src="/static/index/image/make/loading.gif"
  792. data-original="/static/index/image/make/77.png"
  793. class="img-responsive">
  794. <span class="icon icon-checkbox-small"></span>
  795. </div>
  796. </li>
  797. <li data-icon="78">
  798. <div class="t-con">
  799. <img src="/static/index/image/make/loading.gif"
  800. data-original="/static/index/image/make/78.png"
  801. class="img-responsive">
  802. <span class="icon icon-checkbox-small"></span>
  803. </div>
  804. </li>
  805. <li data-icon="79">
  806. <div class="t-con">
  807. <img src="/static/index/image/make/loading.gif"
  808. data-original="/static/index/image/make/79.png"
  809. class="img-responsive">
  810. <span class="icon icon-checkbox-small"></span>
  811. </div>
  812. </li>
  813. <li data-icon="80">
  814. <div class="t-con">
  815. <img src="/static/index/image/make/loading.gif"
  816. data-original="/static/index/image/make/80.png"
  817. class="img-responsive">
  818. <span class="icon icon-checkbox-small"></span>
  819. </div>
  820. </li>
  821. <li data-icon="81">
  822. <div class="t-con">
  823. <img src="/static/index/image/make/loading.gif"
  824. data-original="/static/index/image/make/81.png"
  825. class="img-responsive">
  826. <span class="icon icon-checkbox-small"></span>
  827. </div>
  828. </li>
  829. <li data-icon="82">
  830. <div class="t-con">
  831. <img src="/static/index/image/make/loading.gif"
  832. data-original="/static/index/image/make/82.png"
  833. class="img-responsive">
  834. <span class="icon icon-checkbox-small"></span>
  835. </div>
  836. </li>
  837. <li data-icon="83">
  838. <div class="t-con">
  839. <img src="/static/index/image/make/loading.gif"
  840. data-original="/static/index/image/make/83.png"
  841. class="img-responsive">
  842. <span class="icon icon-checkbox-small"></span>
  843. </div>
  844. </li>
  845. <li data-icon="84">
  846. <div class="t-con">
  847. <img src="/static/index/image/make/loading.gif"
  848. data-original="/static/index/image/make/84.png"
  849. class="img-responsive">
  850. <span class="icon icon-checkbox-small"></span>
  851. </div>
  852. </li>
  853. <li data-icon="85">
  854. <div class="t-con">
  855. <img src="/static/index/image/make/loading.gif"
  856. data-original="/static/index/image/make/85.png"
  857. class="img-responsive">
  858. <span class="icon icon-checkbox-small"></span>
  859. </div>
  860. </li>
  861. <li data-icon="86">
  862. <div class="t-con">
  863. <img src="/static/index/image/make/loading.gif"
  864. data-original="/static/index/image/make/86.png"
  865. class="img-responsive">
  866. <span class="icon icon-checkbox-small"></span>
  867. </div>
  868. </li>
  869. <li data-icon="87">
  870. <div class="t-con">
  871. <img src="/static/index/image/make/loading.gif"
  872. data-original="/static/index/image/make/87.png"
  873. class="img-responsive">
  874. <span class="icon icon-checkbox-small"></span>
  875. </div>
  876. </li>
  877. <li data-icon="88">
  878. <div class="t-con">
  879. <img src="/static/index/image/make/loading.gif"
  880. data-original="/static/index/image/make/88.png"
  881. class="img-responsive">
  882. <span class="icon icon-checkbox-small"></span>
  883. </div>
  884. </li>
  885. <li data-icon="89">
  886. <div class="t-con">
  887. <img src="/static/index/image/make/loading.gif"
  888. data-original="/static/index/image/make/89.png"
  889. class="img-responsive">
  890. <span class="icon icon-checkbox-small"></span>
  891. </div>
  892. </li>
  893. <li data-icon="90">
  894. <div class="t-con">
  895. <img src="/static/index/image/make/loading.gif"
  896. data-original="/static/index/image/make/90.png"
  897. class="img-responsive">
  898. <span class="icon icon-checkbox-small"></span>
  899. </div>
  900. </li>
  901. <li data-icon="91">
  902. <div class="t-con">
  903. <img src="/static/index/image/make/loading.gif"
  904. data-original="/static/index/image/make/91.png"
  905. class="img-responsive">
  906. <span class="icon icon-checkbox-small"></span>
  907. </div>
  908. </li>
  909. <li data-icon="92">
  910. <div class="t-con">
  911. <img src="/static/index/image/make/loading.gif"
  912. data-original="/static/index/image/make/92.png"
  913. class="img-responsive">
  914. <span class="icon icon-checkbox-small"></span>
  915. </div>
  916. </li>
  917. <li data-icon="93">
  918. <div class="t-con">
  919. <img src="/static/index/image/make/loading.gif"
  920. data-original="/static/index/image/make/93.png"
  921. class="img-responsive">
  922. <span class="icon icon-checkbox-small"></span>
  923. </div>
  924. </li>
  925. <li data-icon="94">
  926. <div class="t-con">
  927. <img src="/static/index/image/make/loading.gif"
  928. data-original="/static/index/image/make/94.png"
  929. class="img-responsive">
  930. <span class="icon icon-checkbox-small"></span>
  931. </div>
  932. </li>
  933. <li data-icon="95">
  934. <div class="t-con">
  935. <img src="/static/index/image/make/loading.gif"
  936. data-original="/static/index/image/make/95.png"
  937. class="img-responsive">
  938. <span class="icon icon-checkbox-small"></span>
  939. </div>
  940. </li>
  941. <li data-icon="96">
  942. <div class="t-con">
  943. <img src="/static/index/image/make/loading.gif"
  944. data-original="/static/index/image/make/96.png"
  945. class="img-responsive">
  946. <span class="icon icon-checkbox-small"></span>
  947. </div>
  948. </li>
  949. <li data-icon="97">
  950. <div class="t-con">
  951. <img src="/static/index/image/make/loading.gif"
  952. data-original="/static/index/image/make/97.png"
  953. class="img-responsive">
  954. <span class="icon icon-checkbox-small"></span>
  955. </div>
  956. </li>
  957. <li data-icon="98">
  958. <div class="t-con">
  959. <img src="/static/index/image/make/loading.gif"
  960. data-original="/static/index/image/make/98.png"
  961. class="img-responsive">
  962. <span class="icon icon-checkbox-small"></span>
  963. </div>
  964. </li>
  965. <li data-icon="99">
  966. <div class="t-con">
  967. <img src="/static/index/image/make/loading.gif"
  968. data-original="/static/index/image/make/99.png"
  969. class="img-responsive">
  970. <span class="icon icon-checkbox-small"></span>
  971. </div>
  972. </li>
  973. </ul>
  974. </div>
  975. </div>
  976. </div>
  977. <div class="form-group">
  978. <label class="col-sm-2 control-label">前景图位置</label>
  979. <div class="col-sm-10">
  980. <ul class="prospects">
  981. <li data-p="0"><span
  982. class="icon icon-radio icon-radio-checked"></span>居中
  983. </li>
  984. <li data-p="1"><span class="icon icon-radio"></span>居上
  985. </li>
  986. <li data-p="2"><span class="icon icon-radio"></span>居下
  987. </li>
  988. </ul>
  989. </div>
  990. </div>
  991. <div class="form-group written-content">
  992. <label class="col-sm-2 control-label">文字内容</label>
  993. <div class="col-sm-10">
  994. <input type="text" class="form-control"
  995. placeholder="最多支持5个字以内的中文字,或者10个以内的字母/数字">
  996. </div>
  997. <div class="error col-sm-10 col-sm-push-2">
  998. 最多支持5个字以内的中文字,或者10个以内的字母/数字
  999. </div>
  1000. </div>
  1001. <div class="form-group text-color">
  1002. <label class="col-sm-2 control-label">文字颜色</label>
  1003. <div class="col-sm-10">
  1004. <input type="text" id="colorPicker8">
  1005. </div>
  1006. </div>
  1007. </div>
  1008. </div>
  1009. <div class="tab2">
  1010. <div class="form-horizontal">
  1011. <div class="form-group edit-text">
  1012. <label class="control-label col-sm-2">编辑文字</label>
  1013. <div class="col-sm-6">
  1014. <input type="text" name="editText" class="form-control"
  1015. placeholder="请输入1-12个字符,支持英文/字母/数字">
  1016. <div class="error">输入1个或2个字符,支持中文/字母/数字</div>
  1017. </div>
  1018. </div>
  1019. <div class="form-group set-text-color">
  1020. <label class="control-label col-sm-2">文字颜色</label>
  1021. <div class="col-sm-6">
  1022. <input type="text" id="colorPicker7">
  1023. </div>
  1024. </div>
  1025. </div>
  1026. </div>
  1027. </div>
  1028. </div>
  1029. <div class="m-tit">形状选择</div>
  1030. <ul class="m-icon-radio clearfix shape-choose">
  1031. <li class="active">方角图标<span class="icon-checkbox-small icon"></span></li>
  1032. <li>圆角图标<span class="icon-checkbox-small icon"></span></li>
  1033. </ul>
  1034. <div class="m-tit">格式选择</div>
  1035. <ul class="m-icon-radio clearfix format-choose">
  1036. <li data-value="jpg">JPG格式<span class="icon-checkbox-small icon"></span>
  1037. </li>
  1038. <li class="active" data-value="png">PNG格式<span
  1039. class="icon-checkbox-small icon"></span></li>
  1040. </ul>
  1041. <div class="m-tit img-size-tit">选择下方图片尺寸,点击下载</div>
  1042. <dl class="clearfix img-size" style="margin-top: 5px;">
  1043. <dd data-value="16"><span
  1044. class="iconfont icon-download font20 color-hover"></span>16*16
  1045. </dd>
  1046. <dd data-value="44"><span
  1047. class="iconfont icon-download font20 color-hover"></span>44*44
  1048. </dd>
  1049. <dd data-value="66"><span
  1050. class="iconfont icon-download font20 color-hover"></span>66*66
  1051. </dd>
  1052. <dd data-value="114"><span
  1053. class="iconfont icon-download font20 color-hover"></span>114*114
  1054. </dd>
  1055. <dd data-value="180"><span
  1056. class="iconfont icon-download font20 color-hover"></span>180*180
  1057. </dd>
  1058. <dd data-value="1024"><span
  1059. class="iconfont icon-download font20 color-hover"></span>1024*1024
  1060. </dd>
  1061. </dl>
  1062. </div>
  1063. <div class="text-center">
  1064. <input type="hidden" name="image-content">
  1065. </div>
  1066. </div>
  1067. </div>
  1068. </div>
  1069. </div>
  1070. </div>
  1071. </div>
  1072. </div>
  1073. <div id="view"></div>
  1074. <script>
  1075. $(function () {
  1076. Layout.initToolkit();
  1077. });
  1078. var canvasWidth = 360;
  1079. var canvasHeight = 360;
  1080. $(".toolkit-common-wrap .icon-download").parent().on('click', function () {
  1081. main.init();
  1082. canvasWidth = $(this).data('value');
  1083. canvasHeight = $(this).data('value');
  1084. });
  1085. var main = {
  1086. init: function () {
  1087. main.setListener();
  1088. },
  1089. //設置監聽事件
  1090. setListener: function () {
  1091. main.html2Canvas();
  1092. },
  1093. //獲取像素密度
  1094. getPixelRatio: function (context) {
  1095. var backingStore = context.backingStorePixelRatio ||
  1096. context.webkitBackingStorePixelRatio ||
  1097. context.mozBackingStorePixelRatio ||
  1098. context.msBackingStorePixelRatio ||
  1099. context.oBackingStorePixelRatio ||
  1100. context.backingStorePixelRatio || 1;
  1101. return (window.devicePixelRatio || 1) / backingStore;
  1102. },
  1103. //繪製dom 元素,生成截圖canvas
  1104. html2Canvas: function () {
  1105. var shareContent = document.getElementById("iconPreview");// 需要繪製的部分的 (原生)dom 對象 ,注意容器的寬度不要使用百分比,使用固定寬度,避免縮放問題
  1106. var width = shareContent.offsetWidth; // 獲取(原生)dom 寬度
  1107. var height = shareContent.offsetHeight; // 獲取(原生)dom 高
  1108. var offsetTop = shareContent.offsetTop + 999; //元素距離頂部的偏移量
  1109. var canvas = document.createElement('canvas'); //創建canvas 對象
  1110. var context = canvas.getContext('2d');
  1111. var scaleBy = main.getPixelRatio(context); //獲取像素密度的方法 (也可以採用自定義縮放比例)
  1112. canvas.width = width * scaleBy + 999; //這裏 由於繪製的dom 為固定寬度,居中,所以沒有偏移
  1113. canvas.height = (height + offsetTop) * scaleBy; // 注意高度問題,由於頂部有個距離所以要加上頂部的距離,解決圖像高度偏移問題
  1114. context.scale(scaleBy, scaleBy);
  1115. var opts = {
  1116. // 允許加載跨域的圖片
  1117. useCORS: true,
  1118. tainttest: true, //檢測每張圖片都已經加載完成
  1119. scale: scaleBy, // 添加的scale 參數
  1120. canvas: canvas, //自定義 canvas
  1121. logging: false, //日誌開關,發佈的時候記得改成false
  1122. width: width, //dom 原始寬度
  1123. height: height //dom 原始高度
  1124. };
  1125. html2canvas(shareContent, opts).then(function (canvas) {
  1126. var type = $(".format-choose li.active").data('value');
  1127. console.info(type);
  1128. Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, type, canvasWidth + 'x' + canvasHeight);
  1129. });
  1130. }
  1131. };
  1132. </script>
  1133. <?php
  1134. $this->footer();
  1135. ?> </body>
  1136. </html>
  1137. <?php
  1138. }
  1139. }