你的IDEA启动图怎么跟我们的不一样啊？？？(续)

前言

前几天发了一篇文章，给大家分享了一下，如何更换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.From

<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>主标题