//------------------------------------------------------------------- // annotateflickr: a Greasemonkey script for flickr to replace image with // an annotated canvas. GreaseMonkey and Flickr API code // stolen from Patrick Mueller's get flickr with // attribution script //------------------------------------------------------------------- // Copyright (c) 2008 Chris Cramer // Copyright (c) 2007 Patrick Mueller //------------------------------------------------------------------- // 2008-10-04: version 1.0 //------------------------------------------------------------------- // Released under the GPL license // http://www.gnu.org/copyleft/gpl.html //------------------------------------------------------------------- // ==UserScript== // @name Annotate Flickr Photos // @namespace http://fenris.org/annotate-flickr // @description Generate a canvas with Flickr image and attribution // @include http://www.flickr.com/photos/* // @include http://flickr.com/photos/* // ==/UserScript== //------------------------------------------------------------------- // some globals //------------------------------------------------------------------- var programName = "Annotate Flickr" var menuTextSet = programName + ": set flickr API key" var menuTextClear = programName + ": clear flickr API key" var flickrKeyName = "flickr.key" var flickrKey var outputDiv = document.createElement("div") //------------------------------------------------------------------- // set the flickr API key from a prompter //------------------------------------------------------------------- function flickrApiKeySet() { var result = prompt(programName + ": Enter your Flickr API key", flickrKey) if (null == result) return GM_setValue(flickrKeyName, result) if (result == "") { flickrApiKeyClear() } } //------------------------------------------------------------------- // clear the flickr API key //------------------------------------------------------------------- function flickrApiKeyClear() { GM_setValue(flickrKeyName, "") alert(programName + ": Your Flickr API key has been cleared.") } //------------------------------------------------------------------- // get photo info //------------------------------------------------------------------- function getPhotoInfo(photoInfo) { getPhotoInfoDone.photoInfo = photoInfo getPhotoInfoError.photoInfo = photoInfo var photoID = photoInfo.photoID logInfo("Getting photo info ...") var key = encodeURIComponent(flickrKey) var url = "http://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=" + key + "&photo_id=" + photoID var request = { method: "GET", url: url, onload: getPhotoInfoDone, onerror: getPhotoInfoError, } GM_xmlhttpRequest(request) } //------------------------------------------------------------------- // get photo info: done //------------------------------------------------------------------- function getPhotoInfoDone(response) { var photoInfo = getPhotoInfoDone.photoInfo if (200 != response.status) { logError("Error getting photo info: status: " + response.status + "; message: " + response.statusText) return } var parser = new DOMParser() var dom = parser.parseFromString(response.responseText, "application/xml") if (isApiError(dom)) return var photoElements = dom.getElementsByTagName("photo") var ownerElements = dom.getElementsByTagName("owner") var titleElements = dom.getElementsByTagName("title") photoInfo.userName = ownerElements[0].getAttribute("realname") if (!photoInfo.userName) { photoInfo.userName = ownerElements[0].getAttribute("username") } photoInfo.title = titleElements[0].textContent var license = photoElements[0].getAttribute("license") switch (license) { case "1": photoInfo.licenseName = "Attribution-NonCommercial-ShareAlike License" photoInfo.licenseUrl = "http://creativecommons.org/licenses/by-nc-sa/2.0/" photoInfo.licenseTag = "by-nc-sa" break case "2": photoInfo.licenseName = "Attribution-NonCommercial License" photoInfo.licenseUrl = "http://creativecommons.org/licenses/by-nc/2.0/" photoInfo.licenseTag = "by-nc" break case "3": photoInfo.licenseName = "Attribution-NonCommercial-NoDerivs License" photoInfo.licenseUrl = "http://creativecommons.org/licenses/by-nc-nd/2.0/" photoInfo.licenseTag = "by-nc-nd" break case "4": photoInfo.licenseName = "Attribution License" photoInfo.licenseUrl = "http://creativecommons.org/licenses/by/2.0/" photoInfo.licenseTag = "by" break case "5": photoInfo.licenseName = "Attribution-ShareAlike License" photoInfo.licenseUrl = "http://creativecommons.org/licenses/by-sa/2.0/" photoInfo.licenseTag = "by-sa" break case "6": photoInfo.licenseName = "Attribution-NoDerivs License" photoInfo.licenseUrl = "http://creativecommons.org/licenses/by-nd/2.0/" photoInfo.licenseTag = "by-nd" break case "0": logError("All Rights Reserved for this image!") return default: logError("Unknown license for this image!") return } photoInfo.licenseImg = licenseArray[photoInfo.licenseTag] annotatePhoto(photoInfo) } //------------------------------------------------------------------- // get photo info: error //------------------------------------------------------------------- function getPhotoInfoError(response) { logError("Error getting photo info.") } //------------------------------------------------------------------- // annotate // ------------------------------------------------------------------ function annotatePhoto(photoInfo) { var image; var object; var canvas; var context; var i; var classes = ''; var newClasses = ''; var attrib; var image2; image = photoInfo.origImg image2 = photoInfo.licenseImg object = image.parentNode; canvas = document.createElement('canvas'); canvas.className = newClasses; canvas.style.cssText = image.style.cssText; canvas.style.height = image.height+'px'; canvas.style.width = image.width+'px'; canvas.height = image.height; canvas.width = image.width; canvas.src = image.src; canvas.alt = image.alt; if(image.id!='') canvas.id = image.id; if(image.title!='') canvas.title = image.title; if(image.getAttribute('onclick')!='') canvas.setAttribute('onclick',image.getAttribute('onclick')); context = canvas.getContext("2d"); attrib = photoInfo.title + " by " + photoInfo.userName CanvasTextFunctions.enable(context); context.drawImage(image,0,0,canvas.width,canvas.height); context.globalAlpha = alphaValue; context.drawImage(image2, image.width-licenseWidth-2, image.height-licenseHeight-2); context.strokeStyle = "rgba(0,0,0,alphaValue)"; context.fillRect(image.width-licenseWidth-8-context.measureText("sans", fontSize, attrib), image.height-2.4*fontSize,context.measureText("sans", fontSize, attrib)+6,fontSize*2); context.globalAlpha = 1; context.strokeStyle = "rgba(255,255,255,1)"; context.drawTextRight("sans", fontSize, image.width-licenseWidth-5, image.height-fontSize, attrib); object.replaceChild(canvas,image); } //------------------------------------------------------------------- // found an API error? //------------------------------------------------------------------- function isApiError(dom) { var errElements = dom.getElementsByTagName("err") if (0 == errElements.length) return false code = errElements[0].getAttribute("code") msg = errElements[0].getAttribute("msg") logError("Flickr API error: " + code + ": " + msg) return true } //------------------------------------------------------------------- // 'annotate' clicked handler //------------------------------------------------------------------- function findAndAnnotate() { var rightImg if (findAndAnnotate.handled) return; findAndAnnotate.handled = true; if (findAndAnnotate.type==1) { var divs = document.getElementsByTagName('div'); var c2; for (i=0;i

" } //------------------------------------------------------------------- // log an error message //------------------------------------------------------------------- function logError(message) { outputDiv.innerHTML = "

" + programName + ": " + message + "

" } //------------------------------------------------------------------- // canvastext functions - // This code is released to the public domain by Jim Studt, 2007. // He may keep some sort of up to date copy at http://www.federated.com/~jim/canvastext/ //------------------------------------------------------------------- var CanvasTextFunctions = { }; CanvasTextFunctions.letters = { ' ': { width: 16, points: [] }, '!': { width: 10, points: [[5,21],[5,7],[-1,-1],[5,2],[4,1],[5,0],[6,1],[5,2]] }, '"': { width: 16, points: [[4,21],[4,14],[-1,-1],[12,21],[12,14]] }, '#': { width: 21, points: [[11,25],[4,-7],[-1,-1],[17,25],[10,-7],[-1,-1],[4,12],[18,12],[-1,-1],[3,6],[17,6]] }, '$': { width: 20, points: [[8,25],[8,-4],[-1,-1],[12,25],[12,-4],[-1,-1],[17,18],[15,20],[12,21],[8,21],[5,20],[3,18],[3,16],[4,14],[5,13],[7,12],[13,10],[15,9],[16,8],[17,6],[17,3],[15,1],[12,0],[8,0],[5,1],[3,3]] }, '%': { width: 24, points: [[21,21],[3,0],[-1,-1],[8,21],[10,19],[10,17],[9,15],[7,14],[5,14],[3,16],[3,18],[4,20],[6,21],[8,21],[10,20],[13,19],[16,19],[19,20],[21,21],[-1,-1],[17,7],[15,6],[14,4],[14,2],[16,0],[18,0],[20,1],[21,3],[21,5],[19,7],[17,7]] }, '&': { width: 26, points: [[23,12],[23,13],[22,14],[21,14],[20,13],[19,11],[17,6],[15,3],[13,1],[11,0],[7,0],[5,1],[4,2],[3,4],[3,6],[4,8],[5,9],[12,13],[13,14],[14,16],[14,18],[13,20],[11,21],[9,20],[8,18],[8,16],[9,13],[11,10],[16,3],[18,1],[20,0],[22,0],[23,1],[23,2]] }, '\'': { width: 10, points: [[5,19],[4,20],[5,21],[6,20],[6,18],[5,16],[4,15]] }, '(': { width: 14, points: [[11,25],[9,23],[7,20],[5,16],[4,11],[4,7],[5,2],[7,-2],[9,-5],[11,-7]] }, ')': { width: 14, points: [[3,25],[5,23],[7,20],[9,16],[10,11],[10,7],[9,2],[7,-2],[5,-5],[3,-7]] }, '*': { width: 16, points: [[8,21],[8,9],[-1,-1],[3,18],[13,12],[-1,-1],[13,18],[3,12]] }, '+': { width: 26, points: [[13,18],[13,0],[-1,-1],[4,9],[22,9]] }, // ',': { width: 10, points: [[6,1],[5,0],[4,1],[5,2],[6,1],[6,-1],[5,-3],[4,-4]] }, '-': { width: 26, points: [[4,9],[22,9]] }, '.': { width: 10, points: [[5,2],[4,1],[5,0],[6,1],[5,2]] }, '/': { width: 22, points: [[20,25],[2,-7]] }, '0': { width: 20, points: [[9,21],[6,20],[4,17],[3,12],[3,9],[4,4],[6,1],[9,0],[11,0],[14,1],[16,4],[17,9],[17,12],[16,17],[14,20],[11,21],[9,21]] }, '1': { width: 20, points: [[6,17],[8,18],[11,21],[11,0]] }, '2': { width: 20, points: [[4,16],[4,17],[5,19],[6,20],[8,21],[12,21],[14,20],[15,19],[16,17],[16,15],[15,13],[13,10],[3,0],[17,0]] }, '3': { width: 20, points: [[5,21],[16,21],[10,13],[13,13],[15,12],[16,11],[17,8],[17,6],[16,3],[14,1],[11,0],[8,0],[5,1],[4,2],[3,4]] }, '4': { width: 20, points: [[13,21],[3,7],[18,7],[-1,-1],[13,21],[13,0]] }, '5': { width: 20, points: [[15,21],[5,21],[4,12],[5,13],[8,14],[11,14],[14,13],[16,11],[17,8],[17,6],[16,3],[14,1],[11,0],[8,0],[5,1],[4,2],[3,4]] }, '6': { width: 20, points: [[16,18],[15,20],[12,21],[10,21],[7,20],[5,17],[4,12],[4,7],[5,3],[7,1],[10,0],[11,0],[14,1],[16,3],[17,6],[17,7],[16,10],[14,12],[11,13],[10,13],[7,12],[5,10],[4,7]] }, '7': { width: 20, points: [[17,21],[7,0],[-1,-1],[3,21],[17,21]] }, '8': { width: 20, points: [[8,21],[5,20],[4,18],[4,16],[5,14],[7,13],[11,12],[14,11],[16,9],[17,7],[17,4],[16,2],[15,1],[12,0],[8,0],[5,1],[4,2],[3,4],[3,7],[4,9],[6,11],[9,12],[13,13],[15,14],[16,16],[16,18],[15,20],[12,21],[8,21]] }, '9': { width: 20, points: [[16,14],[15,11],[13,9],[10,8],[9,8],[6,9],[4,11],[3,14],[3,15],[4,18],[6,20],[9,21],[10,21],[13,20],[15,18],[16,14],[16,9],[15,4],[13,1],[10,0],[8,0],[5,1],[4,3]] }, ':': { width: 10, points: [[5,14],[4,13],[5,12],[6,13],[5,14],[-1,-1],[5,2],[4,1],[5,0],[6,1],[5,2]] }, ',': { width: 10, points: [[5,14],[4,13],[5,12],[6,13],[5,14],[-1,-1],[6,1],[5,0],[4,1],[5,2],[6,1],[6,-1],[5,-3],[4,-4]] }, '<': { width: 24, points: [[20,18],[4,9],[20,0]] }, '=': { width: 26, points: [[4,12],[22,12],[-1,-1],[4,6],[22,6]] }, '>': { width: 24, points: [[4,18],[20,9],[4,0]] }, '?': { width: 18, points: [[3,16],[3,17],[4,19],[5,20],[7,21],[11,21],[13,20],[14,19],[15,17],[15,15],[14,13],[13,12],[9,10],[9,7],[-1,-1],[9,2],[8,1],[9,0],[10,1],[9,2]] }, '@': { width: 27, points: [[18,13],[17,15],[15,16],[12,16],[10,15],[9,14],[8,11],[8,8],[9,6],[11,5],[14,5],[16,6],[17,8],[-1,-1],[12,16],[10,14],[9,11],[9,8],[10,6],[11,5],[-1,-1],[18,16],[17,8],[17,6],[19,5],[21,5],[23,7],[24,10],[24,12],[23,15],[22,17],[20,19],[18,20],[15,21],[12,21],[9,20],[7,19],[5,17],[4,15],[3,12],[3,9],[4,6],[5,4],[7,2],[9,1],[12,0],[15,0],[18,1],[20,2],[21,3],[-1,-1],[19,16],[18,8],[18,6],[19,5]] }, 'A': { width: 18, points: [[9,21],[1,0],[-1,-1],[9,21],[17,0],[-1,-1],[4,7],[14,7]] }, 'B': { width: 21, points: [[4,21],[4,0],[-1,-1],[4,21],[13,21],[16,20],[17,19],[18,17],[18,15],[17,13],[16,12],[13,11],[-1,-1],[4,11],[13,11],[16,10],[17,9],[18,7],[18,4],[17,2],[16,1],[13,0],[4,0]] }, 'C': { width: 21, points: [[18,16],[17,18],[15,20],[13,21],[9,21],[7,20],[5,18],[4,16],[3,13],[3,8],[4,5],[5,3],[7,1],[9,0],[13,0],[15,1],[17,3],[18,5]] }, 'D': { width: 21, points: [[4,21],[4,0],[-1,-1],[4,21],[11,21],[14,20],[16,18],[17,16],[18,13],[18,8],[17,5],[16,3],[14,1],[11,0],[4,0]] }, 'E': { width: 19, points: [[4,21],[4,0],[-1,-1],[4,21],[17,21],[-1,-1],[4,11],[12,11],[-1,-1],[4,0],[17,0]] }, 'F': { width: 18, points: [[4,21],[4,0],[-1,-1],[4,21],[17,21],[-1,-1],[4,11],[12,11]] }, 'G': { width: 21, points: [[18,16],[17,18],[15,20],[13,21],[9,21],[7,20],[5,18],[4,16],[3,13],[3,8],[4,5],[5,3],[7,1],[9,0],[13,0],[15,1],[17,3],[18,5],[18,8],[-1,-1],[13,8],[18,8]] }, 'H': { width: 22, points: [[4,21],[4,0],[-1,-1],[18,21],[18,0],[-1,-1],[4,11],[18,11]] }, 'I': { width: 8, points: [[4,21],[4,0]] }, 'J': { width: 16, points: [[12,21],[12,5],[11,2],[10,1],[8,0],[6,0],[4,1],[3,2],[2,5],[2,7]] }, 'K': { width: 21, points: [[4,21],[4,0],[-1,-1],[18,21],[4,7],[-1,-1],[9,12],[18,0]] }, 'L': { width: 17, points: [[4,21],[4,0],[-1,-1],[4,0],[16,0]] }, 'M': { width: 24, points: [[4,21],[4,0],[-1,-1],[4,21],[12,0],[-1,-1],[20,21],[12,0],[-1,-1],[20,21],[20,0]] }, 'N': { width: 22, points: [[4,21],[4,0],[-1,-1],[4,21],[18,0],[-1,-1],[18,21],[18,0]] }, 'O': { width: 22, points: [[9,21],[7,20],[5,18],[4,16],[3,13],[3,8],[4,5],[5,3],[7,1],[9,0],[13,0],[15,1],[17,3],[18,5],[19,8],[19,13],[18,16],[17,18],[15,20],[13,21],[9,21]] }, 'P': { width: 21, points: [[4,21],[4,0],[-1,-1],[4,21],[13,21],[16,20],[17,19],[18,17],[18,14],[17,12],[16,11],[13,10],[4,10]] }, 'Q': { width: 22, points: [[9,21],[7,20],[5,18],[4,16],[3,13],[3,8],[4,5],[5,3],[7,1],[9,0],[13,0],[15,1],[17,3],[18,5],[19,8],[19,13],[18,16],[17,18],[15,20],[13,21],[9,21],[-1,-1],[12,4],[18,-2]] }, 'R': { width: 21, points: [[4,21],[4,0],[-1,-1],[4,21],[13,21],[16,20],[17,19],[18,17],[18,15],[17,13],[16,12],[13,11],[4,11],[-1,-1],[11,11],[18,0]] }, 'S': { width: 20, points: [[17,18],[15,20],[12,21],[8,21],[5,20],[3,18],[3,16],[4,14],[5,13],[7,12],[13,10],[15,9],[16,8],[17,6],[17,3],[15,1],[12,0],[8,0],[5,1],[3,3]] }, 'T': { width: 16, points: [[8,21],[8,0],[-1,-1],[1,21],[15,21]] }, 'U': { width: 22, points: [[4,21],[4,6],[5,3],[7,1],[10,0],[12,0],[15,1],[17,3],[18,6],[18,21]] }, 'V': { width: 18, points: [[1,21],[9,0],[-1,-1],[17,21],[9,0]] }, 'W': { width: 24, points: [[2,21],[7,0],[-1,-1],[12,21],[7,0],[-1,-1],[12,21],[17,0],[-1,-1],[22,21],[17,0]] }, 'X': { width: 20, points: [[3,21],[17,0],[-1,-1],[17,21],[3,0]] }, 'Y': { width: 18, points: [[1,21],[9,11],[9,0],[-1,-1],[17,21],[9,11]] }, 'Z': { width: 20, points: [[17,21],[3,0],[-1,-1],[3,21],[17,21],[-1,-1],[3,0],[17,0]] }, '[': { width: 14, points: [[4,25],[4,-7],[-1,-1],[5,25],[5,-7],[-1,-1],[4,25],[11,25],[-1,-1],[4,-7],[11,-7]] }, '\\': { width: 14, points: [[0,21],[14,-3]] }, ']': { width: 14, points: [[9,25],[9,-7],[-1,-1],[10,25],[10,-7],[-1,-1],[3,25],[10,25],[-1,-1],[3,-7],[10,-7]] }, '^': { width: 16, points: [[6,15],[8,18],[10,15],[-1,-1],[3,12],[8,17],[13,12],[-1,-1],[8,17],[8,0]] }, '_': { width: 16, points: [[0,-2],[16,-2]] }, '`': { width: 10, points: [[6,21],[5,20],[4,18],[4,16],[5,15],[6,16],[5,17]] }, 'a': { width: 19, points: [[15,14],[15,0],[-1,-1],[15,11],[13,13],[11,14],[8,14],[6,13],[4,11],[3,8],[3,6],[4,3],[6,1],[8,0],[11,0],[13,1],[15,3]] }, 'b': { width: 19, points: [[4,21],[4,0],[-1,-1],[4,11],[6,13],[8,14],[11,14],[13,13],[15,11],[16,8],[16,6],[15,3],[13,1],[11,0],[8,0],[6,1],[4,3]] }, 'c': { width: 18, points: [[15,11],[13,13],[11,14],[8,14],[6,13],[4,11],[3,8],[3,6],[4,3],[6,1],[8,0],[11,0],[13,1],[15,3]] }, 'd': { width: 19, points: [[15,21],[15,0],[-1,-1],[15,11],[13,13],[11,14],[8,14],[6,13],[4,11],[3,8],[3,6],[4,3],[6,1],[8,0],[11,0],[13,1],[15,3]] }, 'e': { width: 18, points: [[3,8],[15,8],[15,10],[14,12],[13,13],[11,14],[8,14],[6,13],[4,11],[3,8],[3,6],[4,3],[6,1],[8,0],[11,0],[13,1],[15,3]] }, 'f': { width: 12, points: [[10,21],[8,21],[6,20],[5,17],[5,0],[-1,-1],[2,14],[9,14]] }, 'g': { width: 19, points: [[15,14],[15,-2],[14,-5],[13,-6],[11,-7],[8,-7],[6,-6],[-1,-1],[15,11],[13,13],[11,14],[8,14],[6,13],[4,11],[3,8],[3,6],[4,3],[6,1],[8,0],[11,0],[13,1],[15,3]] }, 'h': { width: 19, points: [[4,21],[4,0],[-1,-1],[4,10],[7,13],[9,14],[12,14],[14,13],[15,10],[15,0]] }, 'i': { width: 8, points: [[3,21],[4,20],[5,21],[4,22],[3,21],[-1,-1],[4,14],[4,0]] }, 'j': { width: 10, points: [[5,21],[6,20],[7,21],[6,22],[5,21],[-1,-1],[6,14],[6,-3],[5,-6],[3,-7],[1,-7]] }, 'k': { width: 17, points: [[4,21],[4,0],[-1,-1],[14,14],[4,4],[-1,-1],[8,8],[15,0]] }, 'l': { width: 8, points: [[4,21],[4,0]] }, 'm': { width: 30, points: [[4,14],[4,0],[-1,-1],[4,10],[7,13],[9,14],[12,14],[14,13],[15,10],[15,0],[-1,-1],[15,10],[18,13],[20,14],[23,14],[25,13],[26,10],[26,0]] }, 'n': { width: 19, points: [[4,14],[4,0],[-1,-1],[4,10],[7,13],[9,14],[12,14],[14,13],[15,10],[15,0]] }, 'o': { width: 19, points: [[8,14],[6,13],[4,11],[3,8],[3,6],[4,3],[6,1],[8,0],[11,0],[13,1],[15,3],[16,6],[16,8],[15,11],[13,13],[11,14],[8,14]] }, 'p': { width: 19, points: [[4,14],[4,-7],[-1,-1],[4,11],[6,13],[8,14],[11,14],[13,13],[15,11],[16,8],[16,6],[15,3],[13,1],[11,0],[8,0],[6,1],[4,3]] }, 'q': { width: 19, points: [[15,14],[15,-7],[-1,-1],[15,11],[13,13],[11,14],[8,14],[6,13],[4,11],[3,8],[3,6],[4,3],[6,1],[8,0],[11,0],[13,1],[15,3]] }, 'r': { width: 13, points: [[4,14],[4,0],[-1,-1],[4,8],[5,11],[7,13],[9,14],[12,14]] }, 's': { width: 17, points: [[14,11],[13,13],[10,14],[7,14],[4,13],[3,11],[4,9],[6,8],[11,7],[13,6],[14,4],[14,3],[13,1],[10,0],[7,0],[4,1],[3,3]] }, 't': { width: 12, points: [[5,21],[5,4],[6,1],[8,0],[10,0],[-1,-1],[2,14],[9,14]] }, 'u': { width: 19, points: [[4,14],[4,4],[5,1],[7,0],[10,0],[12,1],[15,4],[-1,-1],[15,14],[15,0]] }, 'v': { width: 16, points: [[2,14],[8,0],[-1,-1],[14,14],[8,0]] }, 'w': { width: 22, points: [[3,14],[7,0],[-1,-1],[11,14],[7,0],[-1,-1],[11,14],[15,0],[-1,-1],[19,14],[15,0]] }, 'x': { width: 17, points: [[3,14],[14,0],[-1,-1],[14,14],[3,0]] }, 'y': { width: 16, points: [[2,14],[8,0],[-1,-1],[14,14],[8,0],[6,-4],[4,-6],[2,-7],[1,-7]] }, 'z': { width: 17, points: [[14,14],[3,0],[-1,-1],[3,14],[14,14],[-1,-1],[3,0],[14,0]] }, '{': { width: 14, points: [[9,25],[7,24],[6,23],[5,21],[5,19],[6,17],[7,16],[8,14],[8,12],[6,10],[-1,-1],[7,24],[6,22],[6,20],[7,18],[8,17],[9,15],[9,13],[8,11],[4,9],[8,7],[9,5],[9,3],[8,1],[7,0],[6,-2],[6,-4],[7,-6],[-1,-1],[6,8],[8,6],[8,4],[7,2],[6,1],[5,-1],[5,-3],[6,-5],[7,-6],[9,-7]] }, '|': { width: 8, points: [[4,25],[4,-7]] }, '}': { width: 14, points: [[5,25],[7,24],[8,23],[9,21],[9,19],[8,17],[7,16],[6,14],[6,12],[8,10],[-1,-1],[7,24],[8,22],[8,20],[7,18],[6,17],[5,15],[5,13],[6,11],[10,9],[6,7],[5,5],[5,3],[6,1],[7,0],[8,-2],[8,-4],[7,-6],[-1,-1],[8,8],[6,6],[6,4],[7,2],[8,1],[9,-1],[9,-3],[8,-5],[7,-6],[5,-7]] }, '~': { width: 24, points: [[3,6],[3,8],[4,11],[6,12],[8,12],[10,11],[14,8],[16,7],[18,7],[20,8],[21,10],[-1,-1],[3,8],[4,10],[6,11],[8,11],[10,10],[14,7],[16,6],[18,6],[20,7],[21,10],[21,12]] } }; CanvasTextFunctions.letter = function (ch) { return CanvasTextFunctions.letters[ch]; } CanvasTextFunctions.ascent = function( font, size) { return size; } CanvasTextFunctions.descent = function( font, size) { return 7.0*size/25.0; } CanvasTextFunctions.measure = function( font, size, str) { var total = 0; var len = str.length; var i; for ( i = 0; i < len; i++) { var c = CanvasTextFunctions.letter( str.charAt(i)); if ( c) total += c.width * size / 25.0; } return total; } CanvasTextFunctions.draw = function(ctx,font,size,x,y,str) { var total = 0; var len = str.length; var mag = size / 25.0; var i,j; ctx.save(); ctx.lineCap = "round"; ctx.lineWidth = 2.0 * mag; for ( i = 0; i < len; i++) { var c = CanvasTextFunctions.letter( str.charAt(i)); if ( !c) continue; ctx.beginPath(); var penUp = 1; var needStroke = 0; for ( j = 0; j < c.points.length; j++) { var a = c.points[j]; if ( a[0] == -1 && a[1] == -1) { penUp = 1; continue; } if ( penUp) { ctx.moveTo( x + a[0]*mag, y - a[1]*mag); penUp = false; } else { ctx.lineTo( x + a[0]*mag, y - a[1]*mag); } } ctx.stroke(); x += c.width*mag; } ctx.restore(); return total; } CanvasTextFunctions.enable = function( ctx) { ctx.drawText = function(font,size,x,y,text) { return CanvasTextFunctions.draw( ctx, font,size,x,y,text); }; ctx.measureText = function(font,size,text) { return CanvasTextFunctions.measure( font,size,text); }; ctx.fontAscent = function(font,size) { return CanvasTextFunctions.ascent(font,size); } ctx.fontDescent = function(font,size) { return CanvasTextFunctions.descent(font,size); } ctx.drawTextRight = function(font,size,x,y,text) { var w = CanvasTextFunctions.measure(font,size,text); return CanvasTextFunctions.draw( ctx, font,size,x-w,y,text); }; ctx.drawTextCenter = function(font,size,x,y,text) { var w = CanvasTextFunctions.measure(font,size,text); return CanvasTextFunctions.draw( ctx, font,size,x-w/2,y,text); }; } //------------------------------------------------------------------- // from the URL, get photo id //------------------------------------------------------------------- var url = window.location var pattern = /.*?\/photos\/(.+?)\/(\d+).*/ if (!pattern.test(url)) return null var pieces = pattern.exec(url) var userID = pieces[1] var photoID = pieces[2] if (null == photoID) return var photoInfo = {} photoInfo.photoID = photoID photoInfo.userID = userID findAndAnnotate.photoInfo = photoInfo //------------------------------------------------------------------- // register menu commands //------------------------------------------------------------------- GM_registerMenuCommand(menuTextSet, flickrApiKeySet) GM_registerMenuCommand(menuTextClear, flickrApiKeyClear) // load licenses var licenseArray, licenseWidth, licenseHeight, fontSize; licenseWidth=88; licenseHeight=31; fontSize=10; alphaValue = 0.5; licenseArray = new Array(); licenseArray['by'] = document.createElement("img"); licenseArray['by'].src = "http://i.creativecommons.org/l/by/3.0/88x31.png"; licenseArray['by-nc-nd'] = document.createElement("img"); licenseArray['by-nc-nd'].src ="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png"; licenseArray['by-nc-sa'] = document.createElement("img"); licenseArray['by-nc-sa'].src = "http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png"; licenseArray['by-nc'] = document.createElement("img"); licenseArray['by-nc'].src = "http://i.creativecommons.org/l/by-nc/3.0/88x31.png"; licenseArray['by-nd'] = document.createElement("img"); licenseArray['by-nd'].src = "http://i.creativecommons.org/l/by-nd/3.0/88x31.png"; licenseArray['by-sa'] = document.createElement("img"); licenseArray['by-sa'].src = "http://i.creativecommons.org/l/by-sa/3.0/88x31.png"; licenseArray['publicdomain'] = document.createElement("img"); licenseArray['publicdomain'].src = "http://i.creativecommons.org/l/publicdomain/88x31.png"; // insert before var photoTable = document.getElementById("Photo") var ccPar = document.getElementById("cc_license") var insertBefore if (photoTable) { insertBefore = photoTable findAndAnnotate.type = 1 } else if (ccPar) { insertBefore = ccPar findAndAnnotate.type = 2 } else { // GM_log("Couldn't find the right element!") return } flickrKey = GM_getValue("flickr.key", "") if ("" == flickrKey) { outputDiv.innerHTML = "

" + "Your Flickr API key is not set. Use the menu item
" + "   Tools / GreaseMonkey / User Script Commands... / " + menuTextSet + "
" + "to set the key. If you don't already have a key, you can get one " + "here.
" + "Reload the page after setting your flickr key." "

" } else { var message = "Click to annotate with license" outputDiv.innerHTML = "
" + message + "
" outputDiv.addEventListener("click", findAndAnnotate, true) } insertBefore.parentNode.insertBefore(outputDiv,insertBefore)