Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Näytönkaappauskuvan tallentaminen levylle

Sivun loppuun

Anne [28.04.2015 19:39:51]

#

Kyse weppisivusta, jolla käyttäjän on tarkoitus lähettää "serverille" leikepöydällä oleva näytönkaappauskuva.

Käytössä nyt ainakin javascript ja selain on IE9.

peran [28.04.2015 19:53:25]

#

JavaScript riittää, mikäli pystyt ajamaan sitä palvelimen puolella.

Siihen tosin riittää myös jokin muun palvelimen puolella toimiva kieli.

php:llä taitaa olla esimerkki, jota en ole kokeillut, ja lyhemminkin sen pystyneen toteuttamaan.

https://www.ohjelmointiputka.net/koodivinkit/24212-php-tiedoston-lähetys-upload

Edit - tosin tämä ei lähetä leikkelepöydän kuvaa vaan kuvatiedoston, joksi leikkelepöydän kuva tulee ensin tallentaa paikallisesti tiedostoksi.

Metabolix [28.04.2015 20:25:28]

#

Onko ongelmasi nyt kuvan lähettäminen leikepöydältä palvelimelle vai kuvan tallentaminen palvelimen puolella?

Anne [28.04.2015 21:04:51]

#

Kiitos, käyn katsomassa esimerkin, josko avautuisi.

Blockeri on se, etten tiedä, miten talletan leikepöydällä olevan kuvan levylle (tai muunnan sen streamiksi). Kun kuva on joko levyllä taikka streaminä, niin sen jälkeen työkalut on hanskassa.

Metabolix [28.04.2015 21:20:44]

#

Kenen levylle? Mikä ihmeen stream? Kuulostaa, että on nyt nettisivuohjelmoinnin hahmottamisessa monta muutakin ongelmaa kuin vain tämä...

Pelkästään selaimessa suoritettavalla JavaScriptilla ei ole mitenkään mahdollista tallentaa kuvaa palvelimen levylle. Prosessissa on vähintään kaksi aivan erillistä vaihetta: Ensin täytyy selaimessa siirtää kuva leikepöydältä käsiteltävään muotoon (esim. Base64-muotoisena HTML-sivun lomakkeen kenttään). Tämän voi ehkä tehdä JavaScriptilla tai ehkä ei. Sitten lomake tietenkin lähetetään, minkä jälkeen palvelimella täytyy käsitellä data ja mahdollisesti tallentaa tiedosto. Palvelimen osuus ohjelmoidaan yleensä jollain muulla kielellä, vaikka toki JavaScriptiakin on teknisesti mahdollista käyttää.

Anne [30.06.2015 21:36:51]

#

Okei, taisin selostaa huonosti.

Tavoitteena on saada leikepöydän kuva serverin levylle. Serveriltä sen sitten taas osaan tallettaa tietokantaan. Tai työasemankin levy käy, koska sieltä sen osaan kopioida serverille.

Käyttämässämme tietokannassa on tietotyyppi stream, mutta se ei sitten lie universaali käsite. Streamin osaa tallettaa tietokantaan.

Edellisestä viestistä tulkitsen, että minun ensin täytyy saada kuva HTML-sivun lomakkeen kenttään sopivassa muodossa. Tämä taisi olla oleellinen vihje, kiitos!

Löysin täältä alla olevan esimerkin ja katson, pääsenkö eteenpäin.

Ali Al Omairi kirjoitti:

Lainattu teksti

<script type="text/javascript" >
function DoCopy(imgsrc){
window.clipboardData.setData('URL',imgsrc);
//...
}
function DoPaste(targetimg){
var imgsrc = new String( window.clipboardData.getData('URL'));
targetimg.src = imgsrc;
//do your code
}
</script>
<img onpaste ="DoPaste(this.src);" />
<img oncut ="DoCut(this.src);" />

Anne [01.07.2015 09:40:08]

#

Alkuperäisessä koodissa oli yksi bugi: DoPaste tarvitsee argumentiksi pelkän this, ei this.src. Lisäksi onbeforepasten lisäyksellä saa pasten hiiren kakkosen taakse, Ctrl+V toimii ilman sitäkin.

Koodi toimii, kun liitän leikepöydällä olevan kuvan, joka kopioitu selaimessa kuvasta, mutta joku lenkki tästä nyt puuttuu, jotta saisi kopioitua näytönkaappauskuvan, mutta mikä? Esim. Wordiin näytönkaappauskuva (Fn+Prt Scr) tippuu ihan pastella (Ctrl+V), mutta tänne ei.

Näytönkaappauskuvalle sekä URL että Text ovat nulleja, joten miten sen saa ulos leikepöydältä?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
function DoCopy(imgsrc)
{
window.clipboardData.setData('URL',imgsrc);
//...
}
function DoPaste(targetimg)
{
//alert(targetimg.src);
var url=window.clipboardData.getData('URL');
//alert('url: '+url);
//var text = window.clipboardData.getData('Text');
//alert('text '+text);
var imgsrc = new String(url);
targetimg.src = imgsrc;
//do your code
}
</script>
</head>
<body>
<img
alt="Liitä kuva tänne" width="100" height="100" onpaste ="DoPaste(this);"
onbeforepaste="return false;">
</body>
</html>

Grez [01.07.2015 10:06:11]

#

Tuollainen esimerkki oli ensimmäinen joka tuli vastaan pikaisella googletuksella (pasting clipboard image html5):

http://codepen.io/netsi1964/pen/IoJbg

Anne [01.07.2015 12:24:13]

#

Kiitos, katson tätä.


Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta