Html2canvas: Bagaimana cara menyimpan gambar putar?

Dibuat pada 10 Mei 2013  ·  14Komentar  ·  Sumber: niklasvh/html2canvas

Halo semuanya!
Saya punya pertanyaan, dapatkah saya menyimpan gambar yang telah diubah: rotate(23deg); ?
Terimakasih banyak

Feature

Komentar yang paling membantu

Bagaimana saya bisa menyimpan div dengan transformasi CSS: perspektif?

Semua 14 komentar

Transformasi CSS belum didukung.

jadi bisakah saya membuat gambar berputar di base64?

Transform css tidak berfungsi. Ada solusi???

@arindamm satu-satunya solusi cepat untuk ini adalah jika Anda mengganti "CSS" untuk "kanvas"
Ambil gambar atau teks di kanvas dan buat rotasi (ini harus dilakukan di luar perpustakaan "html2canvas" dan harus sebelum memanggil fungsi).

Itu tidak mungkin melalui aplikasi saya. Saya akan membuat buku cerita online. Di sana pengguna dapat menempatkan gambar dan teks sebanyak yang mereka inginkan. Mereka juga dapat menskalakan dan memutar objek tersebut. Saya menggunakan tag DIV untuk ini. Bagaimana saya bisa membuat kanvas dengan data elemen div? Bisakah Anda menyarankan?

@arindamm Seperti yang saya katakan saat itu untuk menyimpan gambar,
Anda dapat mengambil semua elemen dan "window.getComputedStyle" (atau jquery) untuk mendeteksi jika ada "putar".
Jika "memutar" dalam gaya objek maka Anda mengambil nilai "rotasi" dan teks (atau gambar) yang ada di dalam objek dan mensimulasikan efeknya pada "kanvas".

 var kanvas = document.getElementById('myCanvas');
 var konteks = kanvas.getContext('2d');
 var rectWidth = 150;
 var rectTinggi = 75;
 // terjemahkan konteks ke tengah kanvas
 context.translate(canvas.width / 2, canvas.height / 2);
 // putar 45 derajat searah jarum jam
 context.rotate(Matematika.PI / 4);
 context.fillStyle = 'biru';
 context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

Tautan:
https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
http://api.jquery.com/css/ (dapatkan css dengan Jquery)
http://www.html5canvastutorials.com/advanced/html5-canvas-transform-rotate-tutorial/ (memutar dengan kanvas+javascript)

Catatan:
Tidak ada solusi siap pakai, tetapi mungkin tautan dan kode ini dapat Anda buat sebagai alternatif untuk kasus Anda.
Ide lain adalah Anda membuat plugin untuk setiap browser yang berfungsi:

krom:
chrome.tabs.captureVisibleTab(integer windowId, object options, function callback)
Tautan: 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]);
Tautan: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D?redirectlocale=en-US&redirectslug=DOM%2FCanvasRenderingContext2D#drawWindow ()

Semoga membantu.

Menutup ini karena ada beberapa masalah lain pada topik yang sama.

mungkin menarik untuk dicatat bahwa memutar benar-benar berfungsi, ketika Anda menyematkan gambar sebagai gumpalan ...

Lebih aneh lagi: Ia bekerja juga tanpa gumpalan. File saya yang saya dapatkan beberapa minggu yang lalu menyatakan stat bahwa itu adalah 0.4.1. Saat membangun sendiri atau menginstal melalui bower, itu tidak berhasil. Sayangnya saya tidak ingat di mana saya mengambilnya, karena saya hanya bermain-main ...

Div konten turun ketika saya memeriksa kotak centang dengan menggunakan 0.4.1
Adakah yang bisa tolong bantu saya.

anda dapat melakukan solusi yang diceritakan di sini:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

Terima kasih melalui tautan @ jjoe64 tetapi tidak masuk akal untuk html2canvas.

html2canvas adalah lib untuk render (gambar ulang) elemen DOM (atau halaman penuh) di kanvas dan tidak ada tag kanvas render.

Solusi Anda hanya berfungsi untuk satu elemen dengan rotasi.

ya itu bukan solusi yang berfungsi sempurna tetapi ini adalah _solusi_ untuk masalah tersebut, jika Anda harus membuat teks atau gambar yang diputar. Dan untuk kasus penggunaan ini berfungsi sempurna di proyek kami di mana kami menggunakannya.

Bagaimana saya bisa menyimpan div dengan transformasi CSS: perspektif?

Apakah halaman ini membantu?
0 / 5 - 0 peringkat