i've been looking into the awesome imageresizing.net tool, and am successfully using the URL API on my site.
However, i'm keen to look into the managed API, and resize a photo AS it is uploaded. I have started off by building a very basic upload page that uses the WebImage helper:
#using ImageResizer;
#{
WebImage photo = null;
var newFileName = "";
var imagePath = "";
if(IsPost){
photo = WebImage.GetImageFromRequest();
if(photo != null){
newFileName = Guid.NewGuid().ToString() + "_" +
Path.GetFileName(photo.FileName);
imagePath = #"images\" + newFileName;
photo.Save(#"~\" + imagePath);
}
}
}
I want to use the ImageResizing tool in this upload, to resize/crop to a specific size.
Below is the code that i need to insert (i have tested this by running on an existing image, and it works fine):
ImageResizer.ImageBuilder.Current.Build(imagePath,imagePath,
new ResizeSettings("width=620&height=405&mode=crop"));
Any idea house i can merge the two, and resize BEFORE i save?
You were so close! Server.MapPath is the missing piece you're looking for.
#{
if (IsPost) {
var photo = WebImage.GetImageFromRequest();
if (photo != null) {
var filename = Guid.NewGuid().ToString() + "_" + Path.GetFileName(photo.FileName);
var localPath = Server.MapPath("~/") + #"images\" + filename;
photo.Save(localPath);
ImageResizer.ImageBuilder.Current.Build(localPath, localPath, new ImageResizer.ResizeSettings("width=620&height=405&mode=crop"));
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Site's Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form method="post" enctype="multipart/form-data">
<input type="file" name="mahfile">
<input type="submit">
</form>
</body>
</html>
Related
I have list of URL links on my google app script html page. I have a download button. When I click the download button, I want to download all files from my google drive to my computer using the URL links.
To start with:
I tried for one link to put it in a folder on my google drive. But it doesn't work.
I have shared the spreadsheet file in public domain here https://docs.google.com/spreadsheets/d/1sXWWAdfEIJSj9_QPBjkR6CKhd4bzrYIMa4hImipySWI/edit?usp=sharing
The web link: https://script.google.com/macros/s/AKfycbwkBfuZzSDV5UgQLugJoWXH-2pDrtqsd2Ph5HAkx_oFOvR6gD0/exec
please search for a name "sam"
Would you help me please?
Thank you.
// Start html part
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p>Enter the name: sam </p>
<div>
<form id="searchform">
<input name="nameperson" type="text">
<input type="submit" value="search">
</form>
</div>
<div id="result">
</div>
<div id="download" hidden="true">
<button> download </button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#searchform").submit(function(){
google.script.run.withSuccessHandler(function(valreturn){
var response=JSON.parse(valreturn);
var newHTML=[];
newHTML.push('<table>' + '<tr>' +'<th>'+"Name"+'</th>'+
'<th>'+"URL"+'</th>'+ '<tr>');
for( var i=response.length-1; i >= 0 ; i--){
newHTML.push('<tr>' + '<td>' + response[i].name + '</td>' +
'<td>' + '<a href= " ' + response[i].url + ' " target="_blank" >' + "url" + '</a>' + '</td>' + '</tr>');
}
$("#result").html(newHTML.join(""));
$("#download").show();
}).seachRecord(this);
});
$("#download").click(function() {
alert("how can I download these files ?");
});
});
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
</script>
</body>
</html>
//end html
function getFilepdf() {
var fileURL="https://drive.google.com/file/d/0BybO_Qe9EIRKZExPSWJJXzl1ajQ/view";
var response = UrlFetchApp.fetch(fileURL);
var fileBlob = response.getBlob();
fileuploadpdf(fileBlob);
}
function fileuploadpdf(filedata){
try {
var dropbox = "stackflowfolder";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var blob = filedata;
var file = folder.createFile(blob);
} catch (error) {
return error.toString(); }
}
I am attempting to display recent blog posts from a wordpress blog on my non-wordpress HTML site with Google Feed API.
I managed to display the feed but now I am stuck getting the featured images to display as well. Currently it only displayes the list of the 10 recent "headlines" if you will.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"> </script>
<script type="text/javascript">
google.load("feeds", "1")
</script>
<script type="text/javascript">
var feedUrl = "http://www.harbordev.com/blog/feed/";
var feedContainer=document.getElementById("feedContainer");
$(document).ready(function() {
var feed = new google.feeds.Feed(feedUrl);
feed.setNumEntries(10);
feed.load( function(result) {
list = "<ul>";
if (!result.error){
var posts=result.feed.entries;
for (var i = 0; i < posts.length; i++) {
list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" + posts[i].title + "</a></li>";
}
list+="</ul>";
feedContainer.innerHTML = list;
}
else {
feedContainer.innerHTML = "Unable to fetch feed from " + feedUrl;
}
});
});
</script>
</head>
<body>
<section class="section swatch-white">
<div class="container">
<div class="row">
<div class="col-md-12" id="feedContainer">
</div>
</div>
</div>
</section>
</body
How do I show the images as well? On a different entry on here I saw a suggestion like this:
var bmfx = entry.mediaGroups[0].contents[0].thumbnails[0].url;
Should this work, where would I insert it? My Javascript skill is mediocre unfortunately, therefore if someone can point me in the right direction or assist with some code I would greatly appreciate it.
You can see the documentation of the resulting JSON here. The images are in the content field (posts[i].content):
for (var i = 0; i < posts.length; i++) {
list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" +
posts[i].title + "</a><p>" + posts[i].content + "</p></li>";
}
If you want to show only the images, you could do that with jQuery
var images = "";
$(posts[i].content).find('img').each(function() {
images += this.outerHTML;
});
And then instead of posts[i].content, append images variable to the list
I am trying to display the json response into a html table. One of the fields is an image that I want to be shown in the table. My current code just displays the last key/value from the json response, instead of all in the table.
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="http://www.tutorialspoint.com/scripts/style.css" />
<script type="application/javascript">
function loadJSON()
{
var http_request = new XMLHttpRequest();
var data_file = "/vcaWS/api/sources";
http_request.onreadystatechange = function(){
if (http_request.readyState == 4 )
{
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);
for(var i=0;i<jsonObj.length;i++){
document.getElementById("title").innerHTML = jsonObj[i].title;
document.getElementById("logo_sm").innerHTML = jsonObj[i].logo_sm;
}
}
}
http_request.open("GET", data_file, true);
http_request.send();
}
</script>
<title>Test JSON</title>
</head>
<body style="width:960px">
<h1>Test JSON</h1>
<table class="src">
<tr><th>Title</th><th>Logo_Small</th></tr>
<tr>
<td><div id="title">Youtube</div></td>
<td><div id="logo_sm">Youtube</div></td>
</tr>
</table>
<div class="central">
<button type="button" onclick="loadJSON();">JSON Store </button>
</body>
</html>
The json response is as below:
[
{
"title":"Virtual Magician s Video Podcast",
"logo_sm":"http://a5.mzstatic.com/us/r30/Podcasts/v4/cf/53/e1/cf53e162-f4c7-7842-173d-7f7f2a79fd7e/mza_854261567010408552.100x100-75.jpg"
},
{
"title":"shralp! //surfing video podcast//",
"logo_sm":"http://a5.mzstatic.com/us/r30/Podcasts/v4/ea/ff/d0/eaffd0d3-b1f9-e886-2ffd-5ff14bcb5edb/mza_1030973830906343038.100x100-75.jpg"
},
{
"title":"this WEEK in TECH Video (small)",
"logo_sm":"http://a4.mzstatic.com/us/r30/Podcasts2/v4/fb/59/fc/fb59fc2d-b1a2-98cf-e1f8-32bae7217912/mza_5512264877031055372.100x100-75.jpg"
}
]
Also, I was hoping to show the jpg file as an image. Currently, its a text value shown in the html table.
This will add the JSON data as new rows in the table.
var rows = '';
for(var i=0;i<jsonObj.length;i++){
rows += '<tr><td class="title">' + jsonObj[i].title + '</td><td class="logo_sm">' + jsonObj[i].logo_sm + '</td></tr>';
}
document.getElementsByTagName('table')[0].innerHTML += rows;
You are iterating through the JSON object but on each iteration you are replacing the innerHTML of the rows with the ith object.
Therefore it will only show the last item of the JSON object.
Just get the table and insert a row for each item.
var mytable = document.getElementById("tableid");
for(var i=0;i<jsonObj.length;i++){
var myrow = mytable.insertRow(0);
var mytitlecell = myrow.insertCell(0);
var mylogocell = myrow.insertCell(1);
mytitlecell.innerHTML = jsonObj[i].title;
mylogocell.innerHTML = "<img src='"+jsonObj[i].logo_sm+"'/>";
}
I am building a little gallery in Html and I am having some trouble with it. I have a for loop that creates an img every time it iterates. The problem is that once I have all the images produced and I try to pass a unique variable to my other function which displays the clicked image, there are no unique values I can pass.
I'm probably not explaining it well, but if you run it you'll see what I mean. Any help figuring out how I can obtain a unique identifier for each of the thumbnails would be greatly appreciated.
Below is the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function loadPictures(){
var a = new Array();
a[0] = '1-m';
a[1] = '2-m';
a[2] = '3-m';
document.getElementById('inWin').innerHTML='<img src="images/1-m.png" width="620px" height="auto" />';
var ci = document.getElementById('pics');
var newImg, divIdName;
for(x=0; x<a.length; x++)
{
newImg = document.createElement('img');
divIdName = 'portrait'+x;
newImg.setAttribute('id',divIdName);
newImg.setAttribute('src', 'images/' + a[x] + 'thumb.png');
newImg.setAttribute('onclick','changeContent(x);'); // for FF
newImg.onclick = function() {changeContent(x);}; // for IE
ci.appendChild(newImg);
}
}
</script>
<script>
function changeContent(num){
alert(num);
var a = new Array();
x=num;
a[0] = '1-m';
a[1] = '2-m';
a[2] = '3-m';
document.getElementById('inWin').innerHTML='<img src="images/'+ a[x] +'thumb.png" width="620px" height="auto" />';
}
</script>
</head>
<body onload="loadPictures()">
<div id="inWin">
</div>
<div id="pics">
</div>
</body>
</html>
Since I am a newer member I can't upload the image, sorry.
Each of the images already has a unique identifier, the ID attribute. You can work with this in different ways to get what you want. here's an idea of what it would look like:
<script>
var a = [ '1-m',
'2-m',
'3m'
];
function loadPictures(){
document.getElementById('inWin').innerHTML='<img src="images/1-m.png" width="620px" height="auto" />';
var ci = document.getElementById('pics');
var newImg, divIdName;
for(x=0; x<a.length; x++)
{
newImg = document.createElement('img');
divIdName = 'portrait'+x;
newImg.setAttribute('id',divIdName);
newImg.setAttribute('src', 'images/' + a[x] + 'thumb.png');
if(document.addEventListener)
newImg.addEventListener('click', changeContent, false);
else if(document.attachEvent)
newImg.attachEvent('onclick', changeContent);
ci.appendChild(newImg);
}
}
function changeContent(){
x = this.id.split('portrait')[1];
document.getElementById('inWin').innerHTML='<img src="images/'+ a[x] +'.png" width="620px" height="auto" />';
}
</script>
I'm following the official Chrome Extension tutorial called Chritter where they fetch tweets from Twitter and place them into the extension. I'm trying to do similar except im trying to fetch items from an xml file.
My XML
<xml>
<item>
<title>Title 1</title>
<description>Description 1</description>
<duration>55:00</duration>
<published>28/01/2011</published>
</item>
<item>
<title>Title 2</title>
<description>Description 2</description>
<duration>55:00</duration>
<published>28/01/2011</published>
</item>
</xml>
background.html
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var fetchFreq = 30000; // how often we fetch new items (30s)
var req; // request object
var unreadCount = 0; // how many unread items we have
var items; // all currently fetched items
getItems();
//setInterval(getItems, fetchFreq);
function getItems(){
req = new XMLHttpRequest();
req.open("GET", "http://urltoxml.com/xmlfile.xml", false);
req.onload = processItems;
req.send();
}
function processItems(){
xmlDoc = req.responseXML;
items = xmlDoc.getElementsByTagName("item");
unreadCount += items.length;
if (unreadCount > 0) {
chrome.browserAction.setBadgeBackgroundColor({
color: [255, 0, 0, 255]
});
chrome.browserAction.setBadgeText({text: '' + unreadCount});
}
items = xmlDoc.concat(items);
}
</script>
</head>
</html>
I don't know how to get the fetched items from the background.html and displayed onto the popup.html ?
popup.html
<html>
<head>
<link rel="stylesheet" href="popup.css" />
<script src="util.js"></script>
<script>
var bg; // background page
// timeline attributes
var timeline;
var template;
var title;
var link;
var description;
onload = setTimeout(init, 0); // workaround for http://crbug.com/24467
// initialize timeline template
function init() {
chrome.browserAction.setBadgeText({text: ''});
bg = chrome.extension.getBackgroundPage();
bg.unreadCount = 0;
timeline = document.getElementById('timeline');
template = xpath('//ol[#id="template"]/li', document);
title = xpath('//div[#class="text"]/span', title);
content = xpath('//div[#class="text"]/span', template);
update();
}
function update(){
// how to do this ?
// See Chritter example below with JSON,
// except i want to it with xml ?
}
</script>
</head>
<body>
<div id="body">
<ol id="timeline" />
</div>
<ol id="template">
<li>
<div class="text">
<a></a>
<span></span>
</div>
<div class="clear"></div>
</li>
</ol>
</body>
</html>
The way the Chritter extension does it only seems to work with JSON. Here is how they do it:
// update display
function update() {
var user;
var url;
var item;
for (var i in bg.tweets) {
user = bg.tweets[i].user;
url = 'http://twitter.com/' + user.screen_name;
// thumbnail
link.title = user.name;
link.href = openInNewTab(url);
image.src = user.profile_image_url;
image.alt = user.name;
// text
author.href = openInNewTab(url);
author.innerHTML = user.name;
content.innerHTML = linkify(bg.tweets[i].text);
// copy node and update
item = template.cloneNode(true);
timeline.appendChild(item);
}
}
Chritter background.html
<html>
<head>
<script type="text/javascript">
var fetchFreq = 30000; // how often we fetch new tweets (30s)
var req; // request object
var unreadCount = 0; // how many unread tweets we have
var tweets; // all currently fetched tweets
getTweets();
setInterval(getTweets, fetchFreq);
// fetch timeline from server
function getTweets() {
req = new XMLHttpRequest();
req.open('GET', 'http://twitter.com/statuses/public_timeline.json');
req.onload = processTweets;
req.send();
}
// process new batch of tweets
function processTweets() {
var res = JSON.parse(req.responseText);
unreadCount += res.length;
if (unreadCount > 0) {
chrome.browserAction.setBadgeBackgroundColor({
color: [255, 0, 0, 255]
});
chrome.browserAction.setBadgeText({text: '' + unreadCount});
}
tweets = res.concat(tweets);
}
</script>
</head>
</html>
Any help much appreciated! Thanks!
If you want to access items var from a background page then:
var items = chrome.extension.getBackgroundPage().items;
I am not sure what the exact question is, but the general practice is to store the data from background page into localstorage and then access this data from the popup page.
http://www.rajdeepd.com/articles/chrome/localstrg/LocalStorageSample.htm