时间戳

首页 > 解决方案 > 当新图像加载到 beer-reveal 时，Beerslider.js 停止正常工作

javascript - 当新图像加载到 beer-reveal 时，Beerslider.js 停止正常工作

问题描述

我使用beerslider.js显示对象的前后图像。

我想要的是让用户有可能在保存之前预览他们上传的图像。如果他们对结果不满意，他们可以通过上传新/其他图像来更改预览中的图像。但是，当他们使用 beer-reveal 类将新/其他图像上传到 div 元素内的 img-element 时，初始高度与使用 beer-slider 类的 div 中的 img 高度不同，并且当句柄是滑动不仅改变了宽度，还改变了高度。见图片：

第一次工作正常：

但是从第二次上传开始就出错了

我可以根据需要多次更改 div 中的 img src 类“beer-slider”，而不会出现问题。也正是这个图像定义了预览的高度。但是，当我使用“beer-reveal”类更改 div 中的 img src 时，问题就会显现出来。

上面的帽子图片自然大小为708*796，显示为340*382。另一张图片是607*607。

在下面的代码中，首先检查它们是否存在图像 url。如果它们不存在，那么在 beer-slide div 和 beer-reveal div 中将不存在任何 img 元素。永远不会存在一个为空而另一个不为空的 img-url。当用户上传新/其他图像时，这些图像会被发送到服务器进行某些操作，然后再以 base64 图像格式返回并注入新的 img src。

简而言之，我执行以下操作：

// Hook beerslider on jquery-elements:
$.fn.BeerSlider = function ( options ) {
  options = options || {};
  return this.each(function() {
      new BeerSlider(this, options);
  });
};


// I only show the preview-mapping for the first image. It is the same for the second image, except imageReload takes in ".beer-slider" and not ".beer-reveal" as argument:

// When new picture is selected:
$("#file1").on("change", function(e){
  var formData = new FormData();
  var file = this.files[0];
  formData.append("file", file);
  imageReload("https://i.ibb.co/7jxDhcc/nikecom-homepage.jpg",".beer-reveal");
  // AJAX call to server to do something with it
  /*$.ajax({
    url:"/Picture/SomeOperation",
    data: formData,
    type: "POST",
    processData: false,
    contentType: false, 
    success: function(data){
        // data/image is returned in base64 format: (data:image/{mimetype};base64,/9j…Aduuawc8Y6j.....).
        imageReload(data, ".beer-reveal");
  }*/
 });
$("#file2").on("change", function(e){
  imageReload("https://i.ibb.co/YtP8r8j/17mai.jpg",".beer-slider");
 });


function imageReload(data, selectorBefore) 
{
// If parent div contains img-elemnt, remove it:
if($(selectorBefore).find("> img").length)
{
  $(selectorBefore).find("> img").remove();
}
// Add new img-elemnt with img-src as base64:
var img = document.createElement("img");
img.src = data;
img.setAttribute("class", "imageBody");
$(selectorBefore).prepend(img); 
$(".beer-slider").BeerSlider({start: 50});
}

$(document).ready(function(){
  $(".beer-slider").BeerSlider({start: 50});
});
.image-box {
    width: 100%;
}

#imagebody {
    width: 100%;
    height: auto;
}
<link href="https://unpkg.com/beerslider/dist/BeerSlider.css" rel="stylesheet"/>

<!-- Input-elements -->
<!-- Picture before (image that is mapped to div with class "beer-slider") -->
<input id="file2" name="file2" type="file">

<!-- Picture after (image that is mapped to div with class "beer-reveal") -->
<input id="file1" name="file1" type="file">

<!-- Beerslider/preview -->
<div class="image-box">
  <div class="beer-slider" data-beer-label="After">
    <img id="img-slider" class="imagebody"  src="https://i.ibb.co/LnbTfvp/Mr-Bean.jpg">
    <div class="beer-reveal" data-beer-label="Before">
      <img id="img-reveal" class="imagebody" src="https://i.ibb.co/YcD9zqf/1565567946098.jpg">
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/beerslider/dist/BeerSlider.js"></script>

你可以试试！您在本地计算机上选择什么图像并不重要。当您更改了左侧输入时，一切仍然很好，但是当您更改右侧输入时，错误就是事实。

我被困住了，帮助会很可爱。

标签： javascriptjquerycssimage

解决方案

我通过重写 imageReload 函数解决了这个问题：

function imageReload(data, selectorBefore) 
{
   // Remove old image
   if($(selectorBefore).find("> img").length)
   {
      $(selectorBefore).find("> img").remove();
   }
   // Make new image with new src and class
   var img = document.createElement("img");
   img.src = data;
   img.setAttribute("class", "imageBody");

   // Replace the hole beerslider div
   // Is it the before-image?
   var førBilde = selectorBefore.localeCompare(".beer-reveal");
   if(førBilde == 0) // yes
   {
      var srcEtterBilde = $(".beer-slider > img").attr("src");
      img.setAttribute("id", "forhåndsvisning-bilde-før");
      $(".beer-slider").remove();
      var html = '<div class="beer-slider" data-beer-label="Etter">' +
                    '<img class="imagebody" id="forhåndsvisning-bilde-etter"   src="' +srcEtterBilde +'">'+
                       '<div class="beer-reveal" data-beer-label="Før">' +
                       '</div>' +
                 '</div>';
      $(".image-box").append(html);
      $(".beer-reveal").prepend(img);
      $(".beer-slider").BeerSlider({start: 50});
   }
   else // no
   {
      var srcFørBilde = $(".beer-reveal > img").attr("src");
      img.setAttribute("id", "forhåndsvisning-bilde-etter");
      $(".beer-slider").remove();
      var html = '<div class="beer-slider" data-beer-label="Etter">' +        
                    '<div class="beer-reveal" data-beer-label="Før">' +
                       '<img class="imagebody" id="forhåndsvisning-bilde-etter" src="' +srcFørBilde +'">'+
                    '</div>' +
                 '</div>';
      $(".image-box").append(html);
      $(".beer-slider").prepend(img);
      $(".beer-slider").BeerSlider({start: 50});
   }
}

推荐阅读