代码拉取完成，页面将自动刷新
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>生成手机封面</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"/>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/farbtastic.css"/>
<script type="text/javascript" src="js/farbtastic.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.nstSlider.min.css"/>
<script type="text/javascript" src="js/jquery.nstSlider.min.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<style>
.w980{width:980px;margin:auto;display:block; border:#ddd solid; border-width:0 1px;}
#picker{position:absolute;right:0px;top:100%;}
.vbox,.hbox{position:relative; box-shadow:0 0 5px #000;}
.vbox{width:320px;height:480px;float:left;}
.hbox{width:600px;height:450px;float:right;}
.vbox .logo{max-width:50%;position:absolute;top:15%;left:50%;margin-left:-25%;}
.hbox .logo{max-width:50%;position:absolute;top:50%;left:50%;margin:-25% 0 0 -25%;}
.vbox .copyright,.hbox .copyright{position:absolute;left:50%;bottom:10%;width:60%;margin-left:-30%; text-align:center;color:#FFF;}
.vbox .copyright{}
.hbox .copyright{}
.bgList .bgBar{border-top:#CCC solid 1px;margin-top:5px;padding-top:5px;}
#dwBox a{display:block;float:left; border-radius:5px; padding:5px; background:#FFF; border:#666 solid 1px; text-align:center; box-shadow:0 0 3px rgba(0,0,0,.5);margin:0 10px 5px 0px; font-size:1em;}
#dwBox a img{width:100px;}
#dwBox a strong{display:block;}
</style>
</head>
<body>
<div style="background:#DDD;padding:5px; box-shadow:0 0 5px rgba(0,0,0,.7)">
<form class="form-inline w980">
<div class="row">
<div class="form-group col-md-4">
<label for="exampleInputFile">选择Logo</label>
<input type="file" id="logo">
</div>
<div class="form-group col-md-4" style="position:relative;">
<div class="input-group col-md-12">
<div class="input-group-addon">背景颜色</div>
<input type="text" class="form-control" id="bgcolor" value="#123456">
</div>
<div id="picker" style="position:absolute; z-index:9"></div>
<input type="text" class="form-control" style="width:100%;" id="cpRight" placeholder="版权说明，支持HTML">
<!--<div><input type="text" class="form-control" size="31" id="cpRight" /></div>-->
</div>
<div class="form-group col-md-2">
<label for="exampleInputFile">操作</label>
<button type="button" class="MakeFM btn btn-success btn-block glyphicon glyphicon-ok-sign"> 生成封面</button>
</div>
</div>
<div class="row bgList">
<div class="bgBar">
<div class="form-group col-md-4">
<label for="exampleInputFile">选择背景</label>
<input type="file" id="bgr" class="bgr">
</div>
<div class="form-group col-md-2">
<label for="exampleInputFile">背景位置</label>
<select id="pos" class="form-control">
<option value="left top">左上</option>
<option value="left center">左中</option>
<option value="left bottom">左下</option>
<option value="center top">中上</option>
<option value="center center">中中</option>
<option value="center bottom">中下</option>
<option value="right top">右上</option>
<option value="right center">右中</option>
<option value="right bottom">右下</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="exampleInputFile">平铺方式</label>
<select id="pingpu" class="form-control">
<option value="no-repeat">不平铺</option>
<option value="repeat">平铺</option>
<option value="repeat-x">横向平铺</option>
<option value="repeat-y">丛向平铺</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="exampleInputFile">背景大小</label>
<select id="bgsz" class="form-control">
<option value="auto">auto</option>
<option value="cover">cover</option>
<option value="contain">contain</option>
<option value="">自定义</option>
</select>
<input type="text" placeholder="如：50%或50px" id="bgsize" class="form-control" size="10" style="display:none;" />
</div>
<div class="form-group col-md-2">
<label for="exampleInputFile">添加</label>
<button type="button" class="addBG btn btn-default btn-block glyphicon glyphicon-plus-sign"> 添加背景</button>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
<div id="dwBox"></div>
<div class="clearfix"></div>
</form>
</div>
<div style="clear:both;height:5px;"></div>
<div class="w980">
<div id="demo1" class="vbox fengm">
<img class="logo" />
<div class="copyright"></div>
</div>
<div class="hbox fengm">
<img class="logo" />
<div class="copyright"></div>
</div>
<div class="clearfix"></div>
</div>
<canvas></canvas>
<script>
$('.fengm').css({backgroundColor:$('#bgcolor').val()});
$('#logo').change(function(){
getFileUrl('logo',function(url){
$('.logo').attr('src',url);
});
})
$('#cpRight').change(function(){
$('.copyright').css({color:$('#cpyColor').val()}).html($(this).val());
});
//背景
$('.addBG').click(function(){
$('.bgList .bgBar:eq(0)').clone().appendTo('.bgList');
$('.bgList .bgBar:last .addBG').removeClass('addBG').removeClass('glyphicon-plus-sign').addClass('glyphicon-remove-sign delBG').text('删除背景');
$('.delBG').click(function(){$(this).parents('.bgBar').empty().remove();bginit()});
$bgBar=$('.bgList .bgBar:last');
$bgBar.find('#bgr').attr({id:'bgr'+$bgBar.index()});
$('.bgList .bgBar:last select,.bgList .bgBar:last input').change(function(){bginit()});
$('.bgList .bgBar:last #bgsz').change(function(){
if(!$(this).val()){
$(this).hide();
$(this).siblings('#bgsize').show();
}
})
})
$('#bgcolor').focus(function(){
$('#picker').show().farbtastic('.fengm,#bgcolor');
}).blur(function(){
$('#picker').hide();
});
$('.bgList .bgBar select,.bgList .bgBar input').change(function(){bginit()});
$('#bgsz').change(function(){
if(!$(this).val()){
$(this).hide();
$('#bgsize').show();
}
})
function bginit(){
var bg=[],sz=[],ps=[],pp=[],bgArr=[];
$('.bgList .bgBar').each(function(i, elm){
var bgid=$(this).find('.bgr').attr('id'),bgv=$(this).find('.bgr').val();console.log(bgv)
if(bgv){
var pos=$(this).find('#pos').val(),pin=$(this).find('#pingpu').val(),szv=$(this).find('#bgsz').val()||$(this).find('#bgsize').val();
//var bg='',ps='',pp='',sz='';
getFileUrl(bgid,function(url){
//bgArr.push({url:url,pos:pos,pp:pp,sz:szv});
bg.push('url('+url+')');
ps.push(pos);
pp.push(pin);
sz.push(szv);
var e=$('.fengm');
//bg=e.css('background-image'),ps=e.css('background-Position'),pp=e.css('background-Repeat'),sz=e.css('background-Size');
//bg=bg=='none'?'url('+url+')':bg+',url('+url+')'
console.log(ps)
e.css({backgroundImage:bg,backgroundPosition:ps,backgroundRepeat:pp,backgroundSize:sz});
/*if(bgArr.length==$('.bgList .bgBar').size()){
$.each(bgArr,function(i,t){
bj+='url('+t.url+'),';
ps+=pos+',';
pp+=pin+','
sz+=$(this).find('#bgsz').val()+',';
});
bj=bj.replace(/\,$/g,' '),sz=sz.replace(/\,$/g,''),ps=ps.replace(/\,$/g,''),pp=pp.replace(/\,$/g,'');
console.log(bj)
$('.fengm').css({backgroundImage:bj,backgroundPosition:ps,backgroundRepeat:pp,backgroundSize:sz});
}*/
})
}
});
}
/**
* 从 file 域获取 本地图片 url
*/
function getFileUrl(sourceId,fun) {
var url;
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
url = document.getElementById(sourceId).value;
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
var c=document.createElement('canvas'),
ctx=c.getContext('2d')
ctx.rect(0,0,c.width,c.height);
var img=new Image;
img.crossOrigin = 'Anonymous'; //解决跨域
img.src=url;
img.onload=function(){
c.width=img.width
c.height=img.height
ctx.drawImage(img,0,0);
pic=c.toDataURL("image/png");
//console.log(pic)
fun(pic);
}
}
var scrArr=[{"dev":"iphone","type":"v","size":"320x480","title":"iPhone3"},
{"dev":"iphone","type":"v","size":"640x960","title":"iPhone4"},
{"dev":"iphone","type":"v","size":"640x1136","title":"iPhone5/iPhone5s"},
{"dev":"iphone","type":"v","size":"750x1334","title":"iPhone6"},
{"dev":"iphone","type":"v","size":"1242x2208","title":"iPhone6 Plus"},
{"dev":"iphone","type":"h","size":"2208x1242","title":"iPhone6 Plus 横屏"},
{"dev":"ipad","type":"v","size":"768x1004","title":"iPad竖屏启动图片"},
{"dev":"ipad","type":"h","size":"1024x748","title":"iPad横屏启动图片"},
{"dev":"ipad","type":"v","size":"768x1024","title":"iOS7竖屏启动图片"},
{"dev":"ipad","type":"h","size":"1024x768","title":"iPad iOS7横屏启动图片"},
{"dev":"ipad","type":"v","size":"1536x2008","title":"iPad高分屏竖屏图片"},
{"dev":"ipad","type":"h","size":"2048x1496","title":"iPad高分屏横屏启动图片"},
{"dev":"ipad","type":"v","size":"1536x2048","title":"iPad iOS7高分屏竖屏图片"},
{"dev":"ipad","type":"h","size":"2048x1536","title":"iPad iOS7高分屏横屏图片"},
{"dev":"android","type":"v","size":"240x282","title":"普通屏启动图片"},
{"dev":"android","type":"v","size":"320x442","title":"大屏启动图片"},
{"dev":"android","type":"v","size":"480x762","title":"高分屏启动图片"},
{"dev":"android","type":"v","size":"720x1242","title":"720P高分屏启动图片"},
{"dev":"android","type":"v","size":"1080x1882","title":"1080P高分屏启动图片"}];
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var ctx = canvas.getContext('2d');
$('.MakeFM').click(function(){
makefm(0)
$('#dwBox').html('<div class="alert alert-info">正在生成，请勿刷新或滚动页面！只有 Firefox 和 Chrome 支持 download 属性（点击下载），其他浏览器请拖动到桌面的方式下载。</div>');
})
function makefm(i){
var t=scrArr[i],sz=t.size.split('x');
$("#demo1").css({width:sz[0],height:sz[1]});
var lw=$("#demo1 .logo").width(),bw=$("#demo1").width(),ml=lw*0.5;
$("#demo1 .logo").css({marginLeft:'-'+(ml)+'px'})
setTimeout(function(){
mkimg(i,t)
},100)
}
function mkimg(i,t){
html2canvas(document.querySelector("#demo1")).then(function(canvas) {
$('#dwBox').append('<a href="'+canvas.toDataURL("image/png")+'" download="'+t.size+'.png" title="'+t.title+'['+t.dev+']'+'"><img src="'+canvas.toDataURL("image/png")+'"><strong>'+t.size+'</strong></a>');
i+=1;
mk=setTimeout(function(){
makefm(i);
},100)
if(i==scrArr.length){
$('#dwBox a').click(function(){
$(this).css({boxShadow:'0 0 3px rgba(18, 52, 86,.5)'}).click();
})
$("#demo1").removeAttr('style').css({backgroundColor:$('#bgcolor').val()});
clearTimeout(mk);
alert('生成完成');
}
});
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。