@page "{artistId}/{postId}"
@model Rockifi.Web.Pages.Artists.EditPostPhotoModel
@{ ViewBag.Title = "Edit Post Photo";
ViewBag.MiniNav = true; }
<style>
.cr-slider-wrap {
margin-top: 1.5rem !important;
}
img {
/* This rule is very important, please don't ignore this */
max-width: 100% !important;
}
#cropper-canvas {
height: 600px;
width: 600px;
background-color: #ffffff;
cursor: default;
border: 1px solid black;
}
.active-ratio svg rect {
stroke: #04d98c !important;
}
</style>
<div class="row" style=" justify-content: flex-end; margin-right: 10vw; height: 100px;">
</div>
<div id="editPostSlider" style="height: auto;">
@if (Model.EditingExistingImage)
{
<img id="existing-photo-img" src="@Url.Action("GetArtistPostResource", "ArtistPostContent", new { artistId = Model.ArtistId, postId = Model.PostId, fileName = Model.PhotoSource })" />
}
else
{
<img id="photo-img" src="@Model.PhotoSource" />
}
</div>
<div id="cropper-container" style="display: none; max-height: 50vh !important;">
<canvas id="cropper-canvas">
Your browser does not support the HTML5 canvas element.
</canvas>
</div>
<div style="height: 70px;">
<div class="container d-flex mb-4" id="toggle-aspect-ratio">
<div>
<span class="btn px-0" data-value="1.77777" id="rectangle-aspect" style="width: 50px;">
<svg width: 44px>
<rect x="2" y="12" width="44" height="25"
style="fill:blue;stroke:white;stroke-width:3;fill-opacity:0;stroke-opacity:1" />
</svg>
</span>
<span class="btn px-0" data-value="1" id="square-aspect" style="width: 50px;">
<svg width: 44px>
<rect x="30" y="12" width="44" height="44"
style="fill:blue;stroke:white;stroke-width:3;fill-opacity:0;stroke-opacity:1" />
</svg>
</span>
</div>
</div>
</div>
<div class="container py-4" id="editPost">
<div class="row">
<div class="col-12">
<form id="form" method="post">
<input id="photo-base64" name="imageBase64" type="hidden" />
<input id="photo-file-input" type="file" accept="image/*" hidden />
<div class="row">
<div class="col-12 col-lg-4">
<button class="btn btn-outline-primary btn-block mb-3 mb-lg-0" asp-page-handler="CancelPhotoUpload">Cancel</button>
</div>
<div class="col-12 col-lg-4">
<button class="btn btn-primary btn-block mb-3 mb-lg-0" id="choose-photo-button">Choose photo</button>
</div>
<div class="col-12 col-lg-4">
<button class="btn btn-primary btn-block" id="save-button">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
@section scripts {
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css" integrity="sha512-+VDbDxc9zesADd49pfvz7CgsOl2xREI/7gnzcdyA9XjuTxLXrdpuz21VVIqc5HPfZji2CypSbxx1lgD7BgBK5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js" integrity="sha512-ooSWpxJsiXe6t4+PPjCgYmVfr1NS5QXJACcR/FPpsdm6kqG1FmQ2SVyg2RXeVuCRBLr0lWHnWJP6Zs1Efvxzww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="~/js/jquery-cropper.js"></script>
<script>
let canvas = $("#cropper-canvas");
var context = canvas.get(0).getContext("2d");
$('#choose-photo-button').on('click', function (e) {
e.preventDefault();
$('#photo-file-input').trigger('click');
});
const options = {
aspectRatio: 16 / 9,
dragMode: 'move',
cropBoxMovable: false,
cropBoxResizable: false,
background: false,
guides: false,
center: false
};
var existingImage = @Model.EditingExistingImage.ToString().ToLower();
if (existingImage) {
canvas = $('#existing-photo-img');
canvas.cropper(options);
};
$('#photo-file-input').on('change', function (e) {
var files = e.target.files;
if (files && files[0]) {
var file = files[0];
if (file.type.match(/^image\//)) {
var reader = new FileReader();
reader.onload = function (evt) {
var img = new Image();
img.onload = function () {
context.canvas.height = img.height;
context.canvas.width = img.width;
context.drawImage(img, 0, 0);
var cropper = canvas.cropper(options);
$('#rectangle-aspect').addClass('active-ratio');
$('#square-aspect').removeClass('active-ratio');
}
img.src = evt.target.result;
};
reader.readAsDataURL(file);
$('#editPostSlider').hide();
$('#cropper-container').show();
}
}
});
$(document).on('click', '#toggle-aspect-ratio .btn', function () {
if ($('#photo-file-input').val() || existingImage) {
var aspectRatio = $(this).data('value');
options.aspectRatio = aspectRatio;
//canvas.setAspectRatio(aspectRatio);
//canvas.cropper('setAspectRatio', aspectRatio);
$(this).addClass('active-ratio').siblings().removeClass('active-ratio');
canvas.cropper('destroy').cropper(options);
}
});
$('#save-button').click(function (e) {
e.preventDefault();
var croppedImageDataUrl = canvas.cropper('getCroppedCanvas').toDataURL('image/png');
croppedImageDataUrl = croppedImageDataUrl.replace('data:image/png;base64,', '');
$('#photo-base64').val(croppedImageDataUrl);
$('#form').submit();
})
</script>
}