I wrote a script to add an image from my Google Drive and some custom text to a Google Doc. (I got the image insertion code from here).
The resulting document is created ok, but my image is added twice for some reason...
function myFunction(e) {
var doc = DocumentApp.create('fileTest');
var body = doc.getBody();
var matchedFiles = DriveApp.getFilesByName('logo.png');
if (matchedFiles.hasNext()) {
var image = matchedFiles.next().getBlob();
var positionedImage = body.getParagraphs()[0].addPositionedImage(image);
}
body.appendParagraph('Test line of text for testing');
doc.saveAndClose();
}
However, if I get rid of my appendParagraph code (body.appendParagraph(t1);) I only get one image (but obviously without the paragraph of text I want)
What's going on here? And how do I add both one picture and my paragraph of text?
I have not even the slightest clue as to why, but I found a way to make this work.
Switching the order of my code seemed to do the trick. I simply moved the image-insertion code to the end (i.e., after the appendParagraph code), and it worked fine. No duplicate image!
function myFunction(e) {
var doc = DocumentApp.create('fileTest');
var body = doc.getBody();
body.appendParagraph('Test line of text for testing');
var matchedFiles = DriveApp.getFilesByName('logo.png');
if (matchedFiles.hasNext()) {
var image = matchedFiles.next().getBlob();
var positionedImage = body.getParagraphs()[0].addPositionedImage(image);
}
doc.saveAndClose();
}
Related
What is so special about CKEditor on this page:
http://nightly.ckeditor.com/17-04-04-06-09/full/samples/
that you can effortlessly paste an image into the editor with a Chrome Browser? By effortlessly I mean:
Cut image to clipboard
Move cursor into editor.
Place cursor where you want image.
Ctrl-V
and you are done...just like in FF. This is the only sample CKEditor I have seen that allows such a convenient pasting.
I do not know what you mean by 'special', but if you're curious how it works...
How IT does it specifically would take too long to decipher as it's annoyingly obfuscated. Set a breakpoint at the first return of the word "paste" when you ctrl+f it (in ckeditor.js through dev console) and proceed to step through if you're brave. I got most of the way before I accepted it wasn't anything unique and not worth my time.
What's special about it? Nothing really... Trigger the event onPaste, get the images from the clipboard if they exist and read it .getAsFile, and then read said blob (output from .getAsFile) using .readAsDataURL and insert the result into an img elements src attribute.
Example:
<textarea id="pasteArea" placeholder="Paste Image Here"></textarea>
<img id="pastedImage"></img>
document.getElementById('pasteArea').onpaste = function(event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
document.getElementById("pastedImage").src = event.target.result;
};
reader.readAsDataURL(blob);
}
}
I would like to two show a Chart and also present an url with a link to a bigger Chart. The small preview-image looks and works fine:
<canvas id="image"></canvas>
var ct1 = document.getElementById("image").getContext("2d");
ct1.canvas.width = document.getElementById("image").offsetWidth;
ct1.canvas.height = document.getElementById("image").offsetHeight;
var Chart1 = new Chart(ct1).Line(lineChartData1,options);
The canvas is wrapped in a div, that's why offsetWidth and offsetHeight (to fill this additional div-element). Cause of the responsive-design there is no fixed image. Anyway, this works perfectly. For the URL to the "bigger" image I want to have the URL. I know the toDataURL() will help.
var url = document.getElementById("image").toDataURL();
document.write(url);
There are two disturbing problems with it:
The URL with this way exisists and, but the image has no content.
I also want to give the canvas-image a new size, like I managed with ct1.canvas.width and ct1.canvas.height, but it seems I cannot add this to the toDataURL.
What's wrong with the code?
Okay, I think I got it. Chart.js is animating the charts, so the toDataURL() I mentioned in my first question rendered only an empty image. We have to initiate the toDataURL, not before the animation is done. We handle that with the options:
var options = {
onAnimationComplete: done
}
and a tiny function:
function done() {
console.log('done');
var url=document.getElementById("canvas").toDataURL();
document.getElementById("canvas_link").href=url;
}
I think that's all.
function pushImage () {
var img = new Image();
img.src = '/waroot/chart/chart.png';
document.getElementById("test1").innerHTML = "<img src='/waroot/chart/chart.png'>";
document.getElementById("test2").innerHTML = img;
}
Test 1 works and shows the image, but test 2 doesn't. I am not sure how to solve it but i will need the way test 2 works further along my project since i'm going to have to circle through a large amount of images.
The images are created by JFreeCharts, saved to png and then have to be posted to a site. As a side question: is it possible to push the freecharts objects straight to the jscript instead of having to save them prior (i could throw them into the dictionary and then look them up later but i'm not sure if this works)
Use .appendChild(img) instead of .innerHTML:
function pushImage () {
var img = new Image();
img.src = '/waroot/chart/chart.png';
document.getElementById("test1").innerHTML = "<img src='/waroot/chart/chart.png'>";
document.getElementById("test2").appendChild(img);
}
Demo
This is because img is an image object, not an html string, so you have to append it to the DOM.
P.S., don't forget that the alt attribute is required in the img tag!
I have an HTML5 canvas which is displaying a number of images. I also have some simple HTML <p></p> tags on my page below the canvas.
I want to update the contents of the <p></p> tags when the cursor hovers over these images, and I found a quick tutorial at: http://www.quirksmode.org/js/newmouseover.html which seemed to suggest it could teach you how to do this.
I've followed the tutorial, however, when I view my page in the browser now, I get a console error that says
getElementByTagName is not a function
I've not seen this function before, and I'm just wondering if it is actually a pre-defined function, or if it's one that the writer of the tutorial has defined themselves...? I couldn't see anything on that page where the author has defined the function, so I thought it might be a pre-defined one, but I'm not sure. Does anyone know?
Edit
Ok, so correcting the typo fixed it, and the function is now being called. However, I'm currently calling it from my window.onload function, so as soon as the page loads, the paragraph has already been updated- it's not actually conditional on the onmouseover event being called.
My window.onload function looks like this:
window.onload = function () {
var sources = [];
sources[0] = document.getElementById("building").src,
sources[1] = document.getElementById("chair").src,
sources[2] = document.getElementById("drink").src,
sources[3] = document.getElementById("food").src,
/*There are roughly 30 lines like this adding images in the same way */
if (document.getElementById) {
var x = document.getElementById('mouseovers')
.getElementsByTagName('IMG');
} else if (document.all) {
var x = document.all['mouseovers'].all.tags('IMG');
} else {
return;
}
for (var i = 0; i < x.length; i++) {
console.log("for loop adding onmouseovers is being called");
x[i].onmouseover = displayAssetDescriptionTip();
}
loadImages(sources, drawImage);
drawGameElements();
drawDescriptionBoxes();
stage.add(imagesLayer);
};
I tried moving the if statements into a function called displayAssetDescriptionTip(), and this function now looks like this:
function displayAssetDescriptionTip() {
if (document.getElementById) {
var x = document.getElementById('mouseovers')
.getElementsByTagName('IMG');
} else if(document.all) {
var x = document.all['mouseovers'].all.tags('IMG');
}else {
return;
}
for (var i = 0; i < x.length; i++) {
console.log("for loop adding onmouseovers is being called");
x[i].onmouseover = displayAssetDescriptionTip();
}
document.getElementById('tipsParagraph').innerHTML = "Assets are items that"
+ " can be bought or sold for cash.";
console.log("displayAssetDescriptionTip being called");
}
However, the onmouseover event doesn't appear to be firing when I hover the cursor over the images to which it's been added- any ideas why this is?
getElementByTagName is not a function.
getElementsByTagName is though :)
It's plural because it returns every element that matches the given tag.
I am having an small code to select an text in CKEditor. For that i am using following code in javascript.
var docx = editor.document;
var elementx = docx.getById(id);
editor.getSelection().selectElement(elementx);
editor.getSelection().scrollIntoView(true);
It works fine in Mozilla Firefox.But in IE9 it throws an error as selectElement is not an object. So i checked the code and found that getSelection() having an null value. Please help me how to solve it.
I tried some answers given in various sites even in CKEditor fourms nothing helped me.
That's the correct solution:
var editor = CKEDITOR.instances.editor1;
editor.focus(); // Without this selection will be null on IE.
var element = editor.document.getBody().getLast(),
selection = editor.getSelection();
selection.selectElement(element); // You have to reuse selection.
selection.scrollIntoView();
I tested this from the console on Firefox, Chrome and IE8 on http://ckeditor.com/demo and it worked.
This might work.
var docx = editor.document;
var elementx = docx.getById(id);
var resRange = new CKEDITOR.dom.range( editor.document );
resRange.selectNodeContents( elementx );
resRange.collapse();
editor.getSelection().selectRanges( [ resRange ] );
resRange.endContainer.$.scrollIntoView();
This may have something to do with what IE9 considers to be an object. Have you tried selecting different element types?
Maybe grabbing the parent of the element will give you something that IE9 considers to be an object, you can try this:
var docx = editor.document;
var elementx = docx.getById(id);
var parentx = elementx.getParent();
parentx.scrollIntoView();