I'm creating the the image cropper by using fengyuanchen cropper library it is work as well but I want to use it for multiples images as the below screenshot But it'm simply difficult for me to reinitialize this plugin because it support only one avata images.
CropperJs supports that feature.
You can do it in javascript like this:
<script>
window.addEventListener('DOMContentLoaded', function () {
var images = document.querySelectorAll('img');
var length = images.length;
var croppers = [];
var i;
for (i = 0; i < length; i++) {
croppers.push(new Cropper(images[i]));
}
});
</script>
This code snippet could be found on the official Github repository
https://github.com/fengyuanchen/cropperjs/blob/35c6ce5bc345317c1acfb39e1ceab8af6dee1247/examples/multiple-croppers.html
Related
I want to add images to a google apps script hosted webpage.
I tried looking around the menus and checking google.
I want it to display the image at the desired size
Images from Albums in my Google Photo Library in a Web App
function doGet(e){
return displayAlbums(true);
}
//used for web app and dialog depending upon weather web parameter is true or not. If it's not provided then it's false.
function displayAlbums(web) {
var web=web||false;
//different color backgrounds for each album
var bgA=['#f3eeb3','#f3e2b3','#f3ceb3','#f3b3b6','#f3b3b6','#f3b3ef','#b3eaf3','#b3f3e3','#b3f3cb','#bdf3b3']
var html='';
var n=0;
var albumsA=listAlbums();
for(var i=0;i<albumsA.length;i++) {
html+='<html><head></head><body>';
html+=Utilities.formatString('<div id="d-%s" style="margin:auto;max-width:500px;background-color:%s;">',i,bgA[i]);
html+=Utilities.formatString('<h1>%s</h1>', albumsA[i].title);
var images=listImagesOfAnAlbum(albumsA[i].id);
for(var j=0;j<images.length;j++) {
html+=Utilities.formatString('<br />%s - %s<br /><img src="%s" width="500" />',j+1,images[j].filename, images[j].baseUrl);
}
html+='</div></body></html>';
}
if(!web) {
var userInterface=HtmlService.createHtmlOutput(html).setWidth(600).setHeight(500);
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Displaying my Albums');
}else{
var output=HtmlService.createHtmlOutput(html).setWidth(600).setHeight(500);
return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).addMetaTag('viewport', 'width=360, initial-scale=1');
}
}
function listAlbums() {
var token=null;
var fA=[];
var n=0;
do{
var params = {muteHttpExceptions:true,headers: {"Authorization": "Bearer " + ScriptApp.getOAuthToken()}};
var url=Utilities.formatString('https://photoslibrary.googleapis.com/v1/albums?pageSize=50%s',(token!=null)?"&pageToken=" + token:"");
var resp=UrlFetchApp.fetch(url,params);
var js=JSON.parse(resp.getContentText());
for(var i=0;i<js.albums.length;i++) {
fA.push({id:js.albums[i].id,title:js.albums[i].title,count:js.albums.mediaItemsCount});
}
token=js.nextPageToken;
}while(token!=null);
Logger.log(fA);
return fA;
}
function listImagesOfAnAlbum(albumId) {
var albumId= albumId || 'Default Id for debugging';
var token=null;
var iA=[];
var n=0;
do{
var params = {
method:"post",
muteHttpExceptions:true,
headers: {"Authorization": "Bearer " + ScriptApp.getOAuthToken()},
payload:{"albumId": albumId,"pageSize":"50","pageToken":token}};
var url="https://photoslibrary.googleapis.com/v1/mediaItems:search";
var resp=UrlFetchApp.fetch(url,params);
var js=JSON.parse(resp.getContentText());
for(var i=0;i<js.mediaItems.length;i++) {
iA.push({filename:js.mediaItems[i].filename,baseUrl:js.mediaItems[i].baseUrl});
}
token=js.nextPageToken;
}while(token!=null);
return iA;
}
Google Photos API
I added this to the manifest file:
"exceptionLogging": "STACKDRIVER",
"oauthScopes": ["https://www.googleapis.com/auth/drive", "https://www.googleapis.com/auth/photoslibrary", "https://www.googleapis.com/auth/script.container.ui", "https://www.googleapis.com/auth/script.external_request", "https://www.googleapis.com/auth/script.scriptapp", "https://www.googleapis.com/auth/spreadsheets"]
Also adding this to your google scripts even though you don't need it will provoke the authenticator to added the need scopes. And also setup the Drive API in Resources Advanced Google Services.
//DriveApp.getFiles();
function listFiles() {
var files = Drive.Files.list({
fields: 'nextPageToken, items(id, title)',
maxResults: 10
}).items;
for (var i = 0; i < files.length; i++) {
var file = files[i];
Logger.log('\n%s-Title: %s Id: %s',i+1,file.title,file.id);
}
}
This is a technique describe by Bruce McPherson as borrowing a Token you can read about it here
I had already loaded the Oauth2 and GOA libraries. According the Mr. McPherson you will need to install the GOA Library although I never actively used it. He has a walk through here Just go through his little slide presentation. This may seem like a lot of trouble and it is. But it does provide you with programmatic access to the photo library. Fortunately, Google does all this for us on most of our libraries.
From Your Personal Computer to your Website with DataURI's
Another way to get images right off of your Google Drive and into your webapp website.
The Javascript in the <script> tags of your website:
google.script.run
.withSuccessHandler(function(iObj){
console.log(iObj);
for(var i=0;i<iObj.iA.length;i++) {
if(i==iObj.iA.length-1) {
$('#header').css('background-image','URL(' + iObj[iObj.iA[i]] + ')');
}else{
$('#' + iObj.iA[i]).attr('src',iObj[iObj.iA[i]]);
}
}
})
.getSimpleSiteImages();
});
The Google Apps Script:
function getSimpleSiteImages() {
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('SimpleSite');
var rg=sh.getDataRange();
var vA=rg.getValues();
var oObj={iA:[]};
for(var i=0;i<vA.length;i++) {
oObj.iA[i]=vA[i][2];
oObj[oObj.iA[i]]=getDataURI(vA[i][1]);
}
return oObj;
}
function getDataURI(fileId) {
var file=DriveApp.getFileById(fileId);
return file.getBlob().getDataAsString();
}
The Google Apps Script That Makes the DataURI:
function convImageUrl(url){
var blob=UrlFetchApp.fetch(url).getBlob();
var b64Url='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());
return b64Url;
}
Just save on your google drive and upload them into your images.
I have multiple Vimeo videos iframes on the same page. So I want to add event listeners for all the iframes. But somehow it is not working for me.
here is the code which I add on document.ready.
var iframes = document.querySelectorAll('iframe');
var player;
//loop through all and add event
for (i = 0; i < iframes.length; i++) {
// when vimeo player is ready add other events
player = $f(iframes[i]);
player.addEvent('ready', function () {
player.addEvent('play', onPlay);
player.addEvent('pause', onPause);
});
function onPlay(el) {
console.log('play');
}
function onPause(el) {
console.log('pause');
}
}
I get all the iframes in variable 'iframes', it also loops through all and add ready event. But cannot add play and pause events. Where am I going wrong?
The following code would help you with attaching events to your frames.
<script>
$(document).ready(function () {
var x = document.querySelectorAll("iframe");
var nodelist = x.length;
alert(nodelist);
for (i = 0; i < nodelist; i++) {
var player = new Vimeo.Player(x[i]);
player.on('play', function () {
console.log('played the video!');
});
player.on('ended', function () {
console.log('ended the video!');
});
}
});
</script>
Actually multiple videos play/pause issue as mentioned in my question got solved using froogaloop2.js. I am not writing any extra code for this now as specified by me in question. and my iframe src url does not append api=1 param.
I'm trying to allow users to upload images and then store the images, base64 encoded, in firebase. I'm trying to make my firebase structured as follows:
|--Feed
|----Feed Item
|------username
|------epic
|---------name,etc.
|------images
|---------image1, image 2, etc.
However, I can't get the remote data in firebase to mirror the local data in the client. When I print the array of images to the console in the client, it shows that the uploaded images have been added to the array of images...but these images never make it to firebase. I've tried doing this multiple ways to no avail. I tried using implicit syncing, explicit syncing, and a mixture of both. I can;t for the life of me figure out why this isn;t working and I'm getting pretty frustrated. Here's my code:
$scope.complete = function(epicName){
for (var i = 0; i < $scope.activeEpics.length; i++){
if($scope.activeEpics[i].id === epicName){
var epicToAdd = $scope.activeEpics[i];
}
}
var epicToAddToFeed = {epic: epicToAdd, username: $scope.currUser.username, userImage: $scope.currUser.image, props:0, images:['empty']};
//connect to feed data
var feedUrl = "https://myfirebaseurl.com/feed";
$scope.feed = angularFireCollection(new Firebase(feedUrl));
//add epic
var added = $scope.feed.add(epicToAddToFeed).name();
//connect to added epic in firebase
var addedUrl = "https://myfirebaseurl.com/feed/" + added;
var addedRef = new Firebase(addedUrl);
angularFire(addedRef, $scope, 'added').then(function(){
// for each image uploaded, add image to the added epic's array of images
for (var i = 0, f; f = $scope.files[i]; i++) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var filePayload = e.target.result;
$scope.added.images.push(filePayload);
};
})(f);
reader.readAsDataURL(f);
}
});
}
EDIT: Figured it out, had to connect to "https://myfirebaseurl.com/feed/" + added + "/images"
I am using leaflet with openstreetmaps to generate a map on Ext js panel.
As maps are coming as tiles in openstreet maps, I need to combine these tiles to create a single image in order to save as an image .
You can save a Leaflet Map as a PNG file by using this resource
Saving a Leaflet Map to a PNG Example using Javascript and PHP
I do this using the so called Tile Stitching method (server side). Steps are:
On the client side collect all the tile images in your document, for example using jQuery you could do:
$('[class^="leaflet-tile leaflet-tile-loaded"]')
That will give you an array with all the img elements of the tiles for your map.
get the width and height, x and y, and the url of the images and put in a data structure of your liking
send the data structure to a function on your server that will retrieve the urls and stitch the images together using the x,y,width,height attributes.
I got the idea from this article used with openlayers: http://trac.osgeo.org/openlayers/wiki/TileStitchingPrinting. In the article you will find a working php example. Using the information above the javascript portion for Leaflet should not be difficult.
This seems to work for me:
http://www.yncoder.com/save-leaflet-map-as-image/
var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].setAttribute('crossOrigin', 'anonymous');
images[i].src = images[i].src;
}
var canvas = document.getElementById('dumb');
var context = canvas.getContext('2d');
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
for (i = 0; i < images.length; i++) {
if (typeof images[i] != 'undefined') {
context.drawImage(images[i],
images[i].style.left.slice(0, -2), // slice off 'px' from end of str
images[i].style.top.slice(0, -2),
images[i].clientWidth,
images[i].clientHeight
);
}
}
window.open(canvas.toDataURL());
hai i am very new to jquery and jqgrid..
i have implemented a grid...but i don't have any idea to display images in column from the corresponding database value...i tried a lot but failed ..can anybody help me..
regards
In the setup parameters add:
loadComplete: function() {
var ids = $("#list").getDataIDs();
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<img src='http://www.google.com/images/nav_logo6.png'>";
$("#list").setRowData(ids[i], { externalId: be })
}
},
In this example it will load the google logo. This sample goes over all the rows and adds the same item. You can change it do be more dynamic based on the current value of the cell etc.