Прошу помощи с SVG→Canvas на iPad3 (iOS6)

SelenIT · March 17, 2013

Как мог, описал проблему на Хабре. Вкратце — при копировании SVG-картинки в Canvas (drawImage) на третьем (ретиновском) айпаде с iOS6 творится что-то невообразимое с определением координат копируемой области. А мне позарез надо, чтобы картинка копировалась точно (вообще-то надо было позапозавчера, но из-за этого нежданчика вот так у меня вечер пятницы затянулся...).

Заранее спасибо за любые наводки, подсказки и идеи!

SelenIT · March 18, 2013

Видимо, баг вебкита. Но в отдельной странице ведь пинок картинки помогал... Должен же быть универсальный воркэраунд, даже для IE6 удавалось его найти!

Great Rash · March 18, 2013

Так там в ветке написали что баг закрыли, т.е. пофиксили.

All reviewed patches have been landed. Closing bug.

Касаемо вопроса "как узнать размеры SVG" нагуглил вот что:


<html>
<body>
   <object id="myobj" type="image/svg+xml" data="foo.svg"></object>

   <script>
      var obj = document.getElementById("myobj"); // reference to the object tag
      var svgdoc = obj.contentDocument; // reference to the SVG document
      var svgelem = svgdoc.documentElement; // reference to the SVG element

      var width = svgelem.getAttribute("width");
      var height = svgelem.getAttribute("height");
   </script>
</body>
</html>

Возможно как-то поможет...

SelenIT · March 18, 2013

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

У меня SVG-шка вставляется обычным <img>, и сами размеры из атрибутов width/height корректно считываются через img.naturalWidth/img.naturalHeight. Проблема в том, что реальные пиксели, которые drawImage запихивает в canvas, этим размерам не соответствуют. И получается, что до 3/4 площади картинки через drawImage вообще никак не достучаться: координаты в пределах размеров картинки соответсвуют реальным пикселям левой верхней ее четверти, а попытка обратиться к координатам за пределами вызывает ошибку.

В общем, придется пока отказаться от SVGшек в этой задаче. Я бы бросил затею раньше, если бы не обнадеживающий эксперимент в отдельной странице, но в phonegap-приложении, к сожалению, этот финт не прошел...

GreatRash, большое спасибо за отклик!

wwt · March 18, 2013

Может попробовать работать с изображением в отдельном объекте http://jsfiddle.net/YN9jM/18/ который визуально еще не выводился? Во-всяком случае все браузеры должны игнорить CSS свойства.

Edited March 18, 2013 by wwt

SelenIT · March 18, 2013

У меня главная проблема была даже не с размерами как таковыми (посколько кроссбраузерность не нужна), а с координатами копируемой области. Виноват, не сразу смог сформулировать (поначалу меня эта проблема вообще запутала). Но всё равно спасибо!

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

Sign In

Прошу помощи с SVG→Canvas на iPad3 (iOS6)

Question

SelenIT

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information