Как получить непрямоугольную форму с помощью getImageData ()?

Question

Тег html5 canvas имеет функцию javascript getImageData (), и его возвращаемое значение представляет собой прямоугольник, содержащий вложенные пиксели.

Но вместо прямоугольника мне нужно вернуть из моего оригинального холста изображение в форме треугольника, окруженное выбранными точками.

Кто-нибудь знает, как получить изображение в форме треугольника из холста html5?

Answer 1

Если это в целях эффективности, то нет вы не можете получить непрямоугольную форму, используя getImageData().Однако, если вам нужна функциональность, вы можете обрезать примерно так ( Пример JS Lint ):

var img1 = new Image();
img1.onload = function(){
    var w = img1.width
    var h = img1.height

    ctx.drawImage(img1,0,0);

    // Create a circular clipping path 
    ctx.translate(w / 2,  1.5 * h);       
    ctx.beginPath();
    ctx.arc(0,0,100,0,Math.PI*2,true);
    ctx.clip();
    ctx.drawImage(img1,-w / 2,-150);
}

img1.src = "foobar.jpg";

То, что вы получите, является оригиналом, а затемобрезанная версия.Вы можете делать это каждый раз, когда загружаете изображение.Кроме того, вы можете создать изображение, создав второй холст, рисуя его, но с клипом.По сути, это создает кэшированную версию вашего изображения, она по-прежнему представляет собой прямоугольник, но клип делает все, что находится за пределами клипа, прозрачным (, если хотите, я тоже могу привести пример этого см. Здесь ).

Answer 2

Обратите внимание, что все изображения имеют прямоугольную форму. getImageData возвращает данные растрового изображения, поэтому это будет массив байтов 2x2. Что вы можете сделать, это нарисовать путь с нужными точками и обрезать содержимое холста, используя его. Это будет как изображение PNG с прозрачными пикселями в качестве фона.

Answer 3

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

возможно, поиск пути, области отсечения,заполнения

Answer 4

Вы не можете.

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

Другими словами, если ваш треугольник имеет точки в (50,50), (100, 100) и (0,100), то получите прямоугольник из (0,50), который имеет ширину 100 свысота 50. Тогда используйте только те изображения, которые вам нужны.

Если вы буквально хотите треугольное изображение, ну, таких не существует.