For someone need a solution to this Issue i have do this and its work perfec for me :
In my context i create an File Upload in my form, for dowload multiple image at same time and resize it to a custom height with this method :
Html & Razor :
<div class="col-3">
@Html.Label("Importation des Images", "Importation des Images", new { @class = "form-label" })
<br />
<input type="file" id="insertImageButton" class="form-control-sm" accept=".jpg,.jpeg,.png,.bmp,.svg" multiple />
</div>
<div class="col-3">
@Html.Label("Hauteur des images", "Hauteur des images", new { @class = "form-label" })
<br />
@Html.TextBox("ImageMaxHeight", 220, new { @class = "form-control" })
</div>
Jquery :
document.getElementById("insertImageButton").addEventListener('change', onInsertImage);
function onInsertImage(args) {
ImportImages = $(this)[0].files;
for (var key in ImportImages) {
if (typeof (ImportImages[key]) === 'object') {
var path = ImportImages[key];
LoadFileReader(path, "" + key);
}
}
}
function LoadFileReader(path, index) {
var reader = new FileReader();
reader.onload = function (frEvent) {
RotateImage90RightAndResize(frEvent, index);
};
reader.readAsDataURL(path);
}
function RotateImage90RightAndResize(frEvent, index) {
var base64data = frEvent.target.result;
var image = document.createElement('img');
image.setAttribute('crossorigin', 'anonymous');
var heightMax = 220; // default resized Height
//widthMax 172 //if necessary the same its possible with the Width
var ImageMaxHeight = $("#ImageMaxHeight") //this is my textbox on my form
if (ImageMaxHeight.length > 0) {
var tmpHeight = ImageMaxHeight.val();
if (tmpHeight > 0) {
heightMax = tmpHeight;
}
}
image.addEventListener('load', function () {
//Here we create a canvas an we rotate the image to 90° right to resolved the issue
var offScreenCanvas = document.createElement('canvas');
offScreenCanvasCtx = offScreenCanvas.getContext('2d');
offScreenCanvas.height = image.height;
offScreenCanvas.width = image.width;
offScreenCanvasCtx.drawImage(image, 0, 0, image.width, image.height);
offScreenCanvasCtx.save();
offScreenCanvasCtx.translate(offScreenCanvas.width / 2, offScreenCanvas.height / 2)
offScreenCanvasCtx.rotate(90 * Math.PI / 180);
offScreenCanvasCtx.translate(-offScreenCanvas.width / 2, -offScreenCanvas.height / 2)
offScreenCanvasCtx.restore();
var ratio = heightMax / this.height
var height = this.height * ratio;
var width = this.width * ratio;
var base64Canvas = offScreenCanvas.toDataURL("image/jpeg"); //If an Issue the image are Full Black or Error Icon
//Sending the image rotated to the DocumentEditor and insert it.
LoadImageOnDocEditor(base64Canvas, width, height, index);
});
image.src = base64data;
}
function LoadImageOnDocEditor(base64Canvas, width, height, index) {
var documenteditorElement = document.getElementById('DocumentEditor');
container = documenteditorElement.ej2_instances[0];
documenteditor = container.documentEditor;
documenteditor.editor.insertImage(base64Canvas, width, height);
documenteditor.editor.insertText("\t");
}
Regard
