Image Processing

Developer
Roksana
Size
3,788 Kb
Views
12,144
  1. Image Processing Previews
  2. Image Processing HTML Codes
  3. Image Processing CSS Codes
  4. Image Processing JS Codes

How do I make an image processing?

What is a image processing? How do you make a image processing? This script and codes were developed by Roksana on 22 November 2022, Tuesday.

Image Processing Previews
IQ Test

Image Processing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image Processing</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Exercise - Images Processing</title> <link rel="stylesheet" href="main.css" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/> <script src="eventHandlerModule.js" defer></script> <script src="utilsModule.js" defer></script> <script src="fileModule.js" defer></script> <script src="galleryModule.js" defer></script> <script src="imageProcessor.js" defer></script> <script src="main.js" defer></script>
</head>
<body> <header class="page-header"> <h1>Images Processing</h1> </header> <div id="dropArea"> <p>Click here or drag here your images</p> <input type="file" name="pictures" id="fieldInput" multiple> </div> <div id="gallery"></div> <footer> <p>by <a href="#">Roksana</a></p> </footer>
</body> <script src="js/index.js"></script>
</body>
</html>

Image Processing - Script Codes CSS Codes

html { font-size: 62.5%; margin: 0; padding: 0;
}
body { margin: 0; padding: 0; font-family: 'Raleway', sans-serif; font-size: 2.5rem; color: #85CB33; background: #001A23;
}
.page-header { width: 100%; text-align: center; margin: 10px 0px;
}
#dropArea { position: relative; width: 300px; height: 150px; margin: auto; text-align: center; background: #B3EFB2; border-radius: 5px;
}
#dropArea p { position: absolute;
}
#fieldInput { position: absolute; width: 300px; height: 150px; top: 0; left: 0; z-index: 2; opacity: 0; cursor: pointer;
}
#gallery { min-height: 150px; width: 90%; margin: 20px auto; border: 1px solid #85CB33; border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: space-around;
}
canvas { border: 1px dotted #85CB33;;
}
#gallery canvas { margin: 10px 5px; border-radius: 5px; cursor: pointer;
}
footer { position: fixed; right: 10px; bottom: 5px; text-align: center; color: #85CB33; font-size: 1.8rem; background: #001A23; border-radius: 5px;
}
footer p { margin: 2px; padding: 0;
}
footer a { text-decoration: none; color: #85CB33;
}

Image Processing - Script Codes JS Codes

/** * This function creates drag&drop multiple input field, * makes each of "drops" <a> tags in <img> tags, * and then creates a simple gallery out of the loaded images. */
var galleryModule = (function() { return { //createCanvasImage: createCanvasImage, makeThumbnail: makeThumbnail }; function makeThumbnail(config, imageName, imageSrc, file) { var gallery = document.getElementById(config.gallery.slice(1)); var canvas = document.createElement("canvas"); //create canvas canvas.setAttribute("width", config.thumbWidth); //add dimensions to the canvas canvas.setAttribute("height", config.thumbHeight); if (canvas.getContext) { var ctx = canvas.getContext("2d"); var loadedImage = document.createElement("img"); //create new image object loadedImage.setAttribute("height", config.thumbHeight); //add attributes to the image: size, title, source loadedImage.setAttribute("width", config.thumbWidth); //but not necessary in canvas loadedImage.setAttribute("title", imageName); loadedImage.setAttribute("src", imageSrc); ctx.drawImage(loadedImage, 0, 0, config.thumbWidth, config.thumbHeight); //draw image with proper dimensions canvas.addEventListener("click", function() { //open image in the new window after click on it window.open(imageSrc); }); } //var image = createCanvasImage(config, imageName, imageSrc, file); //image = return canvas from function createCanvasImage() gallery.appendChild(canvas); //append canvas as the last child of the gallery }; /*function createCanvasImage(config, imageName, imageSrc, file) { var canvas = document.createElement("canvas"); //create canvas canvas.setAttribute("width", config.thumbWidth); //add dimensions to the canvas canvas.setAttribute("height", config.thumbHeight); //if (canvas.getContext) { var ctx = canvas.getContext("2d"); // var loadedImage = document.createElement("img"); //create new image object loadedImage.setAttribute("height", config.thumbHeight); //add attributes to the image: size, title, source loadedImage.setAttribute("width", config.thumbWidth); //but not necessary in canvas loadedImage.setAttribute("title", imageName); loadedImage.setAttribute("src", imageSrc); //var srcc = window.URL.createObjectURL(file); //loadedImage.setAttribute("src", srcc); ctx.drawImage(loadedImage, 0, 0, config.thumbWidth, config.thumbHeight); //draw image with proper dimensions canvas.addEventListener("click", function() { //open image in the new window after click on it window.open(imageSrc); }); //} return canvas; }*/
})();
var eventHandlerModule = (function() { return { attachEvent: attachEvent, detachEvent: detachEvent }; function attachEvent(target, event, callback) { target.addEventListener(event, callback, false); }; function detachEvent(target, event, callback) { target.removeEventListener(event, callback, false); };
})();
var fileModule = (function() { return { loadFile: loadFile, checkAllowedFile: checkAllowedFile }; function loadFile(file, config, callback) { var reader = new FileReader(); //create new FileReader(), which lets read the content of files reader.onload = function(event) { callback(config, file.name, event.target.result, file); }; reader.readAsDataURL(file); }; function checkAllowedFile(file, allowedFileTypes) { var regex = ".(" + allowedFileTypes.join("|") + ")$"; //regular expression made from configuration parameters var regExp = new RegExp(regex, "i"); //make new RegExp with ignoring letter case return regExp.test(file.name); };
})();
var utilsModule = (function() { return { buildConfig: buildConfig }; function buildConfig(defaults, config) { var result = {}; //make new object for handling updated configuration for (var prop in defaults) { result[prop] = (config && typeof config[prop] !== "undefined") ? config[prop] : defaults[prop]; } for (var prop in config) { //if config has new poperties, it will add this to updated configuration if (typeof defaults[prop] === "undefined") { result[prop] = config[prop]; } } return result; };
})();
var imageProcessor = (function() { var parameters = { //default config thumbWidth: 150, thumbHeight: 150, dropArea: "#dropArea", input: "#fieldInput", gallery: "#gallery", allowedFiles: ["jpg", "png"] }; return { init: init, getParameters: parameters }; function init (arg) { var config = utilsModule.buildConfig(this.getParameters, arg); //update config var dropArea = document.getElementById(config.dropArea.slice(1)); eventHandlerModule.attachEvent(dropArea, "change", function() { handleFiles(config, galleryModule.makeThumbnail); }); function handleFiles(config, callback) { var files = document.querySelector(config.input).files; //variable, which shows how many files is loading if (!files) { return; } for (var i = 0; i < files.length ; i++) { if (fileModule.checkAllowedFile(files[i], config.allowedFiles)) { //check if the file is allowed fileModule.loadFile(files[i], config, callback); } } } };
})();
(function() { //imageProcessor.init(); imageProcessor.init({ thumbWidth: 150, thumbHeight: 200, dropArea: "#dropArea", input: "#fieldInput", allowedFiles: ["jpg"] });
})();
Image Processing - Script Codes
Image Processing - Script Codes
Home Page Home
Developer Roksana
Username roksanaop
Uploaded November 22, 2022
Rating 3
Size 3,788 Kb
Views 12,144
Do you need developer help for Image Processing?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Roksana (roksanaop) Script Codes
Name
Build a Wikipedia Viewer - FCC
Build a JavaScript Calculator
Build a Pomodoro Clock
Exercise - Build a Tribute Page
Build a Tic Tac Toe Game
Use the Twitchtv JSON API
Exercise - Build a Random Quote Machine
Built a Tribute Page
Build a Simon Game
Weather App
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!