Обрезание нескольких изображений в холсте HTML5

-1

Я работаю над холстом HTML5 с манипуляциями с изображениями. На моем холсте у меня есть количество изображений. Когда я хочу обрезать изображения по отдельности. Но когда я зажимаю одно изображение, создавая форму и использую функцию clip(), она работает нормально. Но проблема возникает, когда я пытаюсь закрепить другое изображение, используя тот же метод. Поскольку холст хранит предыдущую форму, он будет конкатенацией с новой и соответствующим образом скопируйте второе изображение. Я хочу уничтожить предыдущую форму. Обратите внимание, что я не могу использовать clearRect(), чтобы очистить холст, поскольку мое предыдущее обрезанное изображение есть.Обрезание нескольких изображений в холсте HTML5

Пожалуйста реф ссылку:

Demo Problem

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

Теперь перетащите другое изображение в холст в другой коробке. Теперь вы можете видеть, что обрезка не работает должным образом.

Вот что я сделал в сценарии:

JS Script

Здесь JSFiddle Link

JSFiddle Link

Можете ли вы помочь мне решить эту проблему? Будет полезно, если вы найдете другой способ очистки предыдущей формы.

Заранее спасибо.

источник

2014-09-23 Tatha

Я хотел бы помочь, но мой АВ сказать не идти на ваши ссылки, потому что они известны, содержащие вирусы, размещать свои примеры на JSFiddle – QBM5

ли вы пропустили, что вы должны были использовать сохранение/восстановление до/после отсечения? Может быть, вы просто не поняли, что холст - это машина состояния. Вы должны сами следить за состоянием холста. – GameAlchemist

@GameAlchemist. +1 Я подозреваю, что ты прав, что Татха нуждается в спасении/восстановлении. Чтобы уточнить ваш вопрос: Предыдущие области отсечения будут сохраняться для всех новых чертежей. Чтобы избежать этой настойчивости, прежде чем обрезать, сделайте 'context.save()', а затем создайте контекст.restore() ', когда вы закончите обрезку и рисование. Таким образом, вы можете применить новый клип для новых чертежей. – markE

У меня есть проблема по отдельности. В холсте не предусмотрен параметр множественного изображения. Поэтому, если вы хотите обрезать несколько изображений в своем холсте, вам нужно использовать свою собственную функцию клипа. Просто очистите область от clearRect() от холста за пределами вашего выбора. Итерируйте этот процесс для каждого изображения, и все готово!

Решение Ссылка:

Solution Demo

JS Script Ссылка:

JS Script

Спасибо.

источник

2014-09-24 12:58:18 Tatha

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

var c = document.getElementById("myCanvas"); 
 
var ctemp = document.getElementById("myCanvasTemp"); 
 

 
var ctx = c.getContext("2d"); 
 
var ctxTemp = ctemp.getContext("2d"); 
 

 
ctxTemp.fillStyle = "red"; 
 
ctxTemp.fillRect(10, 10, 50, 50); 
 

 
ctxTemp.fillStyle = "blue"; 
 
ctxTemp.fillRect(20, 20, 50, 50); 
 

 
function copy() { 
 
    var imgData = ctxTemp.getImageData(10, 20, 50, 10); 
 
    ctx.putImageData(imgData, 10, 10); 
 
}

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 

 
<canvas id="myCanvasTemp" width="300" height="150" style="display:none;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 

 
<br /><br /> 
 
<br /> 
 
<button onclick="copy()">Copy</button>

источник

2017-03-14 20:28:50 tjgersho

Обрезание нескольких изображений в холсте HTML5

ответ

Смежные вопросы