Как наложить сетку пикселей на картинку?

Question

[qu1kgg]

Добрый день, есть картинка(пример) как наложить на нее пиксели(шаг 10х10), чтобы они не заходили за границы и их можно было выбирать в любом количестве и выводить координаты выбранных пикселей?

Comments

[Vlad]

Можно на картинку наложить canvas на котором нарисовать сетку. А координаты получить из события elem.onclick

[qu1kgg]

Vlad, а как с помощью canvas через imageObj.onload разрезать картинку, с шагом 10х10 пикселей?

[Vlad]

qu1kgg, думаю здесь вам лучше ответят на вопрос, если вы об этом.
https://developer.mozilla.org/ru/docs/Web/API/Canv...

Answer 1

[Антон Шаманов]

https://github.com/aishek/modulargrid

Comments

[qu1kgg]

это не то что нужно(

[Антон Шаманов]

qu1kgg, если в svg

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
      <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
    </pattern>
    <pattern id="grid" width="150" height="150" patternUnits="userSpaceOnUse">
      <path d="M 0 0 H50 A20 20 0 1 0 100 50 v25 C50 100 0 85 0 85 z" fill="url(#smallGrid)" stroke="gray" stroke-width="1"/>
    </pattern>
  </defs>
  <rect width="150" height="150" fill="url(#grid)"/>
</svg>

координаты jquery.offset()