Html2canvas: Masalah dengan gambar latar belakang

Tampaknya diperbaiki dengan 0,4.1 (di cabang pengembangan). Mungkin terkait dengan #256

Bisakah Anda mencoba dengan 0.4.1 dan melihat apakah masalahnya masih ada?

Halo. Saya memiliki masalah yang sama persis. Ya, masalah masih ada di 0.4.1. Terima kasih atas semua bantuannya.

Saya mengalami masalah yang sama ... Ada solusi belum? Terima kasih Niklas untuk skrip yang luar biasa ini.

Kode ini tidak akan dirender.
div class="mc-image " title="" style="background- image:url ('http://eterni-t.design.s3.amazonaws.com/381/theme-154-original-1.jpg' ); lebar:1025px; tinggi:780px; indeks-z: 9999"

Saya perhatikan bahwa jika saya menghapus background-size: cover; dari kelas saya = "mc-image" berfungsi.

@ymorin007 Apakah Anda menggunakan Mac dan Chrome/Opera/Safari dan/atau menggunakan komit terbaru (yaitu membuat skrip sendiri)?

Windows7 Chrome Versi 30.0.1599.101 m

Perbaikan suhu:

ubah baris 2818 menjadi

ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;

Ini pasti terkait dengan dua opsi ukuran latar belakang: isi atau sampul.

Komit terbaru (html2canvas 0.4.1) memperbaikinya untuk saya

Milik saya masih melakukan ini bahkan setelah komit terbaru ...

Ukuran latar belakang saya disetel ke 'penutup' dan saya juga sudah mencoba 'otomatis 100%' dan masih tetap putih/transparan.

Jika saya menghapus ukuran latar belakang, itu menangkap dengan baik ... ada tips lagi?

Perbaikan sementara, gunakan:

b latar belakang:url ("...base64...")

dan jangan gunakan

Juga, jangan gunakan "sprite" karena html2canvas sepertinya tidak mengerti itu.

Saya memiliki masalah dengan gambar latar belakang ketika url berisi jalur relatif ke latar belakang direktori atas: url("../i/alerts-16x.png")

Ini berfungsi jika memindahkan png dengan latar belakang cara berikut: url("i/alerts-16x.png")

saya tidak dapat merender gambar latar belakang dan tampaknya menutupi atau berisi ukuran latar belakang, jadi saya telah mengubah baris 350 dalam versi 0.41 menjadi:

topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10);

dan itu berhasil!

Saya di versi 0.4.1

Saya juga memiliki masalah dengan latar belakang.

Saya mengubah live 350 seperti yang disarankan oleh fperich tetapi tidak membantu.

Juga mencoba gambar latar belakang base64 yang direkomendasikan oleh hernan juga tidak ada sukacita.

Url yang saya coba konversi adalah ini
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

Ini mengkonversi dengan latar belakang ketika saya menggunakan penyaji halaman web di sini
http://html2canvas.hertzen.com/screenshots.html

Tetapi di halaman saya sendiri tidak memiliki latar belakang. Lihat contoh di sini
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

Kode yang saya gunakan adalah ini

<script type="text/javascript">
$(window).load(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        window.location.href = canvas.toDataURL('image/jpeg');
    },
    allowTaint: true,
    taintTest: false
    });
});
</script>

Ini pada dasarnya membiarkan halaman memuat dan mengubah dirinya menjadi gambar.

Ada yang salah dengan kode saya?

Terima kasih

fperrich u rock man!! Terima kasih

Saya percaya bahwa, fperich, Anda adalah orang favorit saya sekarang!

Terima kasih fperich :D itu bekerja dengan baik

@shauchenka @niklasvh Apakah menurut Anda masalah ini telah teratasi? Bisakah/haruskah masalah ini ditutup?

Menggunakan 0.4.1 (baik rilis dan pengembang terbaru), gambar latar belakang elemen anak saya (anak-anak adalah sprite) tidak muncul di kanvas, setidaknya di Chrome untuk Windows. Firefox untuk Windows berfungsi dengan baik. Di Chrome untuk Mac saya mendapatkan kotak hitam di mana rentang dengan gambar latar belakang berada. Saya mencoba memperbaiki fperich tetapi tidak berhasil untuk saya. Gambar latar belakang berada di asal yang sama, semua file berada di direktori yang sama di server.

@4gstudios Bisakah Anda memberikan contoh yang disederhanakan di jsfiddle (atau di beberapa tautan yang dapat diakses publik) untuk menunjukkan masalahnya?

@usmonster yakin. saya tidak menggunakan jsfiddle karena saya tidak ingin gambar menjadi eksternal, jadi kami dapat mengesampingkan masalah lintas-Asal.

sekarang tebak apa. ketika saya sedang mempersiapkan ini, saya menyadari bahwa masalahnya tampaknya dengan png yang ingin saya gunakan untuk sprite saya. pada awalnya saya pikir mungkin ukuran file, tetapi tampaknya sebenarnya ada masalah dengan dimensi png.

itu bisa ada hubungannya dengan jumlah informasi yang terkandung dalam png karena png yang lebih kompleks tampaknya menunjukkan masalah pada dimensi yang relatif lebih kecil. saya tidak berpikir itu harus ada hubungannya dengan ukuran file karena saya telah sedikit mengacaukan pengoptimalan png melalui tinypng.com dan gambar berdimensi lebih besar dengan ukuran file lebih kecil akan memiliki masalah sementara gambar berdimensi lebih kecil dengan file lebih besar ukuran tidak akan.

lihat contoh saya: http://4gstudios.com/html2canvas/

kotak biru dirender dengan baik (gambar bg adalah 100x7800 piksel / 374kb)
kotak merah tidak ditampilkan dengan benar (gambar bg berukuran 100x25000 piksel / 254kb)
-di OS X Chrome (kotak hitam)
-OS X Safari (kotak "tidak")
-dan kemungkinan Win Chrome (terjadi kemarin tetapi tidak di dekat atm PC)
-OS X Firefox tampaknya berfungsi dengan baik.

mudah-mudahan saya telah mengilustrasikan apa yang saya yakini sebagai masalah dengan baik dan kami dapat menyelesaikannya. sprite yang ingin saya gunakan dalam proyek saya memiliki lebih dari 800 aturan css yang berbeda dan saya BENAR-BENAR tidak ingin harus mengubahnya!

edit: contoh saya menggunakan 0.4.1 tetapi saya mengalami masalah yang sama ketika saya mencoba 0.5.0rc1

Saya tidak memiliki OS X yang tersedia untuk diuji, tetapi tampaknya berfungsi dengan baik di Chrome 37 di Windows (Vista) dan Chrome 38 beta di Linux (Debian wheezy). Versi Chrome apa yang Anda gunakan? Sudahkah Anda mencoba menguji dalam mode penyamaran / dengan semua ekstensi dimatikan?

@usmonster Baru saja mencoba Chrome 36 (Win7) dan kemudian diperbarui ke Chrome 37 (Win7), masih mengalami masalah

@4gstudios jika Anda mengaktifkan logging, apa yang Anda lihat di konsol browser?

Juga, harap perbarui contoh di situs Anda untuk hanya menggunakan apa yang saat ini ada di cabang master, meskipun memiliki masalah yang sama. Ini akan sangat membantu dengan debugging.

Ketiga, harap verifikasi juga apakah masalah ini muncul atau tidak meskipun semua ekstensi Chrome dinonaktifkan. (Jika demikian, saya ingin tahu apakah ini masalah waktu, karena mungkin unduhan dan/atau rendering gambar terlalu lambat?)

@usmonster

1) login aktif....
html2canvas: Pramuat dimulai: menemukan gambar latar html2canvas.js:21
html2canvas: Pramuat: Menemukan gambar html2canvas.js:21
html2canvas: Pramuat: Selesai. html2canvas.js:21
html2canvas: mulai: gambar: 1/2 (gagal: 0) html2canvas.js:21
html2canvas: mulai: gambar: 2 / 2 (gagal: 0) html2canvas.js:21
Selesai memuat gambar: #2 (gagal: 0) html2canvas.js:21
html2canvas: Renderer: Perender kanvas selesai - mengembalikan kanvas obj html2canvas.js:21

2) Diperbarui untuk menguasai cabang html2canvas.js

3) Ya, saya mencoba dengan semua dinonaktifkan. Jika waktunya, saya rasa ini bukan waktu pengunduhan, tetapi rendering sangat mungkin ya.

@4gstudios Apakah Anda memiliki mesin lain untuk diuji? Juga, tautan langsung masih terlihat menggunakan 0.4.1.

@usmonster oh ok saya buruk, saya memperbaikinya. baru saja mengujinya juga pada mesin WinServer2012, Chrome 37, masalah yang sama dengan rendering kotak hitam di tempat bg

Hm, saya masih tidak dapat mereproduksi masalah di salah satu mesin saya yang tersedia, tetapi seorang kolega dapat melakukannya di mesin Windows 7 miliknya. @niklasvh , @brcontainer ada ide? Saya pikir ini ada hubungannya dengan pengomposisian/rasterisasi yang dipercepat GPU khusus platform.. Saya akan mencoba mengujinya nanti minggu ini jika saya bisa mendapatkan akses ke mesin W7 saya, tapi saya penasaran... @4gstudios , apa yang terjadi jika Anda membagi dua gambar kedua dan mengujinya lagi? Dan terus membaginya (dan menyesuaikan aturan CSS) sampai bug mungkin hilang? Saya ingin melihat apakah ada wilayah "menarik" di PNG yang memicu masalah ini.

@usmonster Terjadi di Windows 7 x64 saya dengan Chrome. Saya akan mencoba melakukan DEBUG.
Ada beberapa masalah yang terjadi di windows7x64 tetapi tidak terjadi di versi 32, saya yakin itu adalah bug dari Chrome.

Saya cukup yakin ini terkait dengan ukuran gambar aslinya. Ada banyak hasil yang bervariasi dengan merender gambar besar atau kanvas besar, dan sejauh yang saya tahu sebenarnya tidak ada cara cerdas untuk mendeteksi dukungan untuk semua itu.

Meskipun tidak secara langsung terkait dengan ukuran gambar sumber, hasil yang bervariasi akan memberi Anda gambaran tentang masalah dengan gambar dan kanvas besar:

• http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
• http://social.msdn.microsoft.com/Forums/windowsapps/en-US/53c368e5-042b-4c3f-8903-ee024f4f7933/canvas-max-size?forum=winappswithhtml5
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482 -SW15

Mungkin harus menyiapkan beberapa tes untuk ukuran gambar maks dan ukuran kanvas untuk browser/os/batas memori yang berbeda untuk benar-benar mendapatkan pemahaman yang lebih solid di mana batasnya dan apakah mereka dapat dielakkan entah bagaimana, dengan misalnya membagi rendering menjadi potongan yang lebih kecil .

@4gstudios @brcontainer berapa banyak memori yang dimiliki perangkat Anda di mana Anda dapat mereplikasi masalah?

@niklasvh

• Windows 7 Home Premium x64
• Intel Core i5 CPU M450 2.40Ghz
• RAM 4 GB

Saya akan menguji pada windows 32bit (sehingga mungkin), tetapi saya yakin masalahnya hanya terjadi di Windows64bit

seperti yang saya duga, masalahnya hanya terjadi di "Windows x64", serta https://github.com/niklasvh/html2canvas/issues/206#issuecomment -17744888, dengan kata lain, bekerja di Windows 32bit, gagal di Windows 64bit , satu kemungkinan bug Chrome.

@brcontainer masalah terjadi pada saya di Chrome dan Safari di OS X 10.7 juga ...

Saya juga menguji pada mesin Windows 7 32-bit saya, dan semuanya berfungsi dengan baik (tidak ada bug). Ini jelas terlihat seperti masalah sistem 64-bit saja -- tangkapan yang bagus, @brcontainer! Hal lain yang perlu diperhatikan adalah bahwa versi baru Chrome khusus untuk sistem 64-bit baru saja dirilis:

http://blog.chromium.org/2014/08/64-bits-of-awesome-64-bit-windows_26.html
https://www.google.com/chrome/browser/?platform=win64 (tautan unduhan Windows)
http://blog.chromium.org/2014/08/mac-chrome-when-im-sixty-four-bits.html (Mac masih dalam versi beta)

Bagi mereka yang mengalami masalah ini, apakah Anda yakin masih menjalankan versi 32-bit? Saya pikir Anda perlu mengunduh versi 64-bit secara manual untuk mendapatkannya. Ada kemungkinan itu bisa memecahkan masalah ini.

@usmonster baik Windows7 saya adalah 64bit. Bug memengaruhi Chrome 32bit dan 64bit di Win7 64bit. Saya kira itu mempengaruhi beberapa mesin OSX juga. Terima kasih atas tautan untuk mendapatkan Chrome versi 64 bit, meskipun itu tidak menyelesaikan masalah saya :cry:

ini terdengar seperti bug di Chrome dan bukan ketidakcocokan dengan "Windows 64bit" (atau Mac OSX)

@brcontainer Saya setuju bahwa sepertinya ada masalah dengan browser Chrome & WebKit pada Windows & Mac 64-bit (tetapi bukan Linux.. setidaknya tidak pada kotak Debian 64-bit saya dengan RAM 8 GB), meskipun @4gstudios , Anda dapat melihat bug pada Windows 32-bit? Dan berapa banyak RAM yang Anda miliki di mesin Anda yang terpengaruh oleh masalah ini?

Akan menyenangkan untuk dapat mengurangi masalah ini ke akarnya. PNG kedua memiliki gradien dan dimensi yang jauh lebih besar daripada PNG pertama. Jika saya memiliki mesin yang terpengaruh untuk diuji, saya akan memotong PNG "buruk" sampai saya dapat mengetahui apakah ada wilayah atau ukuran masalah tertentu yang menyebabkannya. (Mungkin juga menarik bagi @niklasvh : http://wkbug.com/52391)

@usmonster @niklasvh

Di AppleWebkit (versi 538.1) dan "Safari 5.1.7" (versi 534.57.2 - browser ini tidak mendapatkan lebih banyak pembaruan) untuk Windows .then tidak berfungsi (bukan api/pemicu).

Jadi saya tidak dapat menguji apakah itu kegagalan "Webkit" atau kegagalan "Blink" (garpu mesin Webkit di Chrome) atau bahkan kegagalan karena kurangnya "RAM".

@brcontainer Saya pikir aman untuk berasumsi bahwa karena, menurut @4gstudios , bug itu dapat direproduksi di Safari dan Chrome di OS X, setidaknya itu adalah bug yang umum untuk mesin Blink dan WebKit.

@usmonster Saya tidak bisa menguji windows untuk itu .then(...) tidak berjalan di AppleWebkit (versi 538.1)

@usmonster Saya telah melakukan snip-away saat membuat contoh saya, tetapi tidak dengan cara yang super-ilmiah. Saya akan mencoba mendokumentasikannya dengan lebih baik ketika saya punya waktu, tetapi itu mungkin tidak akan selama seminggu atau lebih.

@usmonster , @brcontainer , @niklasvh , terima kasih atas semua bantuan Anda dengan masalah ini

@niklasvh onrendered sudah usang. Jadi apa yang bisa saya gunakan sebagai gantinya? Saya menggunakan 0.5.0-alpha1.

Juga gambar latar belakang tidak diunduh meskipun gambar berada dalam domain yang sama.

html2canvas($("#tabel unduhan sebelumnya"), {
pencatatan : benar,
dirender: fungsi(c) {
var myImage = c.toDataURL("gambar/jpeg");
$('#downloadableImage').prop('href', myImage);
}
});
Bantuan apa pun akan dihargai. Terima kasih

@codegiant2 https://github.com/niklasvh/html2canvas#usage .

Thanx fperich itu berhasil untuk saya!!

@fperich
u banyak membantu saya! Terima kasih banyak!

Saya adalah wajah dari gambar latar belakang tubuh yang dipotong
(kecil bounds.height dari NodeContainer.prototype.parseBackgroundSize - html2canvas 0.5.0-beta3 ) my

body {
    background-image: url(./res/bg.jpeg);
    background-repeat:no-repeat;
    background-position:center center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

SOLVED menambahkan

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}

Terima kasih niklasvh dan semua kontributor untuk kode yang bagus ini!

saya juga mengalami masalah yang sama, saya memuat dari gambar s3 tidak muncul di kanvas, tetapi saya memuat secara lokal di sistem saya berfungsi dengan baik bagaimana saya bisa menyelesaikannya

saya juga mengalami masalah yang sama.

background-image gagal dimuat. saya mendapatkan pesan kesalahan Kesalahan memuat latar belakang:

jsFiddle di sini

Tolong bantu saya untuk memperbaiki masalah ini.
Terima kasih,

Hai @gopiss ,

Gunakan opsi corse.

html2canvas(document.body, {
            onrendered: function (canvas) {
.....
            },
            useCORS: true
        });

@fxmontigny.
Masih ada masalah pemuatan gambar perbatasan . lihat JSFiddle saya yang diperbarui.
gambar perbatasan tidak memuat hanya menunjukkan batas warna hitam.

Saya menghadapi masalah yang sama. di bawah ini adalah log dari konsol chrome
html2canvas: Pramuat dimulai: menemukan gambar latar
html2canvas.js:21 html2canvas: mulai: gambar: 1 / 1 (gagal: 0)
html2canvas.js:21 html2canvas: mulai: gambar: 2 / 2 (gagal: 0)
html2canvas.js:21 html2canvas: Pramuat: Menemukan gambar
html2canvas.js:21 html2canvas: Pramuat: Selesai.
html2canvas.js:21 html2canvas: mulai: gambar: 2 / 2 (gagal: 0)
html2canvas.js:21 Selesai memuat gambar: #2 (gagal: 0)
html2canvas.js:21 html2canvas: Kesalahan memuat latar belakang:
html2canvas.js:21 html2canvas: Renderer: Canvas renderer done - mengembalikan kanvas obj

Apakah ini masih menjadi masalah dengan v1.0.0 ? Jika demikian, bisakah Anda membagikan contoh di jsfiddle .

Masalah ini telah ditutup secara otomatis karena belum ada tanggapan atas permintaan kami untuk informasi lebih lanjut dari penulis asli. Dengan hanya informasi yang sedang dalam masalah, kami tidak memiliki cukup informasi untuk mengambil tindakan. Silakan hubungi jika Anda memiliki atau menemukan jawaban yang kami butuhkan sehingga kami dapat menyelidiki lebih lanjut.

Hanya berkomentar karena ini dapat membantu seseorang.
Masalah saya adalah bahwa secara lokal semuanya berfungsi tetapi pada produksi gagal membuat gambar latar belakang css.
Alasannya adalah karena kami menggunakan CloudFront -- yang berarti bahwa url di file css merujuk ke aset di domain cloudfront, sementara JS dieksekusi di domain terpisah.
Namun log html2canvas tidak menunjukkan bahwa itu adalah masalah kor.
'useCORS' tampaknya tidak berfungsi sendiri karena saya pikir itu memerlukan url proxy atau sesuatu.

@jacobclarke bagi saya juga masalah yang sama ketika menggunakan html2canvas untuk menangkap gambar latar belakang di atas kanvas dalam pengambilan gambar S3 lokal Tetapi dalam produksi itu tidak menangkap gambar latar belakang. versi html2canvas saya adalah v1.0.0