dodanie obramowania do kadrowanego obrazka

Question

Korzystam z biblioteki cropper.js w celu kadrowania obrazów. Chciałbym żeby skadrowany obraz miał obramowanie np. border: 1px solid black. Ma ktoś pomysł jak to zrobić?

https://ibb.co/F6cX2ZW

Answer 1

A dlaczego nie użyjesz właśnie wspomnianego border'a? Czy możesz pokazać, w jaki sposób umieszczasz ten obrazek w kodzie strony i jaki to daje efekt?

Comments

Tak też się da - sklonuj sobie obrazek i umieść obok, dodając mu border.
https://imgur.com/a/kOyZoBt

---

Chodzi mi oto, żeby obramowanie było częścią obrazka, żeby obrazek je zawierał po pobraniu. W czarnej ramce jest to, co chciałbym pobrać (np. jako data URI):

https://ibb.co/7vNLGtC

---

żeby obrazek je zawierał po pobraniu

W sensie, jeśli pobierzesz ten obrazek ze strony, to on ma zawierać ramkę? Obawiam się, że bez jakiejś fizycznej ingerencji w ten obrazek tak się nie da zrobić. A nie wiem, czy w przeglądarce taka ingerencja jest możliwa - może jakiś processing po stronie klienta w JavaScript.

---

Nie mam prawie żadnego doświadczenia z obiektami canvas. Wyobrażam to sobie tak, że skoro obrazek jest "namalowany" na canvas, to na tym canvas z obrazkiem można znowu coś namalować i chciałbym, żeby tym czymś był mój border. Da się to zrobić? Ma to sens czy to jest jakaś droga na około?

---

Sens ma, ale nie widzę na tej stronie <canvas>, jest <img> obudowany divami i spanami. Jeśli byś zawartość tego obrazka przeprocesował i wrzucił w <canvas> to pewnie dało by się dodać border i taki obiekt pobrać jako obrazek.