dikodoksit
Kömür Madencisi
- En iyi cevaplar
- 0
İlk defa öğretim harici bir video paylaşıyorum
Yakın zaman öncesine kadar Windows ile uzun bir ilişki yaşamaktaydım, fakat kendisi Linux ile aldatıldığını öğrendiğinde onu bıraktım. Linux'un güzelliklerine kapıldım gittim. Geyik bir yana, zaten öyle çok da Linux bildiğim yok. Neyse, bir sitede editörlük yapmaktayım ve bu sitede yaptığım paylaşımlardaki her fotoğrafa watermark, kısaca sitenin logosunu eklemem gerek. Windows'da bunu Photoscape ile çat pat hızlıca halledebiliyordum ve ücretsizdi. Lakin Linux'ta toplu şekilde bunu halletmemi sağlayacak bir program bulamadım. Online birkaç site mevcut bu işi yapan fakat önce fotoğrafları upload, sonra edit, sonra download ettiğim için onlar da yavaş geldi ki en fedakarları bile sadece 5 dosya yüklememe izin veriyordu tek seferde. Bu da 50 fotoğraf varsa, 10 kere tek tek yükleyip watermark ekle demek. Bu da cazip gelmedi. Sonra dedim peki ya kendim yapsam
Programı indirme linki:
Linki görebilmek için üye olmanız gerekiyor.
Giriş yap veya üye ol.
edit* Uygulama tavsiye üzerine electron ile yenilendi, yakında yeni hali paylaşılacak eski hali silindi.Kaynak kodu//
JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body bgcolor="#333">
<div id="submitDiv" style="width:100%; text-align:center; background-color:#eee; padding-top:16px; padding-bottom:16px;">
<input type="text" placeholder="Klasör adı(Fotoğraflar)" id="directory" style="border-style:none; box-shadow: 0px 0px 3px 2px #aaa; height:30px; padding-left:5px; width:200px; font-size:14px;">
<input type="text" placeholder="Eklenecek fotoğraf(1.png)" id="imageName" style="border-style:none; box-shadow: 0px 0px 3px 2px #aaa; height:30px; padding-left:5px; width:200px; font-size:14px;">
<input type="number" placeholder="Üstten(px)" id="margTop" style="border-style:none; box-shadow: 0px 0px 3px 2px #aaa; height:30px; padding-left:5px; width:130px; font-size:14px;">
<input type="number" placeholder="Soldan(px)" id="margLeft" style="border-style:none; box-shadow: 0px 0px 3px 2px #aaa; height:30px; padding-left:5px; width:130px; font-size:14px;">
<input type="number" placeholder="Opaklık" id="opacity" style="border-style:none; box-shadow: 0px 0px 3px 2px #aaa; height:30px; padding-left:5px; width:130px; font-size:14px;">
<input type="number" placeholder="Genişlik(px)" id="width" style="border-style:none; box-shadow: 0px 0px 3px 2px #aaa; height:30px; padding-left:5px; width:100px; font-size:14px;">
<input type="number" placeholder="Yükseklik(px)" id="height" style="border-style:none; box-shadow: 0px 0px 3px 2px #aaa; height:30px; padding-left:5px; width:100px; font-size:14px;">
<input id="inputFiles" type='file' multiple='multiple' name='files[]'>
<input type="submit" value="Birleştir" id="submitPics" style="height:30px; width:100px; background-color:#a5a5ff; border-style:none; box-shadow: 0px 0px 3px 2px #aaa; color:white; font-weight:bold;">
<img src="" id="img1" style="display:none;">
<img src="" id="img2" style="display:none;">
</div>
<div id="watermarked"></div>
<script>
var execute = document.getElementById("submitPics");
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var canvas = document.getElementById("canvas");
var width = document.getElementById("width");
var height = document.getElementById("height");
var imageName = document.getElementById("imageName");
imageName.addEventListener("keyup", function(){
var imageLink = imageName.value;
img2.setAttribute("src", "watermark/" + imageLink);
});
width.addEventListener("keyup", function(){
var widthVal = parseInt(width.value);
var sizing = img2.width/img2.height;
height.value = parseInt(widthVal/sizing) || 0;
});
height.addEventListener("keyup", function(){
var heightVal = parseInt(height.value);
var sizing = img2.width/img2.height;
width.value = parseInt(sizing*heightVal) || 0;
});
function canvas1(){};
function doSetTimeout(i) {
setTimeout(function() {
var canvas = document.getElementById("canvas" + i);
canvas.style.width = "22%";
canvas.style.height = "22%";
canvas.style.marginLeft = "1.5%";
canvas.style.marginRight = "1.5%";
canvas.style.marginTop = "2%";
var context = canvas.getContext('2d');
var directory = document.getElementById("directory").value;
var fileList = document.getElementById("inputFiles").files;
img1.setAttribute("src", "photos/" + directory + "/" + fileList.name);
setTimeout(function canvas1(){
var w = parseInt(width.value);
var h = parseInt(height.value);
var opacity = document.getElementById("opacity").value;
var margLeft = document.getElementById("margLeft");
var margTop = document.getElementById("margTop");
canvas.width = img1.width;
canvas.height = img1.height;
if(width.value.length == 0 && height.value.length == 0){
if(margLeft.value.length != 0 && margTop.value.length != 0){
context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0, img1.width, img1.height);
context.globalAlpha = opacity || 0.5;
context.drawImage(img2, margLeft.value, margTop.value, img2.width, img2.height);
}
else if(margLeft.value.length != 0 && margTop.value.length == 0){
context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0, img1.width, img1.height);
context.globalAlpha = opacity || 0.5;
context.drawImage(img2, margLeft.value, 0, img2.width, img2.height);
}
else if(margLeft.value.length == 0 && margTop.value.length != 0){
context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0, img1.width, img1.height);
context.globalAlpha = opacity || 0.5;
context.drawImage(img2, 0, margTop.value, img2.width, img2.height);
}
else if(margLeft.value == 0 && margTop.value == 0){
context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0, img1.width, img1.height);
context.globalAlpha = opacity || 0.5;
context.drawImage(img2, 50, 30, img2.width, img2.height);
}
}
else if(width.value.length != 0 && height.value.length != 0){
if(margLeft.value.length != 0 && margTop.value.length != 0){
context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0, img1.width, img1.height);
context.globalAlpha = opacity || 0.5;
context.drawImage(img2, margLeft.value, margTop.value, w, h);
}
else if(margLeft.value.length != 0 && margTop.value.length == 0){
context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0, img1.width, img1.height);
context.globalAlpha = opacity || 0.5;
context.drawImage(img2, margLeft.value, 0, w, h);
}
else if(margLeft.value.length == 0 && margTop.value.length != 0){
context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0, img1.width, img1.height);
context.globalAlpha = opacity || 0.5;
context.drawImage(img2, 0, margTop.value, w, h);
}
else if(margLeft.value == 0 && margTop.value == 0){
context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0, img1.width, img1.height);
context.globalAlpha = opacity || 0.5;
context.drawImage(img2, 50, 30, w, h);
}
}
}, 100);
canvas1();
}, i * 200);
}
execute.addEventListener("click", function(){
var watermarked = document.getElementById("watermarked");
if(watermarked.getElementsByTagName('*').length > 0){
while (watermarked.firstChild) {
watermarked.removeChild(watermarked.firstChild);
}
}
var fileList = document.getElementById("inputFiles").files;
for(var i = 0; i < fileList.length; i++) {
for(var j = 0; j < fileList.length; j++){
var canv = document.createElement('canvas');
canv.id = "canvas" + j;
canv.style.width="0px";
canv.style.height="0px";
watermarked.appendChild(canv);
}
doSetTimeout(i);
}
});
</script>
</body>
</html>
Son düzenleme:
