Html2canvas: كيف يمكنني حفظ تدوير الصورة؟

تحويلات CSS غير مدعومة حتى الآن.

فهل يمكنني جعل الصورة تدور في base64؟

تحويل المغلق لا يعمل. اي حل؟؟؟

arindamm الحل السريع الوحيد لذلك هو استبدال "CSS" بـ "canvas"
خذ الصورة أو النص على القماش وقم بالتناوب (يجب أن يتم ذلك خارج المكتبة "html2canvas" ويجب أن يكون قبل استدعاء الوظيفة).

ليس من الممكن من خلال طلبي. سأقوم بعمل كتاب قصة على الإنترنت. هناك يمكن للمستخدم وضع العديد من الصور والنصوص كما يريدون. يمكنهم أيضًا قياس هذه الكائنات وتدويرها. أنا أستخدم علامة DIV لهذه. كيف يمكنني إنشاء لوحة قماشية ببيانات عنصر div؟ هل يمكنك أن تقترح من فضلك؟

arindamm كان كما قلت في ذلك الوقت لحفظ الصورة ،
يمكنك أخذ جميع العناصر و "window.getComputedStyle" (أو jquery) لاكتشاف ما إذا كان هناك "تدوير".
إذا "استدارة" في نمط الكائن ، فإنك تأخذ قيمة "التدوير" والنص (أو الصورة) الموجودة داخل الكائن وتحاكي التأثير على "اللوحة القماشية".

 var canvas = document.getElementById ('myCanvas') ؛
 سياق var = canvas.getContext ('2d') ؛
 var rectWidth = 150 ؛
 var rectHeight = 75 ؛
 // ترجمة السياق إلى مركز اللوحة القماشية
 السياق.ترجمة (canvas.width / 2 ، قماش.ارتفاع / 2) ؛
 // استدارة 45 درجة في اتجاه عقارب الساعة
 Context.rotate (Math.PI / 4) ؛
 Context.fillStyle = 'أزرق' ؛
 Context.fillRect (rectWidth / -2، rectHeight / -2، rectWidth، rectHeight)؛

الروابط:
https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
http://api.jquery.com/css/ (احصل على css باستخدام Jquery)
http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial/ (تدوير بالقماش + جافا سكريبت)

ملحوظة:
لا يوجد حل جاهز ، ولكن ربما يمكنك إنشاء بديل لهذه الروابط والرموز لحالتك.
فكرة أخرى هي إنشاء مكون إضافي لكل متصفح يقوم بهذا العمل:

كروم:
chrome.tabs.captureVisibleTab(integer windowId, object options, function callback)
الرابط: http://developer.chrome.com/extensions/tabs.html

Firefox: void drawWindow( in nsIDOMWindow window, in float x, in float y, in float w, in float h, in DOMString bgColor, in unsigned long flags [optional]);
الرابط: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D؟redirectlocale=en-US&redirectslug=DOM٪2FCanvasRenderingContext2D#drawWindow ()

امل ان يساعد.

إغلاق هذا لأن هناك العديد من القضايا الأخرى حول نفس الموضوع.

ربما يكون من المثير للاهتمام ملاحظة أن التدوير يعمل بالفعل ، عندما تقوم بتضمين صورة على هيئة blob ...

أكثر غرابة: إنه يعمل أيضًا بدون النقطة. يوضح ملفي الذي حصلت عليه منذ أسبوعين أنه 0.4.1. عند بناء نفسي أو التثبيت عبر التعريشة ، لم ينجح الأمر. لسوء الحظ ، لا أتذكر المكان الذي أخذته فيه ، لأنني كنت ألعب فقط ...

ينزل محتوى div عندما أقوم بتحديد خانة الاختيار باستخدام 0.4.1
هل يمكن لأي شخص مساعدتي من فضلك.

يمكنك عمل حل بديل يقال هنا:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

شكرًا بالرابط @ jjoe64 ولكن لا معنى لـ html2canvas.

html2canvas هو lib لعناصر DOM للتصيير (إعادة الرسم) (أو fullpage) في قماش الرسم ولا يوجد علامة قماشية للعرض.

يعمل الحل الخاص بك مع عنصر واحد فقط مع التدوير.

نعم ، إنه ليس حلاً يعمل بشكل مثالي ولكنه _ حل بديل_ للمشكلة ، إذا كان عليك تقديم نص أو صور تم تدويرها. ولحالة الاستخدام هذه ، تعمل بشكل مثالي في مشروعنا حيث استخدمناها.

كيف يمكنني حفظ div باستخدام تحويل CSS: المنظور؟