Html2canvas: Html2canvas, холст обрезан при использовании поворота изображения

Созданный на 1 июн. 2017  ·  22Комментарии  ·  Источник: niklasvh/html2canvas

Привет,

Большое спасибо за этот проект,
Я использовал HTML2PDF и заметил проблему с поворотом изображения на html2canvas.
когда я использую повернутое изображение, оно обрезается снизу и справа и размещается неправильно, см. здесь: https://jsfiddle.net/yynmre4k/

Спасибо,

Все 22 Комментарий

Привет @ amine86 , это проблема с тем, как html2canvas обрабатывает обрезку преобразованных элементов, которую я начал исправлять в этом запросе на перенос. Я создал упрощенную версию вашей Fiddle, используя здесь только html2canvas (и одну, использующую исходный html2canvas, без моего запроса на перенос, здесь ).

Это сложная проблема, которая, как мне кажется, требует переписывания того, как выполняется отсечение в html2canvas. Мне удалось исправить transform: translate() проблемы, но ротация - это другая проблема, которую я не могу решить таким же образом.

Привет, @eKoopmans, большое спасибо за вашу помощь, к сожалению, я не могу использовать это в своем проекте, не исправив эту проблему поворота, знаете ли вы, что какой-либо плагин или скрипт, который хорошо работает, может конвертировать html в холст или html в svg? Даже уловка, которая нужна для покупки лицензии?

Спасибо за вашу помощь

Привет @ amine86 , возможно, вам повезет с этим подходом, визуализируя HTML через SVG, а затем в холст:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Также существует rasterizeHTML , который похож на html2canvas. Я не пробовал ни одного из подходов, дайте мне знать, сработают ли они для вас!

Привет @ekoopmans

 RasterizeHTML does not work good on some browser,
 I tried to find a solution but without succes for html2canvas, the result is not the same, on each test with a rotate I got a different design,  I think I will switch to try to create my design with imageGD from php librairie,

Anyway I want to thank you for your feedback and helps, thanks my friend,

Расскажите мне о чем-нибудь, в 0.5.0-beta4 вы добавили для этого некоторые тестовые функции. Можем ли мы посмотреть, где этот код детали, чтобы попытаться внести свой вклад и получить хорошие результаты? Спасибо!

Привет, @CreativForm , да, это хорошая идея, @eKoopmans, ты можешь нам с этим помочь?

Привет, я не уверен, какой тестовый функционал вы описываете. Вы можете увидеть работу я сделал , чтобы исправить CSS-преобразование кадрирования здесь .

@eKoopmans Надеюсь, у вас все в порядке, есть новости по этому поводу?
Вы уже добавили исправление в свой модуль html2PDF?

Спасибо,

Привет, @ amine86 , спасибо большое! К сожалению, никакого прогресса ... У меня наконец-то появилось время, чтобы вернуться к кодированию, так что я посмотрю, смогу ли я в ближайшее время это сделать.

Привет, @eKoopmans , спасибо за ответ, надеюсь, вы скоро решите эту проблему, спасибо за вашу помощь

Привет, @eKoopmans , я надеюсь, что у вас все в порядке, есть ли какие-либо обновления вашего модуля "html2PDF" для этой проблемы ротации?

Спасибо,

Нет, но спасибо за напоминание. Вы могли заметить, что я только что вернулся в проект после долгого перерыва. Похоже, что @niklasvh вчера только что выпустил альфа-версию v1.0.0, которая может содержать некоторые ответы!

@niklasvh, если вы читаете, извините, я ничего не сделал, чтобы помочь с html2canvas. Надеюсь, все идет хорошо!

Привет, @eKoopmans, большое спасибо за быстрый ответ,
Да, я тестировал последнюю версию, но заметил, что всегда возникала одна и та же проблема при использовании поворота (результат обрезан),
В этом последнем выпуске пропущена «шкала», которую вы использовали в «html2pdf», вы предусмотрели ее для добавления в нее?

@amineeg , вы говорите о последней версии html2canvas или html2pdf?

В последний выпуск html2canvas добавлен параметр scale , хотя в нем нет dpi . Здесь еще не решена проблема отсечения и преобразований CSS.

@eKoopmans да, вы правы, он содержит масштаб, надеюсь, проблема поворота будет решена в ближайшее время.
Большое спасибо за Вашу помощь.

У меня была проблема с масштабированием.
При масштабировании до большего изображения он отлично работает (например, масштаб преобразования (1.4))
При масштабировании до меньшего размера изображение обрезается (например, масштаб преобразования (0,6))

Привет, @eKoopmans , есть новости по этому поводу? Можем ли мы помочь вам как-нибудь решить эту проблему ротации?

Здравствуйте, @eKoopmans @CreativForm!

Есть новости об этой ошибке?

Спасибо,

Привет, @amineeg. Со своей стороны, нет, я жду, чтобы @eKoopmans что-то сказал. :)

Спасибо @CreativForm , @eKoopmans @niklasvh есть новости по этой проблеме?

@eKoopmans Есть

Попробуйте прокрутить окно вверх с помощью:

window.scrollTo(0,0);

Я сам протестировал это решение и могу поручиться, что оно сработало для меня - похоже, это ошибка html2canvas.

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

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

Ссылка: https://stackoverflow.com/questions/40349075/html2canvas-image-is-getting-cut

Была ли эта страница полезной?
0 / 5 - 0 рейтинги