Facebook Profile Pictures - Flag Over

Developer
Ian Joubert
Size
6,841 Kb
Views
20,240
  1. Facebook Profile Pictures - Flag Over Previews
  2. Facebook Profile Pictures - Flag Over HTML Codes
  3. Facebook Profile Pictures - Flag Over CSS Codes
  4. Facebook Profile Pictures - Flag Over JS Codes

How do I make an facebook profile pictures - flag over?

This pen aims to let the user upload their facebook profile picture then overlay their country's flag and a hashtag before saving it back to your desktop.. What is a facebook profile pictures - flag over? How do you make a facebook profile pictures - flag over? This script and codes were developed by Ian Joubert on 10 November 2022, Thursday.

Facebook Profile Pictures - Flag Over Previews
IQ Test

Facebook Profile Pictures - Flag Over - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Facebook Profile Pictures - Flag Over</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="md-body-1" ng-app="app" ng-controller="appCtrl as ctrl"> <div id="header"> <img src="https://dl.dropboxusercontent.com/u/106021493/paris-image.jpg" /> <div layout="column" layout-padding layout-align="center center"> <span class="md-display-1">Change your Propic</span> <span>Show support for <strong>#Paris Attacks</strong> and use this to <i>overlay your propic</i> with the French flag (or your own country) and add a #tag of support.</span> </div> </div> <div ng-cloak> <md-tabs md-dynamic-height md-align-tabs="bottom" md-center-tabs="true"> <md-tab label="Home"> <md-content id="center" layout="row" layout-padding> <span flex="15"></span> <div layout="column" ng-if="!ctrl.loaded" flex> <img src="https://dl.dropboxusercontent.com/u/106021493/paris-propic.jpg" /> <div id="hashtag"> <form name="tagForm"> <md-input-container> <label>#tag</label> <input name="hashtag" ng-model="ctrl.hashtag" md-maxlength="16"> <div ng-messages="tagForm.hashtag.$error"> <div ng-message="md-maxlength">Maximum of 16 characters</div> </div> </md-input-container> </form> </div> <span class="md-title" layout-padding>Upload your Facebook profile picture</span> <div id="drop-zone"> <div ng-file-drop ng-file-select ng-file-change="ctrl.dropBox(file)" ng-model="file" drag-over-class="{accept:'dragover', reject:'dragover-err', delay:200}" class="drop-box" ng-multiple="false" allow-dir="true" ng-accept="'image/*'" layout="column"> <span layout-padding>Drop IMAGE file or click to select</span> </div> </div> </div> <div id="result" layout="column" layout-align="center center" ng-if="ctrl.loaded" flex="grow"> <div propic layout="row" layout-padding loaded="ctrl.loaded" hashtag="ctrl.hashtag" flag="ctrl.flag" imgblob="ctrl.imgblob"></div> <div layout="row" layout-align="center center"> <md-button class="md-raised" ng-click="ctrl.saveImgblob()"><span class="md-subhead">Save your new profile picture</span></md-button> <md-button class="md-raised" ng-click="ctrl.loaded=null"><span class="md-subhead">Clear</span></md-button> </div> </div> <span flex="15" flex></span> </md-content> </md-tab> <md-tab label="Flags"> <md-content id="flags" layout="column" layout-padding layout-fill> <md-list-item class="md-2-line" flex> <img ng-src="{{ctrl.flag.url}}" class="md-avatar" /> <div layout="column" class="md-list-item-text"> <span class="md-title">Current selection:<psan> </span>{{ctrl.flag.title}}</span> </div> </md-list-item> <div layout="row" layout-wrap> <div ng-repeat="flag in ctrl.flags"> <div layout="column" layout-align="center center" class="flag"> <img ng-src="{{flag.url}}" /> <md-button ng-click="ctrl.setFlag(flag)">{{flag.title}}</md-button> </div> </div> </div> </md-content> </md-tab> </md-tabs> </div> <div id="footer" layout="row" layout-align="center center" layout-padding> <span>Support the French colours or choose your own country's flag.</span> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-with-addons.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.0.5/bluebird.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-animate.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-aria.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-messages.js'></script>
<script src='https://cdn.rawgit.com/Studira/mediawiki-js/master/MediawikiJS.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/3.0.7/angular-file-upload-all.min.js'></script>
<script src='https://sdk.amazonaws.com/js/aws-sdk-2.1.15.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.0/papaparse.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.js'></script> <script src="js/index.js"></script>
</body>
</html>

Facebook Profile Pictures - Flag Over - Script Codes CSS Codes

body { box-sizing: border-box;
}
img { width: 100%; display: block
}
.md-body-1 { font-size: 1rem;
}
.md-title { color: rgba(0, 0, 0, 0.4)
}
md-grid-list md-grid-tile md-grid-tile-header, md-grid-list md-grid-tile md-grid-tile-footer { height:auto;
}
md-tabs-canvas{ background: rgba(0, 0, 0, 0.2);
}
md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) { color: rgba(156,0,0,1);
}
md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:hover { color: rgba(0, 18, 155, 1);
}
md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active { color: rgba(0, 18, 155, 1);
}
md-list-item.md-2-line { padding: 0; margin: 0 auto;
}
.md-1-line{ margin: 24px 0;
}
md-list-item > .md-avatar{ margin-right: 8px; width:60px; height:60px;
}
.layout-padding,
.layout-padding > .flex,
.layout-padding > .flex-gt-sm,
.layout-padding > .flex-md,
.layout-padding > .flex-lt-lg { padding: 24px;
}
#header { background: rgba(0, 0, 0, 0.2);
}
#header span { text-align: center;
}
#center span { text-align: center;
}
#center md-input-container{ padding:16px 0;
}
#center #drop-zone > span:first-child { padding-bottom: 24px;
}
#center .drop-box { box-sizing: border-box; background: rgba(0, 0, 0, 0.1); border-radius:24px; border: 8px dotted rgba(0, 18, 155, 1); color: rgba(0, 0, 0, 0.20); margin: 0; width: 100%; h5 { margin: 0; }
}
#center .dragover { border: 8px dotted rgba(0, 0, 0, 0.60); ;
}
#center .dragover-err { border: 8px dotted rgba(156, 0, 0, 1);
}
#center #propics img{ width:initial;
}
#center #propics img, #propics canvas{ min-height:0; min-width:0;
}
#center .md-char-counter{ color: rgba(0, 0, 0, 0.40);
}
#result .md-raised{ color:rgba(0, 18, 155, 1); text-align:center; text-transform:none; font-size:1.4em; border-radius:16px; padding:8px 16px;
}
#flags .flag{ max-width:150px; margin:4px; background: rgba(0, 0, 0, 0.1); overflow:hidden;
}
#flags .flag img{ height:100px;
}
#flags .md-button:hover{ color:rgba(0, 18, 155, 1);
}
#flags .md-button{ color:rgba(0, 0, 0, 0.6); padding:4px; margin:0; min-height:24px; line-height:1;
}
#footer { background: rgba(0, 0, 0, 0.2);
}
#footer span { text-align: center;
}
/*
#tab-content-1 .layout-row{ border:15px solid rgba(0,127,127,1);
}
#tab-content-1 .layout-column{ border:15px solid rgba(127,127,0,1);
}
.layout-column{ border:15px solid rgba(127,127,0,1);
}
.layout-row{ border:15px solid rgba(0,127,127,1);
}

Facebook Profile Pictures - Flag Over - Script Codes JS Codes

(function() {	'use strict';	// --------------------------------------------------------------------------------	// GLOBALS - Global variables and functions	// --------------------------------------------------------------------------------	var _ = window._;	var app = angular.module('app', [ 'ngAnimate','ngAria','ngMessages','ngMaterial','angularFileUpload' ]);	var Promise = window.Promise;	// --------------------------------------------------------------------------------	// CONTROLLER - Application controller	// --------------------------------------------------------------------------------	function buildFlagsGrid( template,flags ){	var tile;	return _.map( flags,function (flag){	tile = _.merge( {},template );	tile.url = tile.url + flag + '.' + tile.type;	tile.title = flag.replace('_',' ');	return tile;	});	}	app.controller('appCtrl', ['$scope', function ($scope){	var scope = this;	var reader = new FileReader();	var flags = ['Afghanistan','Albania','Algeria','Andorra','Angola','Antigua','Argentina','Armenia','Australia','Malawi','Austria','Malaysia','Azerbaijan','Maldives','Bahamas','Mali','Bahrain','Malta','Bangladesh','Mauritania','Barbados','Mauritius','Belarus','Mexico','Belgium','Moldova','Belize','Monaco','Benin','Mongolia','Bermuda','Montenegro','Bhutan','Morocco','Bolivia','Mozambique','Bosnia_and_Herzegovina','Myanmar','Botswana','Namibia','Brazil','Nauru','Brunei','Nepal','Bulgaria','Netherlands','Burkina_Faso','New_Caledonia','Burundi','New_Zealand','Cambodia','Nicaragua','Cameroon','Niger','Canada','Nigeria','Cape_Verde','North_Korea','Cayman_Islands','Norway','Central_African_Republic','Oman','Chad','Pakistan','Chile','Palau','China','Palestine','Colombia','Panama','Comoros','Papua_New_Guinea','Cook_Islands','Paraguay','Costa_Rica','Peru','Croatia','Philippines','Cuba','Poland','Cyprus','Portugal','Czech_Republic','Puerto_Rico','Democratic_Republic_of_the_Congo','Qatar','Denmark','Republic_of_the_Congo','Djibouti','Romania','Dominica','Russia','Dominican_Republic','Rwanda','East_Timor','Saint_Kitts_and_Nevis','Ecuador','Saint_Lucia','Egypt','Saint_Vincent_and_the_Grenadines','El_Salvador','Samoa','England','San_Marino','Equatorial_Guinea','Sao_Tome_and_Principe','Eritrea','Saudi_Arabia','Estonia','Scotland','Ethiopia','Senegal','Fiji','Serbia','Finland','Seychelles','France','Sierra_Leone','Gabon','Singapore','Georgia','Slovakia','Germany','Slovenia','Ghana','Solomon_Islands','Greece','Somalia','Greenland','South_Africa','Grenada','South_Korea','Guam','South_Sudan','Guatemala','Spain','Guinea-Bissau','Sri_Lanka','Guinea','Sudan','Guyana','Suriname','Haiti','Swaziland','Honduras','Sweden','Hong_Kong','Switzerland','Hungary','Syria','Iceland','Taiwan','India','Tajikistan','Indonesia','Tanzania','Iran','Thailand','Iraq','Togo','Ireland','Tonga','Israel','Trinidad_and_Tobago','Italy','Tunisia','Ivorycoast','Turkey','Jamaica','Turkmenistan','Japan','Tuvalu','Jordan','Uganda','Kazakhstan','Ukraine','Kenya','United_Arab_Emirates','Kiribati','United_Kingdom','Kuwait','United_States','Kyrgyzstan','Uruguay','Laos','Uzbekistan','Latvia','Vanuatu','Lebanon','Venezuela','Lesotho','Vietnam','Liberia','Wales','Libya','Yemen','Liechtenstein','Zambia','Lithuania','Zimbabwe','Luxembourg','Macedonia','Gambia','Madagascar']	var tileTemplate = {	url : 'https://dl.dropboxusercontent.com/u/106021493/',	type: 'jpg'	}; flags = _.sortBy(flags); scope.imgblob = {}; scope.file = {};	scope.flags = buildFlagsGrid(tileTemplate,flags );	scope.flag = scope.flags[_.indexOf(flags, 'South_Africa')];	scope.dropBox = function(dropped) {	dropped = dropped[0];	reader.onload = function(event){	dropped.src = event.target.result;	scope.loaded = dropped;	$scope.$apply();	};	reader.readAsDataURL(dropped);	};	scope.setFlag = function(flag){	scope.flag = flag;	}; scope.saveImgblob = function(){ saveAs(scope.imgblob, "facebook-profile-picture"); };	}]);	// --------------------------------------------------------------------------------	// DIRECTIVES - Application canvas directive	// --------------------------------------------------------------------------------	app.directive('propic',[function (){	var template = '<div id="propics" layout="row" layout-wrap><img width="230" height="230" />' +	'<div flex></div><canvas width="230" height="230"></canvas></div>';	// --------------------------------------------------------------------------------	// DIRECTIVE LINK	// --------------------------------------------------------------------------------	function link( scope,element,attrs ){	var propic = element.find('img')[0];	var canvas = element.find('canvas')[0];	var ctx = canvas.getContext('2d');	var img1 = new Image();	function drawImageScaled(img){	var ratio = Math.min( canvas.width / img.width, canvas.height / img.height );	var centerX = ( canvas.width - img.width*ratio ) / 2;	var centerY = ( canvas.height - img.height*ratio ) / 2;	ctx.clearRect( 0,0,	canvas.width,	canvas.height	);	ctx.drawImage( img,0,0,	img.width,img.height,	centerX, centerY,	img.width*ratio, img.height*ratio	);	}	function drawImageStretched(img){	ctx.globalAlpha = 0.4;	ctx.drawImage( img,0,0,	canvas.width,canvas.height	);	}	function drawHashtag(text){	if(text){	var gradient = ctx.createLinearGradient( 0,0,canvas.width,0 );	gradient.addColorStop("0", "rgba(255,255,255,0.9)");	gradient.addColorStop("0.5", "rgba(255,255,255,1)");	gradient.addColorStop("1.0", "rgba(255,255,255,0.9)");	ctx.globalAlpha = 1;	ctx.font = "bold 16px Century Gothic";	ctx.fillStyle = gradient;	ctx.textAlign = "center";	ctx.fillText('#' + text,( canvas.width / 2 ),( canvas.height - 16 ) );	}	}	function convertDataUrlToFile(dataurl){	var array = _.reduce( atob( dataurl.split(',')[1] ),	function( result,item,key,array ){	result.push( array.charCodeAt(key) );	return result;	},[]);	var blob = new Blob([ new Uint8Array(array)],{ 'type':'image/jpg' });	blob.src = window.URL.createObjectURL(blob);	return blob;	}	// --------------------------------------------------------------------------------	// DIRECTIVE EVENTS - Event listeners	// --------------------------------------------------------------------------------	window.addEventListener('resize',function(){	scope.$apply();	});	img1.addEventListener('load',function(){	var img2 = new Image();	img2.addEventListener('load',function(){	drawImageScaled(img1);	drawImageStretched(img2);	drawHashtag(scope.hashtag);	scope.imgblob = convertDataUrlToFile( canvas.toDataURL() ); scope.$apply();	}); img2.setAttribute('crossOrigin', 'anonymous');	img2.src = scope.flag.url;	});	// --------------------------------------------------------------------------------	// DIRECTIVE SCOPE - Isolated scope	// --------------------------------------------------------------------------------	scope.$watch('loaded',function(loaded){	if( !_.isEmpty(loaded.src) ){	propic.src = loaded.src; img1.setAttribute('crossOrigin', 'anonymous');	img1.src = loaded.src;	}	});	}	return ({	'restrict':'A',	'template':template,	'scope':{	'loaded':'=',	'hashtag': '=',	'flag': '=', 'imgblob': '='	},	'replace':true,	'link':link,	});	}]);	}());
Facebook Profile Pictures - Flag Over - Script Codes
Facebook Profile Pictures - Flag Over - Script Codes
Home Page Home
Developer Ian Joubert
Username Studira
Uploaded November 10, 2022
Rating 3
Size 6,841 Kb
Views 20,240
Do you need developer help for Facebook Profile Pictures - Flag Over?

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!

Ian Joubert (Studira) Script Codes
Name
Changing CMYK colors into RGB and Hex values
A Pen by Ian Joubert
Hashing Credit Card Number
Processing Asynchronous Data
Ionic Modal Directive
Angular Test Template
ES6 Template Strings - Tagged Templates
Bleeding Scope Variables
Probabilistic N-Gram Dataset Merge
Asynchronous Recursion
Create amazing marketing copy 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!