How to change the border to uploaded image using 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>

I have this snippet, What I want is when any user uploads any photo then red colored part should get replaced by the uploaded photo instead of whole area.

Please help me how to implement it.

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

You can use perspective, transform, transform-origin, as demonstrated by @Ana at 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>

edited May 23 '17 at 12:25

Community

1
1

answered Mar 06 '17 at 06:19

guest271314

1
15
104
177

Working like a champ. Thanks buddy. @guest271314 – Mohammed Mar 06 '17 at 06:39
Can you help me little bit more, how can I create exactly mirror image of same, so that after upload both first trapezoid and mirror image get reflected. @guest271314 – Mohammed Mar 06 '17 at 07:10
could draw the images to ` – guest271314 Mar 06 '17 at 07:24

How to change the border to uploaded image using JavaScript

1 Answers1