如何使用 JavaScript 更改上传图片的边框

Question

function readURL(event){
   var getImagePath = URL.createObjectURL(event.target.files[0]);
   $('#trapezoid').css('background-image', 'url(' + getImagePath + ')');
  }

#clock{
     background-image:url('');
     background-size:cover;
     background-position: center;
     height: 250px; width: 250px;
     border: 1px solid #bbb;
   }
      
      #trapezoid {
 border-bottom: 30px solid red;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 height: 80px;
 width:35px;
   -webkit-transform: rotate(93deg);
  -moz-transform: rotate(93deg);
  -o-transform: rotate6(93deg);
  -ms-transform: rotate(93deg);
  transform: rotate(93deg);
  float="left";
  display="inline-block"
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

  <input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/> 
  <div id="trapezoid">
  </div>
  
</body>
</html>

我有这个片段，我想要的是当任何用户上传任何照片时，红色部分应该被上传的照片而不是整个区域替换。

请帮我实现一下。

Answer 1

您可以使用 perspective、transform、transform-origin，正如@Ana 在 Matrix 3d transform for obtaining trapezoid?

所展示的

function readURL(event) {
  var getImagePath = URL.createObjectURL(event.target.files[0]);
  $("#trapezoid").css("background", "url(" + getImagePath + ")")
}

.doors {
  margin: 7em auto;
  width: 16em;
  height: 16em;
  perspective: 10em;
  position: absolute;
  top: -50px;
}

#trapezoid {
  display: inline-block;
  width: 50%;
  height: 100%;
  background: red;
}

.doors #trapezoid {
  transform-origin: 0 50% 0;
  transform: rotateY(93deg);
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>

  <input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/>
  <div class="doors">
    <div id="trapezoid">
    </div>
  </div>

</body>

</html>

如何使用 JavaScript 更改上传图片的边框

How to change the border to uploaded image using JavaScript

javascript

css

image-upload