| Autor | Zpráva | ||
|---|---|---|---|
| swetko Profil |
Dobrý deň,
vykresľujem obrázok cez Canvas. Chcem ho uložiť na server ako PNG. Keď dám do Canvasu vpísať text, obrázok sa uloží. Keď však vkladám do Canvasu obrázok, nefunguje to. Zaujímavé je, že keď dám fillText pred alebo po funkcii pozadie-drawImage, uloží sa obrázok na serveri ako biely(priehľadný) z textom - vtedy sa ale v samotnom plátne text nezobrazí, je prekrytý obrázkom. Akonáhle dám fillText do pozadie-drawImage, vykreslí sa na plátne, ale obrázok na serveri je prázdny - prázdne DataURL? Prikladám zdrojový kód(komplet html,js,php): <!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="platno" width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("platno");
var context = canvas.getContext('2d');
var pozadie = new Image();
pozadie.onload = function() {
context.drawImage(pozadie, 0, 0);
context.fillStyle = '#ff875c';context.font = 'normal 75pt sans-serif';
context.fillText('blablabla', 140, 215);
};
pozadie.src = 'obr1.png';
var canvasData = canvas.toDataURL("image/png");
var postData = "canvasData="+canvasData;
var ajax = new XMLHttpRequest();
ajax.open("POST",'index.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send(postData);
</script>
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])){
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
?>
</body>
</html>Neviem s tým pohnúť. Ďakujem za rady. |
||
| Chamurappi Profil |
#2 · Zasláno: 4. 6. 2015, 21:48:45
Reaguji na swetka:
„Keď však vkladám do Canvasu obrázok, nefunguje to.“ Je ten obrázek na stejné doméně? Uvedený kód říká, že ano, ale popisovaný projev chyby naznačuje… hm, ne, ten projev mě mate. Kdyby byl obrázek na jiné doméně, vyvolalo by canvas.toDataURL výjimku, v tom případě by se ale AJAXem nic neposlalo. Jestli se skutečně posílá prázdný řetězec, pro to žádné vysvětlení nemám.
Aha, teď mě to trklo. Ty posíláš AJAXem obsah <canvas>u dřív, než nastane onload obrázku pozadie. Takže logicky v tu chvíli je ještě <canvas> prázdný.
„ ajax.setRequestHeader('Content-Type', 'canvas/upload');“
Co to je za MIME typ? :-) |
||
| swetko Profil |
#3 · Zasláno: 4. 6. 2015, 22:00:50
Chamurappi:
Ďakujem krásne za usmernenie, už sa to pohlo. Co to je za MIME typ? :-) Priznám sa zahanbene, celé je to pozliepané z webu. |
||
| snazimse Profil |
#4 · Zasláno: 7. 6. 2015, 00:21:20
Chamurappi:
„Aha, teď mě to trklo. Ty posíláš AJAXem obsah <canvas>u dřív, než nastane onload obrázku pozadie.“ A proč vlastně Javascript prvně vypíše obsah mimo funkci onload v principu, kvůli době toho načtění, se to asi láme těsně? Odhaduji, že funkce onload se zavolá, až po načtění úplně všeho.Je to tak? |
||
| Chamurappi Profil |
#5 · Zasláno: 7. 6. 2015, 15:54:35
Reaguji na snazimse:
„v principu, kvůli době toho načtění, se to asi láme těsně?“ Nejsem si jistý, na co se ptáš. Nejprve doběhne blok příkazů na řádcích 9 až 29, během něhož se začne načítat obrázek… a pak teprve po jeho načtení se vyvolá funkce pozadie.onload.
Je (nebo aspoň dříve bylo) možné, že prohlížeč vyvolá onload hned v okamžiku, kdy se nastaví pozadie.src, pokud obrázek má v keši.
„Odhaduji, že funkce onload se zavolá, až po načtění úplně všeho.“ Funkce v pozadie.onload se vyvolá po donačtení obrázku v <img> elementu v proměnné pozadie.
|
||
| snazimse Profil |
#6 · Zasláno: 7. 6. 2015, 16:59:42
Chamurappi:
No šlo mi o to, že to nebude o moc, ale jen v řádu pár ms. Kvůli načtení toho obrázku se to nevykoná dříve, jinak by k tomu mohlo teoreticky dojít. |
||
|
Časová prodleva: 9 let
|
|||
0