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

Как обрезать холст по бокам?

0 голосов
/ 02 декабря 2018

Привет всем, я недавно работаю над проектом, и я использую HTML5, CSS3 и javascript.

У меня есть элемент , и я передаю , захваченное веб-камерой. 

var myCanvas, videoElement, frame;

Я использую библиотеки p5Js для подачи изображения в каждый кадр, используя следующий код: 

function setup()
    myCanvas = createCanvas(w,h);
    //...(setId(), setParent(),)
    videoElement = createCapture(VIDEO);
    //...(setParent(), setId(), setSize())
}
function draw(){

   frame = image(videoElement, 0, 0, canvasWidth,  canvasHeight);    
}

Мой вопрос заключается в том, как обрезать края холста, как показано на рисунке 1ниже:

Figure 1

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

Сейчас я использую CSS ниже, но это не совсем то, что я ищу: 

document.getElementById("editingCanvas-element").style.border = "1px solid black";
document.getElementById("editingCanvas-element").style.borderRadius = "100px 100px";

Любая помощь будет полезна, спасибо.

1 Ответ

0 голосов
/ 02 декабря 2018

Сначала вам нужен меньший элемент canvas, поэтому вам нужно определить его в настройке.Предположим, вы знаете, сколько вы хотите обрезать, ширина вашего холста должна быть w - 2*crop

Затем при рисовании видео: frame = image(videoElement, -crop, 0, canvasWidth, canvasHeight); Надеюсь, это то, что вам нужно. 

function setup()
    myCanvas = createCanvas(w - 2*crop,h);
    //...(setId(), setParent(),)
    videoElement = createCapture(VIDEO);
    //...(setParent(), setId(), setSize())
}
function draw(){

   frame = image(videoElement, -crop, 0, canvasWidth,  canvasHeight);    
}
...