Обрезка изображения линиями

Katerina23 · August 13, 2017

Существует специальная функция которая рисует изображение drawImage и её перегруженный вариант которая делает обрезку изображения и принимает она 8 параметров.

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Можно ли как ни-будь сделать обрезку изображения не таким способом, а с помощью линий (lineTo).
Вот сам код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Загрузка картинки</title>
 
<script>
var canvas, ctx, img;
window.onload = function()
{
canvas = document.getElementById("drawingCanvas");
ctx = canvas.getContext("2d");
var img = new Image();
img.src = "img2.jpg";
img.onload = function()
{
   ctx.drawImage(img, 50, 50, 300, 200);
   ctx.beginPath();
   ctx.moveTo(50, 50);
   ctx.lineTo(150, 50);
   
   ctx.moveTo(150, 50);
   ctx.lineTo(150, 150);
   
   ctx.moveTo(150, 150);
   ctx.lineTo(50, 150);
   
   ctx.moveTo(50, 150);
   ctx.lineTo(50, 50);
   
   ctx.strokeStyle = "white";
   ctx.stroke();
}
}
</script>
</head>
<body>
<canvas id="drawingCanvas" style="background:#444444" width="400px" height="300px"></canvas><br>
</body>
</html>

В итоге получается вот, что

img.jpg.0e04755c580ed6e0e5292870f60e8eef.jpg

Надо всю картинку убрать и оставить только в прямоугольной области.

P.S. Подобный пример в ActionScript делается с помощью масок, а в html 5 масок нет по крайне мере я не нашла не одной статьи где упоминались маски в html 5.

Igor Schnaider · August 14, 2017

// lineTo...
ctx.clip();
ctx.drawImage(...);

Katerina23 · August 14, 2017

Теперь хочу сделать перемещение с помощью мыши. Но функция rect не перемещается а просто очищает указанную область.

Вот пример моего кода.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Загрузка картинки</title>
 
<script>
var canvas, ctx, img;
window.onload = function()
{

var img = new Image();
img.src = "img2.jpg";
var offsetX;
var offsetY;
var startX;
var startY;
var BB;
var x = 50;
var y = 50;
var dragok = false;


img.onload = function()
{
   
   canvas = document.getElementById("drawingCanvas");
   ctx = canvas.getContext("2d");
   BB = canvas.getBoundingClientRect();
   offsetX = BB.left;
   offsetY = BB.top;
   
   draw();
   
   canvas.onmousedown = myDown;
   canvas.onmouseup = myUp;
   canvas.onmousemove = myMove;
   
}
function draw()
{
     clear();
    
     ctx.beginPath();
     ctx.moveTo(x,y);
     ctx.lineTo(x+50,y);
     ctx.lineTo(x+50,y+50);
     ctx.lineTo(x,y+50);
     ctx.strokeStyle = "white";
     ctx.stroke();
     ctx.closePath();
     ctx.clip(); 
     
     ctx.drawImage(img, x, y, 300, 200); 
}                                         

function clear()
{
  ctx.clearRect(0,0,canvas.width, canvas.height);
}
function myDown(e)
{
    var mx = parseInt(e.clientX-offsetX);
    var my = parseInt(e.clientY-offsetY);
    dragok=false;
    
    if(mx>x && mx<x+50 && my > y && my < y+50)
    {
        dragok=true;
    }
    startX = mx;
    startY = my;
    
   
}
function myUp(e)
{
   //Функция если кнопка мыши отпущена
   //....
}

function myMove(e)
{
    if(dragok)
    {
          var mx = parseInt(e.clientX-offsetX);
          var my = parseInt(e.clientY-offsetY);
          var dx = mx-startX;
          var dy = my-startY;
          x+=dx;
          y+=dy
          draw();
          startX = mx;
          startY = my;
    }
}


}
</script>
</head>
<body>
<canvas id="drawingCanvas" style="background:#444444" width="400px" height="300px"></canvas><br>
</body>
</html>

Igor Schnaider · August 14, 2017

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/restore

Как-то так:

Katerina23 · August 15, 2017

Картинка остается на месте, а движется только вырезанная область, а мне нужно чтобы картинка двигалась тоже.

Я сделала видео в качестве примера, он находится во вложенном файле. Сам пример был реализован на ActionScript.

Video.rar

Igor Schnaider · August 16, 2017

Ну тогда проще все-таки через drawImage() делать. Либо, если не прямоугольная обрезка нужна, сначала обрезать, а потом использовать get/putImageData.

Katerina23 · August 16, 2017

Вот так работает, правда притормаживает. В любом случае этот способ вряд ли пригодится, если один объект тормозит, что будет с остальными их может быть сотни на холсте.

function draw()
{
     clear();
     ctx.globalCompositeOperation = "source-over";
     ctx.drawImage(img, x, y, 300, 200); 
     ctx.globalCompositeOperation = "destination-in";
     ctx.beginPath();
     ctx.moveTo(x,y);
     ctx.lineTo(x+50,y);
     ctx.lineTo(x+50,y+50);
     ctx.lineTo(x,y+50);
     ctx.lineTo(x,y);
     ctx.fillStyle = "white"; 
     ctx.fill(); 
     ctx.closePath();
}

P.S. Прочитала про get/putImageData., правда их еще не использовала. Пишут что они очень ресурсоемкие и без надобности их лучше не использовать.

Edited August 16, 2017 by Katerina23

Igor Schnaider · August 16, 2017

Зачем тут вообще globalCompositeOperation. Используйте параметры самой функции drawImage:

// utility function
function drawPuzzle(sx, sy, dx, dy) {
  ctx.drawImage(img, sx, sy, puzzleSize, puzzleSize, dx, dy, puzzleSize, puzzleSize);
}

img.onload = () => {
  // from image: x=100, y=50
  // to canvas: x=0, y=0
  drawPuzzle(100, 50, 0, 0);

  // etc...
  drawPuzzle(0, 150, puzzleSize, 0);
};

Katerina23 · August 20, 2017

А если например мне нужно вырезать изображения круглой формы используя метод arc. Или же треугольной использую три линии lineTo. То стандартный набор свойств drawImage мне не поможет. Во flash все было проще, используешь функцию setMask и применяешь маску любой формы, какой захочешь.

P.S. globalCompositeOperation не сработал если изображение спрятать друг от друга то когда они будут находится рядом то одно изображение будет отображаться на другом.

Igor Schnaider · August 22, 2017

В 20/08/2017 в 09:02, Katerina23 сказал:

А если например мне нужно вырезать изображения круглой формы используя метод arc. Или же треугольной использую три линии lineTo.

Читайте выше.

Katerina23 · August 22, 2017

А есть ли способ взять картинку разрезать её и сохранить кусочки в папку например image1.jpg, image2.jpg, image3.jpg и т.д.?

Sign In

Обрезка изображения линиями

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information