I am trying to get a png image in google drive to appear on a google apps script html page. I can get the image to appear on the script html page if it is just at a URL somewhere on the web (see commented out line below), but not from google drive. Here is part of the code where I am trying to get as a blob and then use it in an image tag:
function getImage() {
//The next 2 lines don't produce the image on the page
var image = DriveApp.getFileById('File Id Goes Here').getBlob().getAs('image/png');
var image = '<img src = "' + image + '" width = "90%">'
//Note, the next line uncommented produces an image on the page
//var image = '<img src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width = "90%">'
return image
}
function doGet() {
var htmlToAppend = getImage();
var html = HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('Google Image').append(htmlToAppend).setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
The result is a missing image on the html page produced by the script, with the URL for the missing image ending in script.googleusercontent.com/Blob
Info on Blob is here: https://developers.google.com/apps-script/reference/base/blob (open in a separate page/tab)
Any help is appreciated.
If you can see the Using base64-encoded images with HtmlService in Apps Script or Displaying files (e.g. images) stored in Google Drive on a website, there are some workaround to get the image from drive.
One workaround is using the IFRAME sandbox mode, but this doesn't support old browsers.
All that's required is to call setSandboxMode() on your template, and your data URIs should work as expected:
var output = HtmlService.createHtmlOutput(
'<img src="data:' + contentType + ';base64,' + encoded + '"/>'
);
output.setSandboxMode(HtmlService.SandboxMode.IFRAME);
The second is using the permalink of the file:
https://drive.google.com/uc?export=view&id={fileId}
But be noted that Serving images in an Apps Script through HtmlService is deprecated .
<img src="https://googledrive.com/host/0B12wKjuEcjeiySkhPUTBsbW5j387M/my_image.png" height="95%" width="95%">
Also, refrain from using same variable names to avoid error from occuring
Hope this helps.
Related
I wanna need to see this picture in my site from the below url
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoyZ-M6C9WpiR6MlWAZ0sNTiXsDWM8_ln3WA&usqp=CAU
And I wanna do this for my rest api project. After entering text instead of this my private textmaker link must show the result image like this in my website, this is What I needed! 🥲
function add_img() {
var img = document.createElement('img');
img.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoyZ-M6C9WpiR6MlWAZ0sNTiXsDWM8_ln3WA&usqp=CAU';
document.getElementById('body').appendChild(img);
}
I am trying to import photos from a local file on my computer to my HTML file. I have managed to do this but I need to speed up the time it takes to load in on the page, 2.4mins. My idea was to load a smaller file size of the image, 200px by 200px and then load the full-sized image in the background. The problem that I am encountering is that I am not able to integrate my code of loading the images from a local file with the lazy loading code. can anyone help?
const $spans = $("span");
const {
length
} = $spans;
$spans.each(function(i) {
$(this).append("<img src='Images/With Out Logo/Insta Photo-" + (length - i) + ".JPG' />");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<span class="Images"></span>
I'd look into using intersection observerAPI for lazy loading images, there's an excellent Google Developer Guide on this whole subject.
A basic example of this is:
Alter your <img> tags to add:
data-src
data-srcset
These point to the image to load once the element is being looked at in the "viewport".
Example:
<img class="lazy" src="placeholder.jpg" data-src="lazy-img-1x.jpg" data-srcset="lazy-img-1x.jpg 1x">
Then in a <script> tag or wherever you run your page's code just have a function that listens for the DOMContentLoaded event:
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Possibly fall back to a more compatible method here
}
});
Here's a CodePen from the guide with a better example.
Before you upload images for use on a website, you should optimize them first to prevent slow load time/your current issue.
As your images are seemingly stored in a local folder, I would suggest to first, make a back-up of the folder containing the images [to an external hard drive or another area of your hard drive].
Then, visit an image compression site (such as tinypng, - I use this but there are others, e.g CompressJpeg) Compressing images will greatly reduce the file size but the images will appear the same. You can upload multiple images at a time, and download bundles of compressed images as a zip. Ensure that when you extract the images, that they are named as you would like (and that they don't have a '1' at the end [as usually added, to indicate that the file is a copy/2nd version])
When you run your code using the smaller images, you should find that your processing time is reduced substantially.
Hope this helps
A sidenote - Both the afore-mentioned websites handle both jpgs and png formats - the website names can be misleading! :)
The following image: http://www.oscn.net/dockets/GetDocument.aspx?ct=tulsa&cn=SC-2011-361&bc=1014242988&fmt=tif
How would I go about downloading this image and displaying it in html using javascript?
Here you go..
If you need to modify any properties of the image (size/color enhancement/etc.) use new_elem.setAttribute('attribute', 'value'); Just like in HTML <img attribute="value" />
var element = document.getElementById('mytargetlocation');
var new_elem = document.createElement('img');
var locationtoimage = 'https://www.sourcecertain.com/img/Example.png';
/*
Note: if your site uses HTTPS, this file will need to be loaded
over HTTPS, if it doesn't, you could just use the original
URL without downloading the image at all
*/
new_elem.setAttribute('src', locationtoimage);
new_elem.setAttribute('alt', 'image not found at specified URL');
element.append(new_elem);
<div id="mytargetlocation"></div>
I have download the source from this http://www.storminthecastle.com/projects/imagefilters1/. It is regarding some image manipulation in html5 canvas.
Inside the source, it will load the image located in a local directory...
function reset() {
imageURL = "./sandbox.jpg";
imageFilter = grayscale;
document.querySelector("#filename").innerHTML = "";
update();
}
The above is working in my project. But I am trying to load an image from an url, so I modified it to the following...
function reset() {
imageURL = "http://xxxxxx.jpg";
imageFilter = grayscale;
document.querySelector("#filename").innerHTML = "";
update();
}
When I test it, the image is being displayed correctly. However, all the features are not working anymore and I don't know why. I have no idea why it cannot take in url as the argument and I don't know how to modify it to make it work. Any helps?
Thanks for the link provided. I further read on the COR issue and managed to locate that line of coding to be added.
img.crossOrigin = '';
//img domain different from app domain
img.src = 'http://xxx.jpg';
Simply set the crossOrigin property of the image to make it work. Basically, this will allow cross domain image for manipulation. Without it, any cross domain will be blocked and you will get the security exception. Really thanks for the helps! :)
To add-on, I have only tested using Chrome and is working.
I'm really new to Adobe Air, and I'm trying to get a list of YouTube videos by a specific user using the YouTube API through JavaScript.
I've tried several examples that all seem to work great when I simply click on it (inside Aptana Studio) and Run as a JavaScript Web Application.
As soon as I try to run the same thing as an Adobe Air Application, I don't get any data. Why is that? I don't know if there's something very obvious that I'm overlooking or what.
This is what I was looking at most recently:
http://code.google.com/apis/youtube/2.0/developers_guide_json.html
Can someone point me in the right direction or tell me why this isn't working in Adobe Air?
Update: OK, here's how I got it working, for anybody visiting from 2019 (tip of the hat to http://xkcd.com/979/):
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
backgroundColor="#000000" verticalAlign="middle" horizontalAlign="center"
creationComplete="init()" borderStyle="solid">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
public var html : HTMLLoader = null;
protected var url : String = null;
protected function init()
{
/* Your embedded html with all the youtube REST calls is in the "local"
subdirectory of the application directory. Note the relation between
the local url, the sandbox root and the remote url. */
var localUrl : String = "app:/local/yt.html";
var sandboxRoot : String = "http://youtube.com/";
var remoteUrl : String = "http://youtube.com/local/yt.html";
html = new HTMLLoader();
html.addEventListener(Event.COMPLETE, htmlLoaded);
/* Embed your youtube html in an iframe that is loaded dynamically. You
could also just have this html code in a separate html file and load
it through html.load() instead of html.loadString(). */
var htmlString : String = "<html>"
+ "<body><center>"
+"<iframe width='100%' height='100%' src='" +remoteUrl
+"' sandboxRoot='"+sandboxRoot+"' documentRoot='app:/' "
+" allowCrossDomainXHR='true'" /* May not be necessary */
+" id='yt' name='yt'></iframe>"
+ "</center></body></html>";
/* The next line is needed to allow the REST API in the embedded html
to call home when loading through loadString. */
html.placeLoadStringContentInApplicationSandbox = true;
html.loadString(htmlString);
}
protected function htmlLoaded(e:Event):void
{
html.removeEventListener(Event.COMPLETE, htmlLoaded);
frame.addChild(html);
trace("html load complete.");
}
]]>
</mx:Script>
<mx:UIComponent id="frame" width="100%" height="100%" visible="true"/>
</mx:HBox>
Note that this is a cleaned up version of my code and I haven't tried running it, so it may not work out of the box, but that's essentially it.
I believe the reason is that AIR does not allow external JavaScript files to be loaded:
http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7f0e.html#WS5b3ccc516d4fbf351e63e3d118666ade46-7ef7
I guess one option is to muck about with their cross-scripting and sandboxing stuff...