1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150 |
- <?php
- // by 请勿倒卖,已申请软著,否则追究法律责任
- namespace app\index;
- class icon_make extends Base
- {
- function index()
- {
- ?> <!doctype html>
- <html lang="">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>
- <meta name="keywords" content="<?php echo IN_KEYWORDS;?>"/>
- <meta name="description" content="<?php echo IN_DESCRIPTION;?>"/>
- <title>APP图标在线制作 - 工具箱 - <?php echo IN_NAME;?> - 免费应用内测托管平台|iOS应用Beta测试分发|Android应用内测分发</title>
- <link rel="stylesheet" href="/static/index/css/font.css"/>
- <link rel="stylesheet" type="text/css" href="/static/index/css/spectrum.css"/>
- <link rel="stylesheet" type="text/css" href="/static/index/css/bootstrap.min.css"/>
- <link rel="stylesheet" type="text/css" href="/static/index/css/base.css"/>
- <link rel="stylesheet" type="text/css" href="/static/index/css/main.css"/>
- <link rel="stylesheet" type="text/css" href="/static/index/css/h5.css"/>
- <script src="/static/index/js/jquery.min.js"></script>
- <script src="/static/index/js/bootstrap.min.js"></script>
- <script src="/static/index/js/vue.js"></script>
- <script src="/static/index/js/js.js"></script>
- <script src="/static/index/js/spectrum.js"></script>
- <script src="/static/index/js/jquery.lazyload.js"></script>
- <script>
- isHideFooter = false;
- </script>
- </head>
- <body>
- <?php
- $this->header();
- ?> <span class="icon-menu iconfont phone-menu visible-xs"></span>
- <div class="phone-shadow"></div>
- <script src="/static/index/js/html2canvas.js"></script>
- <script src="/static/index/js/canvas2image.js"></script>
- <div class="toolkit-common-wrap">
- <div class="container">
- <div class="crumbs"><a href="/index/utils">工具箱</a><span>/</span>图标制作</div>
- <div class="toolkit-make-icon">
- <div class="make-icon">
- <div class="clearfix row">
- <div class="col-sm-3">
- <div class="m-left">
- <div class="m-tit">预览效果</div>
- <div id="iconPreview" class="m-icon"
- style="background-image: url(/static/index/image/make/m-0.png);">
- <div class="m-icon-con">
- <div class="i-name1"></div>
- <img src="/static/index/image/make/0.png">
- <div class="i-name2"></div>
- </div>
- <div class="m-name"></div>
- </div>
- </div>
- </div>
- <div class="col-sm-9">
- <div class="m-right">
- <div class="m-tit">图标背景色</div>
- <div class="icon-bg">
- <dl class="clearfix m-icon-bg1">
- <dt class="fl">背景图色值</dt>
- <dd class="fl">
- <input type="text" id="colorPicker6">
- </dd>
- </dl>
- <dl class="clearfix m-icon-bg2">
- <dt class="fl">背景图效果</dt>
- <dd class="fl">
- <ul class="clearfix small-bg-list">
- <li class="active" data-bg="0" data-container="body"
- data-toggle="popover"
- data-placement="bottom" data-content="纯色" data-trigger="hover">
- <div class="small-bg">
- <img src="/static/index/image/make/m-0.png"
- class="img-responsive">
- </div>
- <span class="icon icon-checkbox-small"></span>
- </li>
- <li data-bg="1" data-container="body" data-toggle="popover"
- data-placement="top" data-content="菱形" data-trigger="hover">
- <div class="small-bg">
- <img src="/static/index/image/make/m-1.png"
- class="img-responsive">
- </div>
- <span class="icon icon-checkbox-small"></span>
- </li>
- <li data-bg="2" data-container="body" data-toggle="popover"
- data-placement="bottom" data-content="不规则" data-trigger="hover">
- <div class="small-bg">
- <img src="/static/index/image/make/m-2.png"
- class="img-responsive">
- </div>
- <span class="icon icon-checkbox-small"></span>
- </li>
- <li data-bg="3" data-container="body" data-toggle="popover"
- data-placement="top" data-content="同心圆" data-trigger="hover">
- <div class="small-bg"><img
- src="/static/index/image/make/m-3.png"
- class="img-responsive">
- </div>
- <span class="icon icon-checkbox-small"></span>
- </li>
- <li data-bg="4" data-container="body" data-toggle="popover"
- data-placement="bottom" data-content="斜线" data-trigger="hover">
- <div class="small-bg"><img
- src="/static/index/image/make/m-4.png"
- class="img-responsive">
- </div>
- <span class="icon icon-checkbox-small"></span>
- </li>
- <li data-bg="5" data-container="body" data-toggle="popover"
- data-placement="top" data-content="六边形" data-trigger="hover">
- <div class="small-bg"><img
- src="/static/index/image/make/m-5.png"
- class="img-responsive">
- </div>
- <span class="icon icon-checkbox-small"></span>
- </li>
- <li data-bg="6" data-container="body" data-toggle="popover"
- data-placement="bottom" data-content="箭头" data-trigger="hover">
- <div class="small-bg"><img
- src="/static/index/image/make/m-6.png"
- class="img-responsive">
- </div>
- <span class="icon icon-checkbox-small"></span>
- </li>
- <li data-bg="7" data-container="body" data-toggle="popover"
- data-placement="top" data-content="五角星" data-trigger="hover">
- <div class="small-bg"><img
- src="/static/index/image/make/m-7.png"
- class="img-responsive">
- </div>
- <span class="icon icon-checkbox-small"></span>
- </li>
- <li data-bg="8" data-container="body" data-toggle="popover"
- data-placement="bottom" data-content="旋转" data-trigger="hover">
- <div class="small-bg"><img
- src="/static/index/image/make/m-8.png"
- class="img-responsive">
- </div>
- <span class="icon icon-checkbox-small"></span>
- </li>
- <li data-bg="9" data-container="body" data-toggle="popover"
- data-placement="top" data-content="对角线" data-trigger="hover">
- <div class="small-bg">
- <img src="/static/index/image/make/m-9.png"
- class="img-responsive">
- </div>
- <span class="icon icon-checkbox-small"></span>
- </li>
- </ul>
- </dd>
- </dl>
- </div>
- <div class="foreground-map">
- <div class="m-tit">前景图</div>
- <div class="f-tab">
- <ul class="tab clearfix">
- <li class="active">使用图形</li>
- <li>使用文字</li>
- </ul>
- <div class="tab-con">
- <div class="tab1" style="display: block;">
- <div class="form-horizontal">
- <div class="form-group">
- <label class="col-sm-2 control-label">选择图形</label>
- <div class="col-sm-10">
- <div>
- <ul class="clearfix icons-ul">
- <li data-icon="0">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/0.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="1">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/1.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="2">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/2.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="3">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/3.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="4">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/4.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="5">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/5.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="6">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/6.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="7">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/7.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="8">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/8.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="9">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/9.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="10">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/10.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="11">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/11.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="12">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/12.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="13">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/13.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="14">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/14.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="15">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/15.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="16">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/16.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="17">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/17.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="18">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/18.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="19">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/19.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="20">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/20.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="21">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/21.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="22">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/22.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="23">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/23.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="24">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/24.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="25">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/25.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="26">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/26.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="27">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/27.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="28">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/28.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="29">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/29.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="30">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/30.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="31">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/31.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="32">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/32.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="33">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/33.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="34">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/34.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="35">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/35.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="36">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/36.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="37">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/37.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="38">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/38.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="39">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/39.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="40">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/40.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="41">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/41.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="42">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/42.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="43">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/43.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="44">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/44.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="45">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/45.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="46">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/46.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="47">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/47.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="48">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/48.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="49">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/49.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="50">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/50.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="51">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/51.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="52">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/52.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="53">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/53.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="54">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/54.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="55">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/55.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="56">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/56.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="57">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/57.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="58">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/58.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="59">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/59.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="60">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/60.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="61">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/61.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="62">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/62.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="63">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/63.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="64">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/64.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="65">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/65.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="66">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/66.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="67">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/67.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="68">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/68.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="69">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/69.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="70">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/70.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="71">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/71.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="72">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/72.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="73">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/73.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="74">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/74.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="75">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/75.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="76">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/76.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="77">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/77.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="78">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/78.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="79">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/79.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="80">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/80.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="81">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/81.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="82">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/82.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="83">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/83.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="84">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/84.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="85">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/85.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="86">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/86.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="87">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/87.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="88">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/88.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="89">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/89.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="90">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/90.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="91">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/91.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="92">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/92.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="93">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/93.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="94">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/94.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="95">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/95.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="96">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/96.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="97">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/97.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="98">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/98.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- <li data-icon="99">
- <div class="t-con">
- <img src="/static/index/image/make/loading.gif"
- data-original="/static/index/image/make/99.png"
- class="img-responsive">
- <span class="icon icon-checkbox-small"></span>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="form-group">
- <label class="col-sm-2 control-label">前景图位置</label>
- <div class="col-sm-10">
- <ul class="prospects">
- <li data-p="0"><span
- class="icon icon-radio icon-radio-checked"></span>居中
- </li>
- <li data-p="1"><span class="icon icon-radio"></span>居上
- </li>
- <li data-p="2"><span class="icon icon-radio"></span>居下
- </li>
- </ul>
- </div>
- </div>
- <div class="form-group written-content">
- <label class="col-sm-2 control-label">文字内容</label>
- <div class="col-sm-10">
- <input type="text" class="form-control"
- placeholder="最多支持5个字以内的中文字,或者10个以内的字母/数字">
- </div>
- <div class="error col-sm-10 col-sm-push-2">
- 最多支持5个字以内的中文字,或者10个以内的字母/数字
- </div>
- </div>
- <div class="form-group text-color">
- <label class="col-sm-2 control-label">文字颜色</label>
- <div class="col-sm-10">
- <input type="text" id="colorPicker8">
- </div>
- </div>
- </div>
- </div>
- <div class="tab2">
- <div class="form-horizontal">
- <div class="form-group edit-text">
- <label class="control-label col-sm-2">编辑文字</label>
- <div class="col-sm-6">
- <input type="text" name="editText" class="form-control"
- placeholder="请输入1-12个字符,支持英文/字母/数字">
- <div class="error">输入1个或2个字符,支持中文/字母/数字</div>
- </div>
- </div>
- <div class="form-group set-text-color">
- <label class="control-label col-sm-2">文字颜色</label>
- <div class="col-sm-6">
- <input type="text" id="colorPicker7">
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="m-tit">形状选择</div>
- <ul class="m-icon-radio clearfix shape-choose">
- <li class="active">方角图标<span class="icon-checkbox-small icon"></span></li>
- <li>圆角图标<span class="icon-checkbox-small icon"></span></li>
- </ul>
- <div class="m-tit">格式选择</div>
- <ul class="m-icon-radio clearfix format-choose">
- <li data-value="jpg">JPG格式<span class="icon-checkbox-small icon"></span>
- </li>
- <li class="active" data-value="png">PNG格式<span
- class="icon-checkbox-small icon"></span></li>
- </ul>
- <div class="m-tit img-size-tit">选择下方图片尺寸,点击下载</div>
- <dl class="clearfix img-size" style="margin-top: 5px;">
- <dd data-value="16"><span
- class="iconfont icon-download font20 color-hover"></span>16*16
- </dd>
- <dd data-value="44"><span
- class="iconfont icon-download font20 color-hover"></span>44*44
- </dd>
- <dd data-value="66"><span
- class="iconfont icon-download font20 color-hover"></span>66*66
- </dd>
- <dd data-value="114"><span
- class="iconfont icon-download font20 color-hover"></span>114*114
- </dd>
- <dd data-value="180"><span
- class="iconfont icon-download font20 color-hover"></span>180*180
- </dd>
- <dd data-value="1024"><span
- class="iconfont icon-download font20 color-hover"></span>1024*1024
- </dd>
- </dl>
- </div>
- <div class="text-center">
- <input type="hidden" name="image-content">
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="view"></div>
- <script>
- $(function () {
- Layout.initToolkit();
- });
- var canvasWidth = 360;
- var canvasHeight = 360;
- $(".toolkit-common-wrap .icon-download").parent().on('click', function () {
- main.init();
- canvasWidth = $(this).data('value');
- canvasHeight = $(this).data('value');
- });
- var main = {
- init: function () {
- main.setListener();
- },
- //設置監聽事件
- setListener: function () {
- main.html2Canvas();
- },
- //獲取像素密度
- getPixelRatio: function (context) {
- var backingStore = context.backingStorePixelRatio ||
- context.webkitBackingStorePixelRatio ||
- context.mozBackingStorePixelRatio ||
- context.msBackingStorePixelRatio ||
- context.oBackingStorePixelRatio ||
- context.backingStorePixelRatio || 1;
- return (window.devicePixelRatio || 1) / backingStore;
- },
- //繪製dom 元素,生成截圖canvas
- html2Canvas: function () {
- var shareContent = document.getElementById("iconPreview");// 需要繪製的部分的 (原生)dom 對象 ,注意容器的寬度不要使用百分比,使用固定寬度,避免縮放問題
- var width = shareContent.offsetWidth; // 獲取(原生)dom 寬度
- var height = shareContent.offsetHeight; // 獲取(原生)dom 高
- var offsetTop = shareContent.offsetTop + 999; //元素距離頂部的偏移量
- var canvas = document.createElement('canvas'); //創建canvas 對象
- var context = canvas.getContext('2d');
- var scaleBy = main.getPixelRatio(context); //獲取像素密度的方法 (也可以採用自定義縮放比例)
- canvas.width = width * scaleBy + 999; //這裏 由於繪製的dom 為固定寬度,居中,所以沒有偏移
- canvas.height = (height + offsetTop) * scaleBy; // 注意高度問題,由於頂部有個距離所以要加上頂部的距離,解決圖像高度偏移問題
- context.scale(scaleBy, scaleBy);
- var opts = {
- // 允許加載跨域的圖片
- useCORS: true,
- tainttest: true, //檢測每張圖片都已經加載完成
- scale: scaleBy, // 添加的scale 參數
- canvas: canvas, //自定義 canvas
- logging: false, //日誌開關,發佈的時候記得改成false
- width: width, //dom 原始寬度
- height: height //dom 原始高度
- };
- html2canvas(shareContent, opts).then(function (canvas) {
- var type = $(".format-choose li.active").data('value');
- console.info(type);
- Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, type, canvasWidth + 'x' + canvasHeight);
- });
- }
- };
- </script>
- <?php
- $this->footer();
- ?> </body>
- </html>
- <?php
- }
- }
|