| //------------------------------------- |
| // CREATE OVERLAY FOR #LOVEAPACHE BADGE |
| //------------------------------------- |
| |
| twImg1 = new Image(); |
| twImg1.src = "img/loveapache-badge/loveapache-badge-container.png"; |
| |
| twibbonImg = [twImg1]; |
| |
| function loadImage() { |
| var input, file, fr, img, twibbon; |
| if (typeof window.FileReader === "undefined") { |
| write("The file API isn't supported on this browser yet."); |
| return; |
| } |
| |
| input = document.getElementById("imgfile"); |
| if (!input) { |
| write("Um, couldn't find the imgfile element."); |
| } else if (!input.files) { |
| write( |
| "This browser doesn't seem to support the `files` property of file inputs." |
| ); |
| } else if (!input.files[0]) { |
| write("Please select a file before clicking 'Load'"); |
| } else { |
| file = input.files[0]; |
| fr = new FileReader(); |
| fr.onload = createImage; |
| fr.readAsDataURL(file); |
| } |
| |
| function createImage() { |
| img = new Image(); |
| img.onload = imageLoaded; |
| img.src = fr.result; |
| } |
| |
| function imageLoaded() { |
| var twibbons = ["twibbon_1"]; |
| var twibbonXY = [[0, 0]]; |
| var button = []; |
| |
| imgWidth = img.width; |
| imgHeight = img.height; |
| |
| aspectRatio = imgWidth / imgHeight; |
| |
| newImgWidth = imgWidth < imgHeight ? 264 : 264 * aspectRatio; |
| newImgHeight = imgHeight < imgWidth ? 264 : 264 / aspectRatio; |
| |
| dstX = newImgWidth > 264 ? ((newImgWidth - 264) / 2) * -1 : 0; |
| dstY = newImgHeight > 264 ? ((newImgHeight - 264) / 2) * -1 : 0; |
| |
| // draw each of the operations |
| for (var n = 0; n < twibbons.length; n++) { |
| var canvas = document.getElementById("canvas_" + twibbons[n]); |
| canvas.width = 400; |
| canvas.height = 400; |
| var ctx = canvas.getContext("2d"); |
| ctx.drawImage( |
| img, |
| 0, |
| 0, |
| img.width, |
| img.height, |
| 68, |
| 68, |
| newImgWidth, |
| newImgHeight |
| ); |
| ctx.drawImage( |
| twibbonImg[n], |
| 0, |
| 0, |
| 400, |
| 400, |
| twibbonXY[n][0], |
| twibbonXY[n][1], |
| 400, |
| 400 |
| ); |
| |
| var dataURL = canvas.toDataURL(); |
| document.getElementById("img_" + twibbons[n]).src = dataURL; |
| } |
| } |
| |
| function write(msg) { |
| var p = document.createElement("p"); |
| p.innerHTML = msg; |
| document.body.appendChild(p); |
| } |
| } |