尝试向cropper显示图像。图像URL在html-src属性中，但图像没有出现。当我点击编辑按钮时，我需要在cropper中显示当前图像(编辑按钮上方的图像)。这样我就可以裁剪出我想要的图像部分。裁剪图像后，如果我点击更新按钮，它应该会更新。请帮我完成。
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">×</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>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">×</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>