Created
June 7, 2013 14:20
-
-
Save mir4a/5729600 to your computer and use it in GitHub Desktop.
Парсилка картинок
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
javascript: | |
/** | |
* простой букмарклет, который парсит фотки из http://www.kia-motors.com.ua/ | |
*/ | |
(function () { | |
var a = document.querySelectorAll(".galleryContainer > a"); | |
var docHeight = document.height; | |
/** | |
* Создаю фон прелоадера | |
* @type {*} | |
*/ | |
var overlay = document.createElement("div"); | |
overlay.id = "overlay"; | |
overlay.style.position = "fixed"; | |
overlay.style.top = 0; | |
overlay.style.left = 0; | |
overlay.style.width = "100%"; | |
overlay.style.height = "100%"; | |
overlay.style.zIndex = 999; | |
overlay.style.background = "rgba(255,255,255,0.9)"; | |
document.body.appendChild(overlay); | |
var loadingWrap = document.createElement("span"); | |
var loadingText = "Минуточку! \n Загружается содержимое сайта"; | |
loadingWrap.id = "loading_wrap"; | |
loadingWrap.style.display = "block"; | |
loadingWrap.style.width = "100%"; | |
loadingWrap.style.height = "70px"; | |
loadingWrap.style.position = "absolute"; | |
loadingWrap.style.top = "10px"; | |
loadingWrap.style.color = "#face00"; | |
loadingWrap.style.font = "italic 700 3.5em \"Georgia\", serif"; | |
loadingWrap.style.textAlign = "center"; | |
loadingWrap.textContent = loadingText; | |
var progressBar = document.createElement("div"); | |
progressBar.id = "prgrs_wrap"; | |
progressBar.style.position = "absolute"; | |
progressBar.style.top = 0; | |
progressBar.style.left = 0; | |
progressBar.style.height = "80px"; | |
progressBar.style.width = "100%"; | |
var progressBarIn = document.createElement("div"); | |
progressBarIn.id = "prgrs"; | |
progressBarIn.style.position = "absolute"; | |
progressBarIn.style.top = 0; | |
progressBarIn.style.left = 0; | |
progressBarIn.style.height = "100%"; | |
progressBarIn.style.width = 0; | |
progressBarIn.style.background = "#face00"; | |
progressBarIn.style.cursor = "pointer"; | |
progressBarIn.style.zIndex = 9999; | |
var listLink = document.createElement("ul"); | |
listLink.id = "list_link"; | |
listLink.style.display = "block"; | |
listLink.style.width = "400px"; | |
listLink.style.height = docHeight - 90 + "px"; | |
listLink.style.position = "relative"; | |
listLink.style.margin = "90px auto 0"; | |
listLink.style.overflow = "auto"; | |
listLink.style.font = "0.5em \"Verdana\", sans-serif"; | |
listLink.style.textAlign = "left"; | |
document.getElementById("overlay").appendChild(progressBar); | |
document.getElementById("prgrs_wrap").appendChild(progressBarIn); | |
document.getElementById("overlay").appendChild(loadingWrap); | |
document.getElementById("overlay").appendChild(listLink); | |
var images = []; | |
var download = []; | |
var canv = []; | |
var canvasWrap = document.createElement("div"); | |
canvasWrap.id = "cnvs"; | |
canvasWrap.style.display = "none"; | |
document.body.appendChild(canvasWrap); | |
function makeImgArrs() { | |
for (var i = 0; i < a.length; i++) { | |
var link = a[i].href; | |
var linkTitle = a[i].title; | |
var img = new Image(); | |
var canvas = document.createElement("canvas"); | |
var listItem = document.createElement("li"); | |
listItem.id = "list_link"+i; | |
listItem.style.margin = "5px 0 2px"; | |
listItem.style.visibility = "hidden"; | |
canvas.id = "canv"+i; | |
canv.push(canvas); | |
document.getElementById("cnvs").appendChild(canvas); | |
document.getElementById("list_link").appendChild(listItem); | |
images.push(img); | |
img.src = link; | |
img.alt = linkTitle; | |
img.id = "img" + i; | |
} | |
return images; | |
} | |
function setCanvas() { | |
var images = makeImgArrs(); | |
var imgLength = images.length; | |
var prgS = 100/imgLength; | |
var prgStep = Math.round(prgS); | |
var prgW = prgStep; | |
var count = 0; | |
var li = document.querySelectorAll("#list_link > li"); | |
for (var i=0; i < imgLength; i++) { | |
images[i].onload = function(e){ | |
var dataLink = document.createElement("a"); | |
dataLink.id = "link"+count; | |
dataLink.style.color = "#f16767"; | |
dataLink.style.textDecoration = "none"; | |
dataLink.style.borderBottom = "1px solid #face00"; | |
var c = document.getElementById("canv"+count); | |
dataLink.download = parseInt(count,10) + "_"+this.alt; | |
dataLink.textContent = parseInt(count,10) + "_"+this.alt; | |
prgW += prgStep; | |
progressBarIn.style.width = prgW + "%"; | |
c.width = this.width; | |
c.height = this.height; | |
var context = c.getContext('2d'); | |
context.drawImage(this, 0, 0); | |
var data = c.toDataURL('image/jpeg', ''); | |
dataLink.href = data; | |
li[count].appendChild(dataLink); | |
li[count].style.visibility = "visible"; | |
count++; | |
}; | |
} | |
} | |
document.getElementById("prgrs").onclick = function(){ | |
var overlayWarp = document.getElementById("overlay"); | |
var canvasWrap = document.getElementById("cnvs"); | |
overlayWarp.parentNode.removeChild(overlayWarp); | |
canvasWrap.parentNode.removeChild(canvasWrap); | |
}; | |
setCanvas(); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Осилил написать букмарклет на чистом javascript. Задумался, а стоит ли так делать?