jeszcze jedno pytanie, jak mogę zapisać obraz otrzymany w tym znaczniku na serwerze. Jakieś pomysły??
Surya
7
Ale jeśli użyję var img = canvas.toDataURL ("image / jpeg"); otrzymuję tło jako kompletne czarne. Jak to naprawić
gauti
181
Och przestań. Odpowiedziałem na to w 2009 roku. Czego oczekujesz?
donohoe
35
@donohoe faktycznie odpowiedziałeś na nie w sierpniu 2010 roku :)
nick
13
Zużyłoby dużo mniej pamięci, aby zrobić coś takiego var img = new Image(); img.src = canvas.toDataURL(); document.body.appendChild(img);. document.writeKod czyni URL danych, ich tworzenia ciąg HTML, a następnie oddanie kopię tego napisu w DOM, przeglądarka musi następnie przeanalizować ten ciąg HTML umieścić inną kopię na elemencie obrazu, a następnie analizować je ponownie, aby włączyć adres URL danych do danych obrazu, a następnie w końcu może wyświetlić obraz. Dla obrazu o rozmiarze ekranu, który jest ogromną ilością pamięci / kopiowania / parsowania. Tylko sugestia
gman
116
HTML5 zapewnia Canvas.toDataURL (mimetype), który jest zaimplementowany w Operze, Firefoksie i Safari 4 beta. Istnieje jednak szereg ograniczeń bezpieczeństwa (głównie związanych z rysowaniem treści z innego źródła na płótnie).
Więc nie potrzebujesz dodatkowej biblioteki.
na przykład
<canvas id=canvas width=200 height=200></canvas><script>
window.onload =function(){var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");
context.fillStyle ="green";
context.fillRect(50,50,100,100);// no argument defaults to image/png; image/jpeg, etc also work on some// implementations -- image/png is the only one that must be supported per spec.
window.location = canvas.toDataURL("image/png");}</script>
Teoretycznie powinno to utworzyć, a następnie przejść do obrazu z zielonym kwadratem pośrodku, ale nie testowałem.
Gdzie obraz zostanie zapisany. Lokalizacja w mojej okolicy?
chinna_82,
5
obraz zostanie wyświetlony w przeglądarce jako obraz. Następnie możesz zapisać go na dysku lub cokolwiek innego. Oto szybka i brudna ogólna bookmarklet „Canvas2PNG”, który konwertuje pierwsze płótno na stronie do formatu PNG i wyświetla je w przeglądarce w nowym oknie:javascript:void(window.open().location = document.getElementsByTagName("canvas")[0].toDataURL("image/png"))
Kai Carver
Jeśli obraz ma kilka MB, przygotuj się na awarię przeglądarki (zrobiłem to jakiś czas temu w FireFoxie).
jahu
1
Jak można to zmodyfikować, aby renderować wiele obrazów?
Mentalista
Identyfikatory URI danych mają maksymalną długość, więc istnieje górny limit rozmiaru obrazu, który można umieścić w adresie danych.
Juha Syrjälä
44
Pomyślałem, że nieco rozszerzę zakres tego pytania, z kilkoma przydatnymi ciekawostkami na ten temat.
Aby uzyskać płótno jako obraz, wykonaj następujące czynności:
var canvas = document.getElementById("mycanvas");var image = canvas.toDataURL("image/png");
Możesz użyć tego do zapisania obrazu na stronie:
document.write('<img src="'+image+'"/>');
Gdzie „image / png” to typ MIME (png jest jedynym, który musi być obsługiwany). Jeśli chcesz mieć tablicę obsługiwanych typów, możesz zrobić coś w ten sposób:
var imageMimes =['image/png','image/bmp','image/gif','image/jpeg','image/tiff'];//Extend as necessary var acceptedMimes =newArray();for(i =0; i < imageMimes.length; i++){if(canvas.toDataURL(imageMimes[i]).search(imageMimes[i])>=0){
acceptedMimes[acceptedMimes.length]= imageMimes[i];}}
Musisz uruchomić to tylko raz na stronie - nigdy nie powinno się zmieniać w całym cyklu życia strony.
Jeśli chcesz, aby użytkownik pobierał plik w miarę zapisywania, możesz wykonać następujące czynności:
var canvas = document.getElementById("mycanvas");var image = canvas.toDataURL("image/png").replace("image/png","image/octet-stream");//Convert image to 'octet-stream' (Just a download, really)
window.location.href = image;
Jeśli używasz go z różnymi typami mimów, pamiętaj o zmianie obu instancji image / png, ale nie image / stream oktetów. Warto również wspomnieć, że podczas korzystania z zasobów międzydomenowych przy renderowaniu obszaru roboczego podczas próby użycia metody toDataUrl napotkasz błąd bezpieczeństwa.
Z twoim rozwiązaniem pobierania pliku, muszę wybrać oprogramowanie, którego chcę użyć, jest to trochę niewygodne ... Czy istnieje sposób na zastąpienie mime jako png po pobraniu?
So4ne,
1
@ So4ne Nie sądzę, to musi być strumień obrazu / oktetu, aby poprosić użytkownika o pobranie. Jeśli pozbędziesz się tej linii, skończy się strona przekierowująca do obrazu. Chciałbym jednak wiedzieć, czy ktoś inny wie, jak to zrobić ładnie.
meiamsome
2
użycie target = "_ blank" na link <a> i .click () powinno również zadziałać, aby uruchomić pobieranie (testowane z adresami danych FF i download = "nazwa pliku" dla text / csv i text / plain)
Ax3l
To jest świetne. Dzięki! Ale co jeśli chcę zapisać na serwerze, a nie lokalnie? Czy dane wejściowe pliku formularza zaakceptują plik img src jako coś do przesłania?
Też jestem w obozie wkhtmltopdf. Używaliśmy go do archiwizacji i jest NIESAMOWITE.
Daniel Szabo
Jak korzystać z WKHTMLtoPDF na stronie wymagającej danych logowania? Używam Jsreport do konwersji na PDF, ale przechwytuję swoją zawartość za pomocą HTML2Canvas, mam problem z wysłaniem Canvas jako parametru do JSreport
Innym ciekawym rozwiązaniem jest PhantomJS . Jest to bezgłowy skrypt WebKit ze skryptami JavaScript lub CoffeeScript.
Jednym z przypadków użycia jest przechwytywanie ekranu: możesz programowo przechwytywać zawartość sieci, w tym SVG i Canvas i / lub tworzyć zrzuty ekranu witryny internetowej z podglądem miniatur.
Najlepszym punktem wejścia jest zrzut ekranu strony wiki.
Oto dobry przykład zegara polarnego (z RaphaelJS):
+1: PhantomJS to prosty, dobrze udokumentowany i przemyślany system, idealny do tego zadania. Pozwala to na znacznie więcej niż tylko chwytanie obszaru roboczego - na przykład możesz zmodyfikować stronę lub jej część (za pomocą JS) przed pobraniem, aby wyglądała dokładnie tak, jak chcesz. Doskonały!
johndodo
1
PhantomJs jest już nieaktualny
Merc
3
Jeśli używasz jQuery, co robi całkiem sporo osób, wówczas zaimplementuj zaakceptowaną odpowiedź w następujący sposób:
var canvas = $("#mycanvas")[0];var img = canvas.toDataURL("image/png");
$("#elememt-to-write-to").html('<img src="'+img+'"/>');
To jest inny sposób, bez ciągów, chociaż tak naprawdę nie wiem, czy jest szybszy, czy nie. Zamiast toDataURL (jak proponują wszystkie pytania tutaj). W moim przypadku chcę zapobiec dataUrl / base64, ponieważ potrzebuję bufora lub widoku tablicy. Tak więc inną metodą w HTMLCanvasElement jest toBlob. (Funkcja TypeScript):
exportfunction canvasToArrayBuffer(canvas:HTMLCanvasElement, mime: string):Promise<ArrayBuffer>{returnnewPromise((resolve, reject)=> canvas.toBlob(async(d)=>{if(d){const r =newFileReader();
r.addEventListener('loadend', e =>{const ab = r.result;if(ab){
resolve(ab as ArrayBuffer);}else{
reject(newError('Expected FileReader result'));}}); r.addEventListener('error', e =>{
reject(e)});
r.readAsArrayBuffer(d);}else{
reject(newError('Expected toBlob() to be defined'));}}, mime));}
Kolejną zaletą obiektów blob jest to, że można tworzyć ObjectUrls do reprezentowania danych jako pliki, podobnie jak członek „plików” HTMLInputFile. Więcej informacji:
Odpowiedzi:
Ups Oryginalna odpowiedź była specyficzna na podobne pytanie. Zostało to poprawione:
z wartością w IMG możesz zapisać go jako nowy Obraz w następujący sposób:
źródło
var img = new Image(); img.src = canvas.toDataURL(); document.body.appendChild(img);
.document.write
Kod czyni URL danych, ich tworzenia ciąg HTML, a następnie oddanie kopię tego napisu w DOM, przeglądarka musi następnie przeanalizować ten ciąg HTML umieścić inną kopię na elemencie obrazu, a następnie analizować je ponownie, aby włączyć adres URL danych do danych obrazu, a następnie w końcu może wyświetlić obraz. Dla obrazu o rozmiarze ekranu, który jest ogromną ilością pamięci / kopiowania / parsowania. Tylko sugestiaHTML5 zapewnia Canvas.toDataURL (mimetype), który jest zaimplementowany w Operze, Firefoksie i Safari 4 beta. Istnieje jednak szereg ograniczeń bezpieczeństwa (głównie związanych z rysowaniem treści z innego źródła na płótnie).
Więc nie potrzebujesz dodatkowej biblioteki.
na przykład
Teoretycznie powinno to utworzyć, a następnie przejść do obrazu z zielonym kwadratem pośrodku, ale nie testowałem.
źródło
javascript:void(window.open().location = document.getElementsByTagName("canvas")[0].toDataURL("image/png"))
Pomyślałem, że nieco rozszerzę zakres tego pytania, z kilkoma przydatnymi ciekawostkami na ten temat.
Aby uzyskać płótno jako obraz, wykonaj następujące czynności:
Możesz użyć tego do zapisania obrazu na stronie:
Gdzie „image / png” to typ MIME (png jest jedynym, który musi być obsługiwany). Jeśli chcesz mieć tablicę obsługiwanych typów, możesz zrobić coś w ten sposób:
Musisz uruchomić to tylko raz na stronie - nigdy nie powinno się zmieniać w całym cyklu życia strony.
Jeśli chcesz, aby użytkownik pobierał plik w miarę zapisywania, możesz wykonać następujące czynności:
Jeśli używasz go z różnymi typami mimów, pamiętaj o zmianie obu instancji image / png, ale nie image / stream oktetów. Warto również wspomnieć, że podczas korzystania z zasobów międzydomenowych przy renderowaniu obszaru roboczego podczas próby użycia metody toDataUrl napotkasz błąd bezpieczeństwa.
źródło
źródło
Chciałbym użyć „ wkhtmltopdf ”. Po prostu działa świetnie. Wykorzystuje silnik webkit (używany w Chrome, Safari itp.) I jest bardzo łatwy w użyciu:
Otóż to!
Spróbuj
źródło
Oto pomoc, jeśli wykonujesz pobieranie przez serwer (w ten sposób możesz nazwać / przekonwertować / postproces / etc plik):
-Post danych za pomocą
toDataURL
-Ustaw nagłówki
-Stwórz obraz
-eksportuj obraz jako JPEG
-lub jako przezroczysty PNG
źródło
Innym ciekawym rozwiązaniem jest PhantomJS . Jest to bezgłowy skrypt WebKit ze skryptami JavaScript lub CoffeeScript.
Jednym z przypadków użycia jest przechwytywanie ekranu: możesz programowo przechwytywać zawartość sieci, w tym SVG i Canvas i / lub tworzyć zrzuty ekranu witryny internetowej z podglądem miniatur.
Najlepszym punktem wejścia jest zrzut ekranu strony wiki.
Oto dobry przykład zegara polarnego (z RaphaelJS):
Czy chcesz renderować stronę do pliku PDF?
źródło
Jeśli używasz jQuery, co robi całkiem sporo osób, wówczas zaimplementuj zaakceptowaną odpowiedź w następujący sposób:
źródło
.toDataURL
jest rodzimym JS.$('<img>').attr('src',$('#mycanvas')[0].toDataURL('image/png')).appendTo($('#element-to-write-to').empty());
Dokładnie jedna linia.Możesz użyć jspdf, aby uchwycić płótno na obrazie lub pdf:
Więcej informacji: https://github.com/MrRio/jsPDF
źródło
To jest inny sposób, bez ciągów, chociaż tak naprawdę nie wiem, czy jest szybszy, czy nie. Zamiast toDataURL (jak proponują wszystkie pytania tutaj). W moim przypadku chcę zapobiec dataUrl / base64, ponieważ potrzebuję bufora lub widoku tablicy. Tak więc inną metodą w HTMLCanvasElement jest
toBlob
. (Funkcja TypeScript):Kolejną zaletą obiektów blob jest to, że można tworzyć ObjectUrls do reprezentowania danych jako pliki, podobnie jak członek „plików” HTMLInputFile. Więcej informacji:
https://developer.mozilla.org/es/docs/Web/API/HTMLCanvasElement/toBlob
źródło
W niektórych wersjach Chrome możesz:
ctx.drawImage(image1, 0, 0, w, h);
źródło