时间戳

首页 > 解决方案 > 上传后在图像上添加图像

javascript - 上传后在图像上添加图像

问题描述

我正在尝试创建一个网站，您可以在其中上传图像，然后选择另一个并将其添加到上传的图像上。我正在使用 jquery 使图像可拖动和调整大小并且一切正常，除了我无法将它添加到上传的图像上。这是我的代码：

代码：

$(document).ready(function() {
  $(document).on('click', '.block-add', function() {
    var a = $(this);
    var src = a.find('img:first').attr('src');
    var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
    $('.block').append(elem);
    elem.draggable();
    elem.find('.blocks:first').resizable();
    return false;
  });
});
.blocks {
  width: 10%;
  z-index: 9999;
}

.block {
  width: 100%;
  height: 100%;
  border: 1px solid #C8C8C8;
  margin: 0px;
  background-color: #F0F0F0;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload">
  <input type='file' onchange="readURL(this);" /> <br>
</div>
<br/>
<div class="block">
  <div class="background">
    <img id="bg" src="" alt="" width="50%" ; height="50%" ; class="center" />
  </div>
</div>
<br/>
<div id="existingImges">
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
</div>

所以这是这种情况下的结果： 在此处输入图像描述

这是添加轮子后我想要的： 在此处输入图像描述

标签： javascriptjqueryhtmlcss

解决方案

.block-add {z-index: 99;}
/* just increase the z-index of the wheel so it can be in front of the car image */

推荐阅读