| Autor | Zpráva | ||
|---|---|---|---|
| pinlop Profil |
#1 · Zasláno: 7. 6. 2016, 13:19:06
Potřeboval bych script, který by mi umožnil:
- načtení obrázku přes input (neukládat ho) - v případě, že je obrázek velký, zmenšit ho na width:680px. ( A aby zabíral co nejméně MB, v přijatelné kvalitě) - Vykreslit ho do <img scr="....." > Pro načtení a následné zobrazení obrázku bez ukládání na server jsme našel toto, viz níže. Pro zmenšení obrázku je zřejmě zapotřebí jít ještě přes <canvas> Potřebuji ho ale poté vykreslit do <img... . Existuje nějaká možnost? <input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
} |
||
| Keeehi Profil |
#2 · Zasláno: 7. 6. 2016, 15:30:47
pinlop:
A k čemu to má celé sloužit? |
||
| MartinP_ Profil * |
#3 · Zasláno: 7. 6. 2016, 16:34:42
function resizeImage(dataUri, targetWidth, callback) {
var image = new Image();
image.src = dataUri;
image.onload = function() {
var canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
canvas.width = targetWidth;
canvas.height = (targetWidth / image.width) * image.height;
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
callback(canvas.toDataURL());
}
}Živá ukázka |
||
| _es Profil |
#4 · Zasláno: 8. 6. 2016, 09:36:51
|
||
| pinlop Profil |
#5 · Zasláno: 8. 6. 2016, 13:27:39
Jedná se o stránku, kde je textový editor, rád bych do něj chtěl ještě vkládat obrázek. Vše mi funguje pouze s <img.. který ale nezabírá moc místa. V případě, že uživatel vloží obrázek s 5mb, při dalších akcí s editorem se to značně zpomalí. Navíc je zbytečné vkládat tak velký obrázek, když bude finálně width:680px.
Obrázek se ukládá až při stisknutí uložit. Ukládá se vše co je v editoru, tedy i obrázek, tagy a data uri (<img src="data uri..... ) Snad jsem to napsal srozumitelně. |
||
|
Časová prodleva: 30 dní
|
|||
| pinlop Profil |
#6 · Zasláno: 8. 7. 2016, 12:05:31
Ještě se zeptám, vše funguje jak má, ale obrázky zabírají stále mnoho místa. Lze obrázek ještě něčím zmenšit? Například když uložím obrázek který má 7 MB, uloží se mi na 1 MB. Rád bych se dostal pod 100Kb.
Nebo když obrázek, který má 159KB (1600x1067), zmenšuji na width:267px, po uložení zabírá 123Kb. |
||
| Bubák Profil |
Koukal jsem teď narychlo na HTMLCanvasElement.toDataURL(), výchozí formát je PNG. Stačí změnit na formát JPEG s kvalitu nastavit mezi 60 až 95 procenty. Pokud chceš mít datově vo nejmenší obrázku, doporučuji knalitu nastavit na 75 %, tedy 0.75, pokud chceš mít vysokou kvalitu a dobrá poměr datová velikost / vizuální kvalita, doporučuji nastavit na 0.9, vešší hodnoty, než 0.95 postrádají smysl, bo i při nastavení 1 je JPEG komprese ztrátová, viz člátek, tabulka a graf www.root.cz/clanky/jpeg-kral-rastrovych-grafickych-formatu/#k07
Další možnosti nastavení pro JPEG, kterými oplývají komfortnější grafické programy (podvzorkování barev, standardní nebo progresivní , práce s EXIF) bohužel nejsou k dispozici, a třebas EXIF je zahozen. Stačí změnit 11. řádek skriptu: callback(canvas.toDataURL("image/jpeg", 0.9));Kvalita je záměrně nastavena na nízkou hodnotu 20 %, abys ji byl nucen zvýšit ;-) |
||
| pinlop Profil |
#8 · Zasláno: 8. 7. 2016, 19:10:19
To je přesně ono. Děkuji mnohokrát.
|
||
|
Časová prodleva: 9 let
|
|||
0