I have the following code, which is part of a larger program. I am trying to insert an image from my Google drive into a google doc and have it resized and centered. So far I am able to get the program to insert the image and resize it, but I do not know how to center an inlineImage. I am new to using google apps script and I have basically been copying other people's examples and modifying them. Your help would be appreciated. Let me know if I need to clarify. Again, I am trying to CENTER the inlineImage (var inlineI). Thanks!
var GDoc = DocumentApp.openByUrl("URL"); //I deleted my actual URL
function insertImageFromDrive(){
var img = DriveApp.getFileById(myImageFileID).getBlob(); //I deleted my actual image ID
var inlineI = GDoc.appendImage(img); //insert image
//resizing the image
var width = inlineI.getWidth();
var newW = width;
var height = inlineI.getHeight();
var newH = height;
var ratio = width/height;
Logger.log('w='+width+'h='+height+' ratio='+ratio);
if(width>320){
//max width of image
newW = 320;
newH = parseInt(newW/ratio);
}
inlineI.setWidth(newW).setHeight(newH); //resizes the image but also needs to center it
}
You need to center-align the paragraph that contains your image. Add this code to do it:
var styles = {};
styles[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.CENTER;
inlineI.getParent().setAttributes(styles);
getParent() method gets the container element (paragraph) containing your image. setAttributes() method applies custom style attributes (center alignment in this case) to the element.
Related
I'm struggling pretty hard with the documentation on the HTML2Canvas script. Specifically the options located here. I've figured out the syntax somewhat by using objects like this: html2canvas(element, {option: value}); but I have no idea what actual values the script is expecting.
My specific goal with this is to have a div that shows on my site that's roughly 1000px x 500px but saves an image double that size. (I want to save a 1920 x 1080 image, but I want the customizable div to fit comfortably on the screen while it's built.)
I'm guessing I need to use a combination of the width, height, scale, windowWidth, and windowHeight options, but I can only figure out the value syntax for width and height. Is anyone out there familiar with this script that can point me in the right direction?
Here is an example from my own website - I grab the contents of a div on the page, then render it to canvas like this:
var target_container = document.getElementById("id_of_div_I_want_to_render_on_canvas");
html2canvas(target_container, {
onrendered: function(canvas) {
var canvas_image = canvas.toDataURL("image/png"), // change output image type here
img = new Image(); // create a new blank image
img.src = canvas_image; // set the canvas_image as the new image's source
img.width = el.offsetWidth; // make the image the same width and height as the target container
img.height = el.offsetHeight;
img.onload = function () {
// do stuff
});
},
width: <set your desired canvas width if you do not use my sizing above for img.width, img.height - e.g. '1000px'>,
height: <set your height e.g. '500px'>
});
For my purposes, the key property is the onrendered callback, which allows you to call a function after render and store the "on the fly" generated canvas in an image.
I am building an alloy app where I have the requirement to authenticate a user based on his tap location on an image, loaded with ImageView. The image has few marked points of authentication, any of which when tapped on, shows whether the tap location was right or wrong. How can I build this?
So far, I am only able to get the tapped location in a touch event listener and the image's properties using ImageView's rect property. How can I pinpoint the marked locations in the image to identify a tap over those specific positions?
Here is the code I am using (derived from this: How to convert coordinates of the image view to the coordinates of the bitmap?):
// eventX, eventY are x and y coordinates of tapped location
function getScaledCoordinates(imageView, eventX, eventY) {
//original height and width of the image
var originalImageBounds = imageView.toBlob();
var intrinsicHeight = originalImageBounds.height;
var intrinsicWidth = originalImageBounds.width;
//height and width of the visible (scaled) image
var imageBounds = imageView.getRect();
var scaledHeight = imageBounds.height;
var scaledWidth = imageBounds.width;
//Find the ratio of the original image to the scaled image
var heightRatio = intrinsicHeight / scaledHeight;
var widthRatio = intrinsicWidth / scaledWidth;
//get the distance from the left and top of the image bounds
var scaledImageOffsetX = (eventX - imageBounds.x);
var scaledImageOffsetY = (eventY - imageBounds.y);
// get the units in device pixel
// getUnitsInDevicePixel(scaledImageOffsetX, scaledImageOffsetY)
//scale these distances according to the ratio of your scaling
var originalImageOffsetX = scaledImageOffsetX * widthRatio;
var originalImageOffsetY = scaledImageOffsetY * heightRatio;
// Return the coordinates in original image adjusted for scale factor
return [originalImageOffsetX, originalImageOffsetY];
}
I have coordinates of the original marked points stored in a data structure.
I am even able to get this to work, but the solution lacks accuracy. Sometimes, the tapped location is mapped correctly to the original image, other times it's not. Any suggestions to improve on this?
I was looking for something along the lines of clickable area of image, but can't find enough documentation to implement these in Titanium. Also, I read about the idea of placing invisible buttons at the marked locations, but not sure how to get this working in Titanium.
Any help will be appreciated. Thanks in advance!
https://jsfiddle.net/L9xnzqo8/7/
I need the overlay to always be on top of the image no matter what the screen is resized to.
I tries using JS but it doesn't work:
var width = $('.showreel-img').width();
console.log(width);
document.getElementById("video-overlay").style.width = width;
I'm drawing a image to a canvas, and when doing so the image gets downscaled to the canvas(which makes it lose quality) even though the image is the same size as the canvas, thats because the img does a good job scaling down the actual img that in reality has a bigger naturalheight and naturalwidth. I know there is possible ways to make this quality better, however i have no need of actually showing this canvas to the user/no need of downscaling. Therefore am i wondering if there is any way to drawImage that is bigger than the screen and hold it somewhere? Heard someone mention a box object or a camera object somewhere but couldn't really get use of that information only.
Question, is it possible to draw a canvas bigger than the screen? in that case how?
This is the code im working with atm
var image = document.getElementById('insertedImg');
var height = $("#insertedImg").height();
var width = $("#insertedImg").width();
var c=document.getElementById("canvass");
var ctx=c.getContext("2d");
c.height=height;
c.width=width;
ctx.drawImage(image,0,0,width,height);
Use an offscreen canvas, you just need to create a new canvas and set its height and width accordingly. Then you can append it to an element or export the image as a base64 string or whatever you need.
//canvas is not visible unless appended to a DOM element
var canvas = document.createElement('canvas');
canvas.width = $("#insertedImg").height();
canvas.height = $("#insertedImg").width();
var ctx = canvas.getContext('2d');
//do the drawing, etc.
ctx.drawImage(...);
//export the image
var img = canvas.toDataURL("image/png");
I am developing a Firefox extension that uses the canvas element. It is added programatically (The canvas element is not there from the beginning, it is created and then I try to append).
The code used in the XUL (the mozilla XML) in very simple, adds NO elements, and only loads the script using the common tag.
The problems i've faced are, first, when the line
var myCtx = myCanvas.getContext("2d");
runs, the firefox console error returns TypeError: myCanvas.getContext is not a function.
Then, the other error is, even if I dont try to paint the canvas or anything, when I run the code, the line that appends the canvas to the body of the document also does not work, returning that document.body is undefined.
The script is as follows:
endSelectBox : function(aEvent){
mouseX2 = aEvent.clientX;
mouseY2 = aEvent.clientY;
//Start creating new canvas to be added in this position.
var canvasWidth, canvasHeight;
canvasWidth = Math.abs(mouseX2 - mouseX); //Calculates canvas width to be used.
canvasHeight = Math.abs(mouseY2 - mouseY); //Calculates canvas height to be used.
alert("pre id height width");
//Set canvas values for size.
var myCanvas;
myCanvas = document.createElement("canvas");
myCanvas.setAttribute("id", "canvas1");
myCanvas.setAttribute("height", canvasHeight.toString());
myCanvas.setAttribute("width", canvasHeight.toString());
//Set canvas fixed position on the page.
alert("pre CSS");
var top = Math.max(mouseY, mouseY2);
top = top.toString();
top = top + "px";
var left = Math.min(mouseX, mouseX2);
left = left.toString();
left = left + "px";
myCanvas.style.top = top;
myCanvas.style.left = left;
//myCanvas.style.position = "fixed";
//Paint canvas interior. //Not working because getContext returns null. No idea why, try to figure this out.
alert("pre painting");
var myCtx = myCanvas.getContext("2d");
alert("pre fillstyle");
myCtx.fillStyle = "#150000";
alert("pre fillrect");
myCtx.fillRect(0,0, canvasWidth - 1, canvasHeight - 1);
document.body.appendChild(myCanvas);// This never runs. WHY??
alert("worked");
}
The solution was to create the element using the document.createElementNS() function, and also when accessing the document, as user powerc9000 said, we need to use content.document in order to access it properly.
Cheers!
When making an extenion in Firefox from this link
To get the document of the current webpage from a browser.xul overlay, you should use content.document, instead of just document which is the document of the browser's window itself.
So try changing all your document with content.document that should solve your problem.