上传图片可选择水印切换图片显示宽度自适应

冷不防 2022-06-13 13:09 253阅读 0赞

上传图片可选择水印切换  图片显示宽度自适应

这是我平时写手机端的一个活动项目，在上传图片的时候能选择水印切换，让参与者选择自己喜欢的水印，上传图片后 ，图片显示宽度自适应，这样使图片在设定宽度以内最大的显示图片。让上传者更好的看到效果。

代码如下：

css

.meJoinBox{ width: 100%; min-height: 100vh;position: relative; background: url("../images/meJoinbk.png") center top no-repeat;
    background-size: 100% 97vh; padding: 5vh 0 17vh;color: #ae8012;font-size: 14px; }
    .meJoinH{ width: 90% ;margin: 0 auto 4vh;}
    .meForm{ width: 90%;margin: 0 auto; padding: 0 15px;}
    .meForm p{
      line-height: 30px;margin-bottom: 10px;}
    .meForm p span:first-of-type{
      display: inline-block; width: 26%; font-weight: bold;}
    .meForm p .commonIns{ display: inline-block;background: rgba(241,206,124,.7); width: 72%; height: 30px;  border: 1px solid #ae8012; float: right;}
    .meForm p .commonIns input{
      background: transparent;outline: none; border: none; width: 100%; line-height: 20px; color: #ae8012;height: 30px;padding: 2% 10px;
    font-size: 14px;}
    .meForm p .commonIns1{
      width: 72%; display: block;float: right;background: rgba(241,206,124,.7);border: 1px solid#ae8012;}
    #meSay{ width: 100%;height: 90px;background: transparent; line-height: 20px;padding: 10px;font-size: 14px;color: #ae8012; border: none;  outline: none; }
    #meSay::-webkit-input-placeholder{
      color:#ae8012;}
    .meForm em{
      opacity: 0;}
    .imgBox .imgBoxL{ width: 26%;font-weight: bold;}
    .imgBox .imgBoxR{ width: 72%; }
    .imgBoxRh li{ width: 32%; float: left; height: 7vh;background: #f1ce7c;border: 1px solid #ae8012;}
    .imgBoxRh li.on{
      border: 1px solid #ff6529;}
    .imgBoxRh li:nth-of-type(2){ margin: 0 2%;}
    .loadBox{
      width: 100%;height: auto; background: #f1ce7c ;border: 1px solid #ae8012; margin-top: 10px; position: relative;}
    .center{
      text-align: center;margin: 30px 0;}
    .center img{ width: 40px;}
    .result span{ display: block; position:absolute; z-index: 999;}
    .result .sytop{ width: 96%;height: 30px; background: url("../images/sy1.png") center top no-repeat; background-size: 100%;  top: 5px; left: 2%;}
    .result .sybm{ width: 100%;height: 50px; left: 0;bottom: 0;}
    .result.on1 .sybm{ background: url("../images/sy2.png") center bottom no-repeat;background-size: 100%;}
    .result.on2 .sybm{ background: url("../images/sy3.png") center bottom no-repeat;background-size: 100%;}
    .result.on3 .sybm{ background:transparent;}
    
        /*显示上传的图片*/ #picShowBox{
      overflow: hidden;}
    .result{
      position: relative; background: #eee; width:100%;float: left;height: auto; overflow: hidden; text-align: center;}
    .result img{ margin: 0 auto; width:100% ;display: block;}
    .delete{
      position: absolute; top:0px;right: 4px; z-index:9999;width: 30px;height: 30px;
        background: url(../images/delete.png) right 4px no-repeat;background-size: 20px 20px;}
    .fileIco{
      width:100%;height:100%; position: absolute; top: 0; left: 0; }
    .img_b{  width: 48%;position: relative; }
    .fileInput{ width: 100%;height: 100%; opacity: 0; }
    .tc{
      position: relative;width: 100%;text-align: center; z-index: 10;}
    .imgBox{  margin: 20px 0; }
    .imgBoxH3{
      color: #1c8f82;font-size: 14px; font-weight: normal; margin-bottom: 5px;}
    .imgBoxH3 span{ color: #b2b2b2; line-height: 30px; }
    #imgBox1_1{ margin:0 auto; }
    #submit3{ width: 70%; margin: 20px auto 0; }

html

window.onload = function() {
        //input上传图片 var picShowBox = document.getElementById("picShowBox"); //获取显示图片的div元素 var input = document.getElementById("actGroupErwei");//获取选择图片的input元素 var number=1;     //最多上传图片的数量 imgUpload(input,picShowBox,number);
    };