- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3342
Idea is to display image as a "brush", which means instead of black (or any other color) line to have image.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/index.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="bg sprites sprite_338x338_gc4_ring"></div>
<canvas id="myCanvas" width="338" height="338"></canvas>
</body>
<script>
var myImage = new Image();
myImage.src = "338x338_repeating_gc4_dim_hatch.png";
myImage.onload = function () {
var myCvns = document.getElementById("myCanvas");
var myCntx = myCvns.getContext("2d");
var pat = myCntx.createPattern(myImage, "no-repeat");
myCntx.lineWidth = 10;
//myCntx.strokeStyle = "red";
myCntx.strokeStyle = pat;
myCntx.arc(168, 170, 165, 0, 8, false);
myCntx.stroke();
}
</script>
</html>
Notice line:
myCntx.strokeStyle = pat;
With that we are actually using our pattern to display image. Instead of pat write "red", for example, to see the difference.
Live example:- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3485
This morning I was reading this web site, about getters and setters in JavaScript, and here I want to copy / paste code which I saw there:
function wrapValue(_value) {
return {
get value() { return _value; },
set value(newValue) { _value = newValue; }
};
}
var x = wrapValue(5);
console.log(x.value); // output 5
x.value = 7;
console.log(x.value); // output 7
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3570
I just want to write few things which I learned these days.
$.Callbacks - sort of a queue of functions, where all be executed at once on fire. Example:
function consoleLogtestOne() {
console.log("test one")
}
function consoleLogtestTwo() {
console.log("test two")
}
var myCallbacks = $.Callbacks();
myCallbacks.add(consoleLogtestOne);
myCallbacks.add(consoleLogtestTwo);
myCallbacks.fire();
With line of code:
myCallbacks.fire();
we are executing both functions at once.
Array.prototype.map(Function) - executes callback function for each member in array. Example:
/*global console*/
(function () {
"use strict";
var myNumbers = [1, 4, 9],
variableWhichWillDoNothing;
variableWhichWillDoNothing = myNumbers.map(function (currentValue, index, array) {
console.log("currentValue: " + currentValue);
console.log("index: " + index);
console.log("array: " + array);
console.log("---");
return "nothing";
});
console.log("Just to do something with doubles (to satisfy jsLint): " + variableWhichWillDoNothing);
}())
Result will be something like:
Function.prototype.apply() - provides arguments as array to function.
Check these two examples:
function applyLog() {
console.log.apply(console, arguments);
}
function justLog() {
console.log(arguments);
}
If you execute justLog like this:
justLog("test1", "test2")
Result will something like this:
As you can see result is an array.
Now lets execute applyLog:
applyLog("test1", "test2")
Result is something like:
As you can see no array.
Using apply and map you can generate array of elements, for example:
Array.apply(null, Array(24)).map(function (_, i) {return ('0' + i)});
Result:
["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "010", "011", "012", "013", "014", "015", "016", "017", "018", "019", "020", "021", "022", "023"]
slice - select elememts
Check this example:
('stanko').slice(-1)
Result:
"o"
Another:
('stanko').slice(-2)
Result:
"ko"
One more:
('stanko').slice(2)
Result:
"anko"
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 8701
I was using this JS library, and google maps.
Exif library will extract GPS location as a Degree-Minute-Second, while Google uses Decimal degrees, that is why we need first converter:
function ConvertDMSToDD(degrees, minutes, seconds, direction) {
var dd = degrees + minutes/60 + seconds/(60*60);
if (direction == "S" || direction == "W") {
dd = dd * -1;
} // Don't do anything for N or E
return dd;
}
Next thing we need to load the image, in my case I did it with simple Ajax request (no jQuery):
var http = new XMLHttpRequest();
http.open("GET", "IMG_20150103_154405.jpg", true);
http.responseType = "blob";
http.onload = function(e) {
if (this.status === 200) {
var image = new Image();
image.onload = function() {
Then reading EXIF data is simple:
EXIF.getData(image, function() {
myData = this;
var mapCanvas = document.getElementById('map-canvas');
var latDegree = myData.exifdata.GPSLatitude[0].numerator;
var latMinute = myData.exifdata.GPSLatitude[1].numerator;
var latSecond = myData.exifdata.GPSLatitude[2].numerator / 1000;
var latDirection = myData.exifdata.GPSLatitudeRef;
var gLat = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
var lonDegree = myData.exifdata.GPSLongitude[0].numerator;
var lonMinute = myData.exifdata.GPSLongitude[1].numerator;
var lonSecond = myData.exifdata.GPSLongitude[2].numerator / 1000;
var lonDirection = myData.exifdata.GPSLongitudeRef;
var gLon = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);
Notice that latSeconds I had to divide with 100, mapCanvas I need for google maps, an code for google maps looks like this:
var myLatlng = new google.maps.LatLng(gLat, gLon);
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
google.maps.event.addListener(marker, 'click', function() {
alert("Hello world")
});
To center google maps I needed myLatlng which I also used to place a marker, and here you can notice example how to add event to marker:
google.maps.event.addListener(
marker, 'click', function() {
alert("Hello world")
});
Example download from here. Also, don't forget this example requires IIS, or some other web server.