Tenho um código que ao abrir as informações do relatório, é criado em Canvas um retângulo em cima de cada imagem. Porém, essas imagens tem tamanhos diferentes, mas o canvas continua o mesmo tamanho. Preciso fazer com que se a área da imagem for 1 o canvas seja desenhado menor, se for 2 desenhe o canvas maior e assim sucessivamente. Meu código está em MVC.
Essa parte é aonde cria o Canvas em cima da imagem:
<script type="text/javascript">
function init(i) {
var img = document.getElementById("foto" + i);
var cs = getComputedStyle(img);
var width = parseInt(cs.getPropertyValue('width'));
var height = parseInt(cs.getPropertyValue('height'));
$('#contentCanvas' + i).html('<canvas id="myCanvas' + i + '" width="' + width + '" height="' + height + '" >');
drawImg(img, cs, width, height, i);
}
function drawImg(img, cs, width, height, i) {
var myCanvas = 'myCanvas' + i;
var canvas = document.getElementById(myCanvas);
var c = document.getElementById(myCanvas);
var ctx = c.getContext("2d");
var context = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
drawRetangle(context, width, height);
}
function drawRetangle(context, width, height) {
position_x = parseInt(width) / 2;
position_y = parseInt(height) / 2;
position_x = parseInt(position_x) - 20;
position_y = parseInt(position_y) - 17;
context.beginPath();
context.rect(position_x, position_y, 39, 34);
context.lineWidth = 1;
context.strokeStyle = '#00FF00';
context.stroke();
}
</script>
Essa é a parte que eu chamo o Canvas em HTML:
<img id="foto<?= $key ?>" alt="img" src="http://meusite.com.br/imgs/<?= $l->img_caminho ?>" onload='init(<?= $key ?>);'>
Como que eu faço para que nesse código ele verifica o tamanho da área e conforme o valor aumente ou diminua o tamanho do Canvas?
CSS
. Seuc
é a variável que recebe ocanvas
. Façac.style.width = LARGURA
ec.style.height = ALTURA
. Você faz a verificação do tamanho da imagem e defini um valor para ocanvas
dependendo do que você precisa.ajax
para fazer uma consulta no banco de dados.ID
para a imagem ? Se sim, esseID
é o que você passa como parâmetro na funçãoinit()
?