Как рисовать изображения на холсте и правильно их размер? - PullRequest
Новая
       6

Как рисовать изображения на холсте и правильно их размер?

0 голосов
/ 22 января 2020

У меня проблемы с тем, чтобы мой холст нарисовал img в размере и выглядел точно так же, как и элемент img Каждый раз, когда я пытаюсь придать ему размер, кажется, что он обрезается. Как я могу сделать так, чтобы я получил размер элемента img в пределах jQuery и затем использовал его на своем элементе canvas для точного копирования?

Вот некоторый демонстрационный код; 

jQuery(document).ready(function($) {
	var img = $('.image');
	var canvas = $('.img_canvas');
	canvas.height( img.height() );
	canvas.width( img.width() );

	var context = canvas[0].getContext('2d');
	context.drawImage(img[0], 0, 0);
});
body{
    margin: 0;
}

img{
    width: 100%;
    height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img  src="https://alphacardstore.com/wp-content/uploads/2020/01/placeholder.png" class="image">

<canvas class="img_canvas">
our browser does not support the HTML5 Canvas, please consider updating or changing your browser for a better experience.
</canvas>

Ответы [ 2 ]

1 голос
/ 22 января 2020

есть несколько отключений.

  • Функции jQuery img.width() и img.height() предоставят вам размер изображения внутри DOM, а не фактическое разрешение файла изображения. Для этого есть naturalWidth и naturalHeight .
  • Similary, функции jQuery canvas.height(320) и canvas.width(240) будут устанавливать CSS ширину и высоту, а не разрешение холста. Вам нужно напрямую установить атрибуты width и height элемента canvas dom (не узла jQuery). Представьте себе: у вас может быть холст с разрешением 320x240 пикселей, но вы хотите, чтобы он был полноэкранным с помощью css.
  • drawImage с тремя аргументами, которые всегда будут рисовать изображение в его естественном разрешении. Вы можете передать больше аргументов, чтобы изменить размер изображения.

Таким образом, реальной «проблемой» было определение размера холста на основе размера dom изображения. Надеюсь, это поможет! 

jQuery(document).ready(function($) {
	var img = $('.image');

    var canvas = $('.img_canvas');
    canvas[0].height = img[0].naturalHeight;
    canvas[0].width = img[0].naturalWidth;

    var context = canvas[0].getContext('2d');
    context.drawImage(img[0], 0, 0);    	
});
body{
    margin: 0;
}

img{
    width: 100%;
    height: auto;
}
canvas {
    display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
image:
<img  src="https://alphacardstore.com/wp-content/uploads/2020/01/placeholder.png" class="image">
canvas:
<canvas class="img_canvas">
our browser does not support the HTML5 Canvas, please consider updating or changing your browser for a better experience.
</canvas>
0 голосов
/ 22 января 2020

Это не jQuery, но вы должны понять. Создайте изображение, используя new Image(), а затем в событии load вызовите метод drawImage, одновременно устанавливая атрибуты высоты и ширины для холста из загруженного изображения. 

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            img.image{
                border:2px solid blue
            }
            canvas{
                border:2px solid red;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function(){
                let canvas=document.querySelector('canvas');
                let ctxt=canvas.getContext('2d');

                let oImg=new Image();
                    oImg.onload=function(){
                        canvas.width = oImg.width;
                        canvas.height = oImg.height;
                        ctxt.drawImage( oImg, 0, 0, canvas.width, canvas.height );
                    }

                oImg.src=document.querySelector('img.image').src;
            })
        </script>
    </head>
    <body>
        <img class='image' src="https://picsum.photos/seed/picsum/400/300" />
        <canvas>
            This Web-Browser does not support the "HTML5 Canvas", please consider 
            updating or changing your browser for a better experience.
        </canvas>
    </body>
</html>


document.addEventListener('DOMContentLoaded', function(){
  let canvas=document.querySelector('canvas');
  let ctxt=canvas.getContext('2d');

  let oImg=new Image();
    oImg.onload=function(){
      canvas.width = oImg.width;
      canvas.height = oImg.height;
      ctxt.drawImage( oImg, 0, 0, canvas.width, canvas.height );
    }

  oImg.src=document.querySelector('img.image').src;
})
img.image{
  border:2px solid blue
}
canvas{
  border:2px solid red;
}
<img class='image' src="//alphacardstore.com/wp-content/uploads/2020/01/placeholder.png" />
<canvas>
  This Web-Browser does not support the "HTML5 Canvas", please consider 
  updating or changing your browser for a better experience.
</canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...