Manipulate an image before adding it to a canvas element

Question

Manipulate an image before adding it to a canvas element

Navigation

#1 by (1 votes)

1

I'm adding an image dynamically to a canvas , but I'm not able to resize it correctly.

var img = new Image();
img.src = "http://i.stack.imgur.com/lIaBN.jpg";

function inserir() {
  var canvas = document.getElementById('meuCanvas');
  var heightCanvas = 498;
  var widthCanvas = 598;
  context = canvas.getContext('2d');
  context.strokeStyle = '#000000';
  context.fillStyle = '#fff';
  context.clearRect(1, 1, widthCanvas, heightCanvas);

  var tamanho = document.getElementById('tamanho').value;
  var orientacao = document.getElementById('orientacao').value;

  img.height = tamanho;

  rotacionarImagem(orientacao);

  pintar(context);
}


function pintar(context) {
  context.drawImage(img, 10, 10);
}

function rotacionarImagem(orientacao) {
  switch (orientacao) {
    case "N":
      img.style.Transform = "rotate(0deg)"
      img.style.MozTransform = "rotate(0deg)"
      img.style.webkitTransform = "rotate(0deg)"
      break;
    case "L":
      img.style.Transform = "rotate(90deg)"
      img.style.MozTransform = "rotate(90deg)"
      img.style.webkitTransform = "rotate(90deg)"
      break;
    case "S":
      img.style.Transform = "rotate(180deg)"
      img.style.MozTransform = "rotate(180deg)"
      img.style.webkitTransform = "rotate(180deg)"
      break;
    case "O":
      img.style.Transform = "rotate(270deg)"
      img.style.MozTransform = "rotate(270deg)"
      img.style.webkitTransform = "rotate(270deg)"
      break;
    default:
      break;
  }
}

Virar para:
<select id="orientacao">
  <option value="N">Norte</option>
  <option value="S">Sul</option>
  <option value="L">Leste</option>
  <option value="O">Oeste</option>
</select>
Tamanho (em pixel):
<input id="tamanho" type="text">
<input class="" value="Inserir" onclick="inserir();" type="button">
<canvas id="meuCanvas" width="600" height="500"></canvas>

I actually need to resize it, rotate it, and put it in a specific location of canvas .

I know that the drawImage function has more arguments, but it is difficult to work with them, mainly to rotate the image ...

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height );

img - Specifies the image to use.

sx (optional) - The x coordinate where an image clipping begins.

sy (optional) - The y coordinate where an image clipping begins.

swidth (optional) - The width of the cropped image.

sheight (optional) - The height of the cropped image.

x The x coordinate where to place the image on the screen.

y The y coordinate where to place the image on the screen.

width (optional) - The width of the image to be used (stretch or image reduction)

height (optional) - The height of the image to be used (excerpt or image reduction)

I thought it was easier to create an image with the hidden attribute on my form and after manipulating it add on the canvas, but in this way the image is drawn from the initial form, before starting to manipulate it, the ...

Edit

Using a function found in the English OS I just can not adapt to position in the correct place:

var img = new Image();
img.src = "http://i.stack.imgur.com/lIaBN.jpg";
var orientacao, tamanho, x, y;

function inserir() {
  var canvas = document.getElementById('meuCanvas');
  var heightCanvas = 498;
  var widthCanvas = 598;

  context = canvas.getContext('2d');
  context.strokeStyle = '#000000';
  context.fillStyle = '#fff';
  context.clearRect(1, 1, widthCanvas, heightCanvas);

  tamanho = document.getElementById('tamanho').value;
  orientacao = document.getElementById('orientacao').value;
  x = document.getElementById('x').value;
  y = document.getElementById('y').value;

  context.save();
  rotacionarImagem(canvas, context);
  pintar(context, tamanho);
  context.restore();
}


function pintar(context, tamanho) {
  context.drawImage(img, -x / 2, -y / 2, tamanho, tamanho);
}

function rotacionarImagem(canvas, context) {
  switch (orientacao) {
    case "N":
      angulo = 0;
      break;
    case "L":
      angulo = 90;
      break;
    case "S":
      angulo = 180;
      break;
    case "O":
      angulo = 270;
      break;
    default:
      break;
  }
  context.translate(canvas.width / 2, canvas.height / 2);
  context.rotate(angulo * Math.PI / 180);
}

Virar para:
<select id="orientacao">
  <option value="N">Norte</option>
  <option value="S">Sul</option>
  <option value="L">Leste</option>
  <option value="O">Oeste</option>
</select>
Tamanho (em pixel):
<input id="tamanho" type="text">Posição (x,y):
<input id="x" type="text">
<input id="y" type="text">
<input class="" value="Inserir" onclick="inserir();" type="button">
<canvas id="meuCanvas" width="600" height="500"></canvas>

In this way the image only rotates on the axis itself if the tamanho of the image is the same value of x and y ...

javascript html canvas

asked by anonymous 30.07.2016 / 06:01

1 answer

Does not return all xml results input in PHP with the fields filled in

score 1 · Accepted Answer

The canvas does not recognize HTML properties, so it is no use modifying the styles of the image element.

To rotate the image by its own axis, simply state its center positions in the .translate(...) method, then draw it on the canvas with the position of half the size of itself. Try:

// cria o ângulo da imagem
var angulo = orientacao === 'N' ? 0   :
             orientacao === 'L' ? 90  :
             orientacao === 'S' ? 180 :
                                  270; // O

// transforma o canvas com as posições centrais da imagem
context.translate(x + (tamanho / 2), y + (tamanho / 2));

// rotaciona
context.rotate((angulo * Math.PI) / 180);

// desenha a imagem na metade do seu tamanho negativo
context.drawImage(img, -tamanho / 2, -tamanho / 2, tamanho, tamanho);

// desfaz a rotação
context.rotate((-angulo * Math.PI) / 180);

// destransforma
context.translate(-x - (tamanho / 2), -y - (tamanho / 2));

Based on a answer from one of my questions.