Auto adjust image/canvas size to image

This commit is contained in:
Dennis Eichhorn 2017-02-08 18:14:53 +01:00
parent 8bb52a3c40
commit 265f38f5c2
2 changed files with 13 additions and 5 deletions

View File

@ -104,10 +104,19 @@
jsOMS.Modules.Draw.Editor.prototype.initCanvas = function()
{
const img = this.editor.getElementsByTagName('img');
const img = this.canvas.getAttribute('data-src'),
self = this;
if(img.length > 0) {
this.canvas.getContext("2d").drawImage(img[0], 0, 0);
if(typeof img !== 'undefined' && img.length > 0) {
let imgObj = new Image();
imgObj.addEventListener('load', function() {
self.canvas.width = imgObj.width;
self.canvas.height = imgObj.height;
self.canvas.getContext("2d").drawImage(imgObj, 0, 0);
});
imgObj.src = img;
}
};

View File

@ -75,8 +75,7 @@ echo $this->getData('nav')->render(); ?>
<div class="m-draw">
<section class="box wf-100" style="height: 30%;">
<div class="inner resizable">
<img class="hidden" src="<?= $this->request->getUri()->getBase() . $image->getMedia()->getPath(); ?>">
<canvas id="canvasImage resizable" name="image" form="drawForm"></canvas>
<canvas data-src="<?= $this->request->getUri()->getBase() . $image->getMedia()->getPath(); ?>" id="canvasImage resizable" name="image" form="drawForm"></canvas>
</div>
</section>
</div>