时间戳

首页 > 解决方案 > 无法在裁剪区域显示图像

javascript - 无法在裁剪区域显示图像

问题描述

试图将图像显示给裁剪器。图片 URL 在 html src 属性中，但图片没有出现。当我单击编辑按钮时，我需要在裁剪器中显示当前图像（编辑按钮上方的图像）。所以我可以裁剪我想要的图像部分。裁剪图像后，如果我单击更新按钮，它应该会更新。请帮我完成。

window.onload = function() {
  'use strict';

  const noImage = 'https://via.placeholder.com/200x65';
  var Cropper = window.Cropper;
  var URL = window.URL || window.webkitURL;
  var container = document.querySelector('.img-container');
  var image = container.getElementsByTagName('img').item(0);
  var cropBtn = document.querySelector('#crop-btn');
  var rotate = document.querySelector('#rotate');
  var resetImage = document.querySelector('#reset');
  var zoomIn = document.querySelector('#zoomIn');
  var zoomOut = document.querySelector('#zoomOut');
  var deleteCofirmBtn = document.querySelector('#deleteCofirmBtn');
  var profilePicture = document.querySelector('#profilePicture');
  var deleteLinkContainer = document.querySelector('.deleteProfileImgWrap');
  var modal = $('#modal');
  var croppable = false;
  var options = {
    aspectRatio: 3 / 1,
    viewMode: 1,
    cropBoxResizable: false,
    guides: false,
    minContainerWidth: 300,
    minContainerHeight: 200,
    minCropBoxWidth: 200,
    minCropBoxHeight: 65,
    movable: true,
    preview: '.img-preview',
    ready: function() {
      croppable = true;
    },
  };
  var cropper = new Cropper(image, options);
  var originalImageURL = image.src;
  var uploadedImageType = 'image/jpeg';
  var uploadedImageName = '';
  var uploadedImageURL;

  var inputImage = document.getElementById('editImage');


  inputImage.addEventListener('click', function() {

    const old_image = profilePicture;
    image.src = old_image.src;
    modal.modal({
      backdrop: 'static'
    });
    cropper.destroy();
    cropper = new Cropper(image, options);


    console.log(`success`);

  });

  rotate.addEventListener('click', function() {
    cropper.rotate(90);
  });

  reset.addEventListener('click', function() {
    cropper.reset();
  });

  zoomOut.addEventListener('click', function() {
    cropper.zoom(-0.1);
  });

  zoomIn.addEventListener('click', function() {
    cropper.zoom(0.1);
  });

  deleteCofirmBtn.addEventListener('click', function() {
    profilePicture.src = noImage;
    $(".deleteProfileImgWrap").hide();
    $('.file-upload-label').parent().fadeIn();
    deleteLinkContainer.style.display = 'none';
  });

  cropBtn.addEventListener('click', function() {
    let roundedCanvas;

    let imgSrc = cropper.getCroppedCanvas({

      width: 200,
      height: 65
    }).toDataURL();
    deleteLinkContainer.style.display = 'block';

    profilePicture.src = imgSrc;

  });


}
@media(max-width: 767px) {
  .profile-picture-wrap {
    padding: 10px !important;
  }
}

.profile-picture-wrap {
  padding: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.upload-button {
  font-size: 1.2em;
}

.file-upload {
  display: none !important;
}

.file-upload-label {
  color: #007bfc;
  font-weight: normal;
  cursor: pointer;
}

#profilePicture {
  cursor: pointer;
}

.file-upload-label:hover {
  font-weight: bold;
}

.profile-pic {
  cursor: pointer;
  width: 200px;
  height: 65px;
}

.profile-pic-wrap {
  border: 1px solid #ccc;
  padding: 30px 14px;
}

.my-profile-wrp p {
  margin-bottom: 25px;
}


/* Cropper css */

.cropper-view-box,
.cropper-face {
  border-radius: unset;
}

.profile-picture-wrap {
  display: inline-block;
  position: relative;
}

.profile-picture-wrap img {
  border-radius: 0%;
}

.p-image {
  position: unset;
}

.cropper-container {
  margin-right: auto;
  margin-left: auto;
}

.deleteProfileImgWrap {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet">
  <script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js">
  </script>
</head>

<body>
  <div class="profile-picture-wrap">
    <img id="profilePicture" src="https://cdn.paperindex.com/piimages/left-column/large-pool-of-suppliers.jpg" alt="Profile Picture">
    <p id="editImage" class="text-center"><a href="#">Edit</a></p>
  </div>
  <p class="mrgn-top-4 deleteProfileImgWrap"><a href="#" class="link fnt-14" data-toggle="modal" data-target=".delete-confirm">Delete Photo</a>
  </p>
  </div>
  </div>
  </div>
  </div>
  </form>
  </div>
  </div>
  </div>

  </div>

  </div>
  </div>
  <div class="mrgn-top-100"></div>
  <!--topbar-header-wrap-->
  </main>
  <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">

          <button class="close" data-dismiss="modal" type="button">×</button>
          <h4 class="modal-title">Crop Your Photo</h4> <span></span>
        </div>
        <div class="modal-body">
          <div class="img-container text-center">
            <img id="image" src="" alt="Picture" style="width: 100%;max-height: 300px;">
            <div class="mrgn-top-15">
              <div class="btn-group">
                <button id="zoomIn" type="button" class="btn btn-default"><i data-toggle="tooltip"
                                        title="Zoom In" class="fa fa-search-plus" aria-hidden="true"></i></button>
                <button id="zoomOut" type="button" class="btn btn-default"><i data-toggle="tooltip"
                                        title="Zoom Out" class="fa fa-search-minus" aria-hidden="true"></i></button>
                <button id="rotate" type="button" class="btn btn-default"><i data-toggle="tooltip"
                                        title="Rotate" class="fa fa-repeat" aria-hidden="true"></i></button>
                <button id="reset" type="button" class="btn btn-default"><i data-toggle="tooltip"
                                        title="Reset" class="fa fa-refresh" aria-hidden="true"></i></button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" id="crop-btn" class="btn btn-default" data-dismiss="modal">Add
                        Photo</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-dismiss="modal" type="button">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <!-- leftbox -->
          <div class="box-2">
            <div class="result"></div>
          </div>
          <!--rightbox-->
          <div class="box-2 img-result hide">
            <!-- result of crop -->
            <img alt="" class="cropped" src="#"></div>
          <!-- input file -->
          <div class="box">
            <div class="options hide">
              <input class="img-w" type="hidden">
            </div>
            <!-- save btn -->
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button><button class="btn save hide" data-dismiss="modal">Update</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.paperindex.com/bootstrap/js/bootstrap.min.js">
  </script>
  <script src="https://cdn.paperindex.com/js/header/pi-header-functions.js">
  </script>
</body>

</html>

标签： javascripthtmlcss

解决方案

function getRoundedCanvas(sourceCanvas) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  /* var width = sourceCanvas.width;
  var height = sourceCanvas.height; */
  var width = 100;
  var height = 100;

  canvas.width = width;
  canvas.height = height;
  context.imageSmoothingEnabled = true;
  context.drawImage(sourceCanvas, 0, 0, width, height);
  context.globalCompositeOperation = 'destination-in';
  context.beginPath();
  context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
  context.fill();
  return canvas;
}

window.addEventListener('DOMContentLoaded', function() {
  var image = document.getElementById('image');
  var button = document.getElementById('button');
  var result = document.getElementById('result');
  var croppable = false;
  var cropper = new Cropper(image, {
    aspectRatio: 1,
    viewMode: 1,
    minContainerWidth: 300,
    minContainerHeight: 200,
    minCropBoxWidth: 100,
    minCropBoxHeight: 100,
    ready: function() {
      croppable = true;
    },
  });

  button.onclick = function() {
    var croppedCanvas;
    var roundedCanvas;
    var roundedImage;

    if (!croppable) {
      return;
    }

    // Crop
    croppedCanvas = cropper.getCroppedCanvas();

    // Round
    roundedCanvas = getRoundedCanvas(croppedCanvas);

    // Show
    roundedImage = document.createElement('img');
    roundedImage.src = roundedCanvas.toDataURL()
    result.innerHTML = '';
    result.appendChild(roundedImage);
  };
});
img {
  max-width: 100%;
}

.cropper-view-box,
.cropper-face {
  border-radius: 50%;
}

.cropper-point.point-se {
  height: 5px !important;
  width: 5px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://fengyuanchen.github.io/cropperjs/css/cropper.css" rel="stylesheet" />
<script src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <div id="result"></div>
      <a href="#" data-toggle="modal" data-target="#myModal">Edit</a>
    </div>
  </div>
</div>
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div>
          <img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture">
          <!-- <img id="image" src="https://d1shuhu6tm6s0s.cloudfront.net/piimages/find-suppliers/Paper_Manufactures_PaperIndex_Map.png" alt="Picture">
                  </div> -->
        </div>
        <div class="modal-footer">
          <button id="button" type="button" class="btn btn-success" data-dismiss="modal">Update</button>
        </div>
      </div>
    </div>
  </div>

推荐阅读