前言
前几天发了一篇文章，给大家分享了一下，如何更换idea的启动图，没想到一个点赞都没有，好难瘦~
今天再给大家分享下怎么样在不会PS的情况下，处理启动图
先看下效果图
- 左边部分是效果预览
- 右边部分是对页面素材内容的一些配置
后续如果还有时间的话，会出一个拖拽版本的
1.页面结构
使用flex弹性布局将页面分为等宽的两部分，左边是画布容器（使用的svg，没有使用canvas）,右边是素材配置
2.SVG画布
可以看到svg下面的两个image标签都是空的，因为没有使用CDN加载图片，本地是将图片转成base64处理的
<svg id="svg" width="640" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 640 400"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="image" xlink:href="" width="100%" height="100%" x="0" y="0" visibility="visible" preserveAspectRatio="none"/>
<text id="title" x="72" y="102" style="fill:#fff; font-weight: bold; font-size:36px; letter-spacing:-2px">IntelliJ IDEA</text>
<text id="subTitle" x="74" y="123" style="fill:#fff; font-weight: bold; font-size:12px; letter-spacing: 0.5px">Ultimate 2021.2</text>
<image width="50" height="50" id="logo" x="540" y="296" xlink:href="" visibility="visible" preserveAspectRatio="none"/>
</svg>
注意：图片（image）标签需要增加preserveAspectRatio属性，来处理图片拉伸铺满问题，如果使用的图片，不是对应比例的图片，拉伸也会变形，可以将preserveAspectRatio属性去掉
3.Form
<div class="form">
<div class="form-sub">
<div class="form-sub-title">图片属性</div>
<div class="form-item">
<label>背景图片</label>
<button class="button img_upload_btn">选择图片</button>
<input type="file" name="file" class="img_upload" accept="image/gif, image/jpeg,image/x-png" style="display: none;"/>
<span class="form-tip">选择jpeg或png格式的图片</span>
</div>
<div class="form-item">
<label>图片宽高</label>
<div style="display:inline-flex;justify-content: space-between;flex-direction: row;width: 496px;">
<input type="text" name="width" class="form-input" value="640" placeholder="图片宽度" style="width:230px"/>
<input type="text" name="height" class="form-input" value="400" placeholder="图片高度" style="width:230px"/>
</div>
</div>
<div class="form-item">
<label>不透明度</label>
<input type="text" name="opacity" class="form-input" placeholder="不透明度" value="1"/>
</div>
</div>
<div class="form-sub">
<div class="form-sub-title">主标题</div>
<div class="form-item">
<label>主标题</label>
<input type="text" name="title" class="form-input" value="IntelliJ IDEA" placeholder="主标题"/>
</div>
<div class="form-item">
<label>主标题坐标</label>
<div style="display:inline-flex;justify-content: space-between;flex-direction: row;width: 496px;">
<input type="text" name="titleX" class="form-input" value="72" placeholder="x" style="width:230px"/>
<input type="text" name="titleY" class="form-input" value="10.2" placeholder="y" style="width:230px;"/>
</div>
</div>
<div class="form-item">
<label>主标题颜色</label>
<input type="text" name="title-color" class="form-input" value="#fff" placeholder="主标题颜色"/>
</div>
</div>
<div class="form-sub">
<div class="form-sub-title">副标题</div>
<div class="form-item">
<label>副标题</label>
<input type="text" name="subTitle" class="form-input" value="Ultimate 2021.2" placeholder="副标题"/>
</div>
<div class="form-item">
<label>副标题坐标</label>
<div style="display:inline-flex;justify-content: space-between;flex-direction: row;width: 496px;">
<input type="text" name="subTitleX" class="form-input" value="74" placeholder="x" style="width:230px;"/>
<input type="text" name="subTitleY" class="form-input" value="123" placeholder="y" style="width:230px;"/>
</div>
</div>
<div class="form-item">
<label>副标题颜色</label>
<input type="text" name="subTitle-color" class="form-input" value="#fff" placeholder="副标题颜色"/>
</div>
</div>
<div class="form-sub">
<div class="form-sub-title">LOGO</div>
<div class="form-item">
<label>LOGO图片</label>
<button class="button logo_upload_btn">选择LOGO</button>
<input type="file" name="file" class="logo_upload" accept="image/gif, image/jpeg,image/x-png" style="display: none;"/>
<span class="form-tip">选择jpeg或png格式的图片</span>
</div>
<div class="form-item">
<label>LOGO宽高</label>
<div style="display:inline-flex;justify-content: space-between;flex-direction: row;width: 496px;">
<input type="text" name="logoWidth" class="form-input" value="50" placeholder="图片宽度" style="width:230px"/>
<input type="text" name="logoHeight" class="form-input" value="50" placeholder="图片高度" style="width:230px"/>
</div>
</div>
<div class="form-item">
<label>LOGO坐标</label>
<div style="display:inline-flex;justify-content: space-between;flex-direction: row;width: 496px;">
<input type="text" name="logoX" class="form-input" value="540" placeholder="x" style="width:230px;"/>
<input type="text" name="logoY" class="form-input" value="296" placeholder="y" style="width:230px;"/>
</div>
</div>
<div class="form-item">
<label>不透明度</label>
<input type="text" name="logoOpacity" class="form-input" placeholder="LOGO不透明度" value="1"/>
</div>
</div>
<div class="form-item">
<label></label>
<button class="button download_btn">下载文件</button>
</div>
</div>
-
可以看到，表单未使用
form标签，一方面，button在form标签里面时，点击事件会提交表单(当然也有其他的解决方案)，另一方面，也没有更后台有交互，所以未使用form标签 -
将表单分组，同类信息放在一起，例如背景图片的宽高，图片文件，不透明度等
3.样式设置
*{
padding: 0;
margin: 0;
}
.right-form{
padding: 20px;
}
.form{
width: calc(100% - 40px);
border: 1px solid #e0e0e0;
padding: 10px 20px;
height: 100%;
}
.form-input{
outline-style: none ;
border: 1px solid #ccc;
border-radius: 3px;
padding: 4px 6px;
width: 480px;
font-size: 20px;
font-family: "Microsoft soft";
}
.button { /* 按钮美化 */
width: 270px; /* 宽度 */
height: 32px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #1E90FF; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 16px; /* 字体大小 */
}
.button:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #5599FF;
}
.img_upload_btn,.logo_upload_btn{
width: auto;
padding: 0 10px;
}
.container{
display: flex;
width: 100vw;
}
.pic,.right-form{
width: 50%;
height: 100%;
position: relative;
}
.form .form-item{
margin-bottom: 10px;
}
.form-item label {
width: 100px;
font-size: 20px;
text-align: justify;
text-align-last: justify;
display: inline-block;
margin-right: 10px;
}
.form-tip {
margin-left: 10px;
color: #999;
}
.form-sub{
margin-bottom: 20px;
}
.form-sub-title{
padding: 4px;
font-weight: bold;
color: #999;
border-left: 4px solid red;
border-bottom: 1px dashed transparent;
position: relative;
margin-bottom: 4px;
width: 100%;
}
.form-sub-title::after{
content: "";
position: absolute;
width: 0;
height: 1px;
transition: all 0.5s;
border-bottom: 1px dashed transparent;
left: 4px;
bottom: 0;
}
.form-sub:hover .form-sub-title::after{
width: calc(100% - 12px);
border-bottom: 1px dashed red;
}
- 使用css伪元素，给表单分组标题加了个动画，看上去更加灵动
4.js代码
- input上传文件，将文件转为base64
img_upload.addEventListener('change',()=>{
var imgReader = new FileReader();
imgReader.onload = function(evt) {
//console.log(evt.target.result) //图片base64
document.querySelector("#image").setAttribute("xlink:href",evt.target.result)
}
imgReader.readAsDataURL(img_upload.files[0]);
})
- svg转png
const covertSVG2Image = (node, name, width, height, type = 'png') => {
let serializer = new XMLSerializer()
let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node)
let image = new Image()
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
let canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
let context = canvas.getContext('2d')
context.fillStyle = '#fff'
context.fillRect(0, 0, 10000, 10000)
image.onload = function () {
context.drawImage(image, 0, 0)
let a = document.createElement('a')
a.download = `${name}.${type}`
a.href = canvas.toDataURL(`image/${type}`)
a.click()
}
}
- 完整的js代码
let img_upload = document.querySelector(".img_upload");
document.querySelector('.img_upload_btn').addEventListener('click',()=>{
img_upload.click();
})
img_upload.addEventListener('change',()=>{
var imgReader = new FileReader();
imgReader.onload = function(evt) {
//console.log(evt.target.result) //图片base64
document.querySelector("#image").setAttribute("xlink:href",evt.target.result)
}
imgReader.readAsDataURL(img_upload.files[0]);
})
//宽度
let width = document.querySelector('input[name="width"]');
//高度
let height = document.querySelector('input[name="height"]');
width.addEventListener('input',()=>{
document.querySelector("#svg").setAttribute("width" , width.value);
document.querySelector("#svg").setAttribute("viewBox", `0 0 ${width.value} ${height.value}`)
})
height.addEventListener('input',()=>{
document.querySelector("#svg").setAttribute("height" , height.value);
document.querySelector("#svg").setAttribute("viewBox", `0 0 ${width.value} ${height.value}`)
})
//不透明度
let opacity = document.querySelector('input[name="opacity"]');
opacity.addEventListener('input',()=>{
document.querySelector("#image").style.opacity = opacity.value;
})
//标题
let title = document.querySelector('input[name="title"]');
title.addEventListener('input',()=>{
document.querySelector('#title').innerHTML = title.value;
})
//标题坐标X
let titleX = document.querySelector('input[name="titleX"]');
titleX.addEventListener('input',()=>{
document.querySelector('#title').setAttribute("x", titleX.value);
})
//标题坐标Y
let titleY = document.querySelector('input[name="titleY"]');
titleY.addEventListener('input',()=>{
document.querySelector('#title').setAttribute("y", titleY.value);
})
//标题颜色
let titleColor = document.querySelector('input[name="title-color"]');
titleColor.addEventListener('input',()=>{
document.querySelector('#title').style.fill = titleColor.value;
})
//副标题
let subTitle = document.querySelector('input[name="subTitle"]');
subTitle.addEventListener('input',()=>{
document.querySelector('#subTitle').innerHTML = subTitle.value;
})
//副标题坐标X
let subTitleX = document.querySelector('input[name="subTitleX"]');
subTitleX.addEventListener('input',()=>{
document.querySelector('#subTitle').setAttribute("x", subTitleX.value);
})
//副标题坐标Y
let subTitleY = document.querySelector('input[name="subTitleY"]');
subTitleY.addEventListener('input',()=>{
document.querySelector('#subTitle').setAttribute("y", subTitleY.value);
})
//副标题颜色
let subTitleColor = document.querySelector('input[name="subTitle-color"]');
subTitleColor.addEventListener('input',()=>{
document.querySelector('#subTitle').style.fill = subTitleColor.value;
})
let logo_upload = document.querySelector(".logo_upload");
document.querySelector('.logo_upload_btn').addEventListener('click',()=>{
logo_upload.click();
})
logo_upload.addEventListener('change',()=>{
var imgReader = new FileReader();
imgReader.onload = function(evt) {
//console.log(evt.target.result) //图片base64
document.querySelector("#logo").setAttribute("xlink:href",evt.target.result)
}
imgReader.readAsDataURL(logo_upload.files[0]);
})
//宽度
let logoWidth = document.querySelector('input[name="logoWidth"]');
logoWidth.addEventListener('input',()=>{
document.querySelector("#logo").setAttribute("width" , logoWidth.value);
})
//高度
let logoHeight = document.querySelector('input[name="logoHeight"]');
logoHeight.addEventListener('input',()=>{
document.querySelector("#logo").setAttribute("height" , logoHeight.value);
})
//标题坐标X
let logoX = document.querySelector('input[name="logoX"]');
logoX.addEventListener('input',()=>{
document.querySelector('#logo').setAttribute("x", logoX.value);
})
//标题坐标Y
let logoY = document.querySelector('input[name="logoY"]');
logoY.addEventListener('input',()=>{
document.querySelector('#logo').setAttribute("y", logoY.value);
})
//LOGO不透明度
let logoOpacity = document.querySelector('input[name="logoOpacity"]');
logoOpacity.addEventListener('input',()=>{
document.querySelector("#logo").style.opacity = logoOpacity.value;
})
const covertSVG2Image = (node, name, width, height, type = 'png') => {
let serializer = new XMLSerializer()
let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node)
let image = new Image()
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)
let canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
let context = canvas.getContext('2d')
context.fillStyle = '#fff'
context.fillRect(0, 0, 10000, 10000)
image.onload = function () {
context.drawImage(image, 0, 0)
let a = document.createElement('a')
a.download = `${name}.${type}`
a.href = canvas.toDataURL(`image/${type}`)
a.click()
}
}
document.querySelector(".download_btn").addEventListener('click',()=>{
covertSVG2Image(document.getElementById('svg'),"idea_logo",width.value,height.value)
});
