Develop Reference

Slides App Scripts - How to duplicate an image by keeping the scale

I'd like to duplicate an image on a first slide to another slide using Google Slide App Scripts.
For this, I get the data inside this image as a blob before inserting the blob in the next slide. The issue is that even when I set top, left, width and height values, I don't understand how I can keep the same scale (in my case I've cropped the image).
This is my code:
function myFunction() {
var slides = SlidesApp.getActivePresentation().getSlides();
var blop, width, height;
slides[0].getImages().forEach(function(image){
if(image.getTitle() == "image") {
blop = image.getBlob()
left = image.getLeft()
top = image.getTop()
width = image.getWidth()
height = image.getHeight()
}
});
slides[1].insertImage(blop, left, top, width, height)
}
You can see how it looks here:
https://docs.google.com/presentation/d/1LlyHNbjcANWspPvJZedW9vgx9c9JHRD-kWOvXkwrDNo/edit?usp=sharing (viewer mode)
When I try to apply transformation the result is really different...

Modification points:
Unfortunately, in the current stage, it seems that at Slides Service and Slides API, the crop of image cannot be used. This has already been reported. Ref So, I thought that in your situation, it might be required to duplicate the image including the crop information.
In your script, insertImage(blobSource, left, top, width, height) is used. In this case, blob is the original image. By this, the crop information is not included. I thought that this might be the reason of your issue.
In this case, I would like to propose to use insertImage(image). The document of this method says as follows.
Inserts a copy of the provided Image on the page.
When above points are reflected to your script, it becomes as follows.
Modified script:
function myFunction() {
var slides = SlidesApp.getActivePresentation().getSlides();
slides[0].getImages().forEach(function(image){
if(image.getTitle() == "image") {
slides[1].refreshSlide();
slides[1].insertImage(image);
slides[1].refreshSlide();
}
});
}
Result:
When above modified script is used for your sample Google Slides, the following result is obtained.
When I tested this modified script, I noticed an important point. When this script is used, it seems that refreshSlide might be required to be used. Because I confirmed that when refreshSlide is not used, the image without including the crop and coordinate information is copied.
And also, In my environment, at most cases, the script worked fine. But, I noticed that when I tested several times, even when refreshSlide is used, there is the case that the image without including the crop and coordinate information is copied. So I thought that insertImage(image) might have a bug.
If in your environment, you have the same situation, how about reporting this to Google issue tracker? Ref
References:
insertImage(blobSource, left, top, width, height)
insertImage(image)
refreshSlide()

Smooth way to replace background-image

I’m quite new to jQuery and JS and been asked to write a script that will be loading background-image progressively - I mean that low quality image should appear immediately and when full size image is loaded should replace the small one.
I found some tips how to do something similar by layering <img /> on top of background-image however in my case i have to deal with background-image only, so I have made this:
$('.img-loader').each(function(){
var box = this;
var smallImg = $(this).attr('style');
var bigImg = smallImg.replace('.jpg)', 'big.jpg)');
var imgUrl = bigImg.replace('background-image: url', '');
var imgUrlS = imgUrl.replace(/[{()}]/g, '');
console.log(imgUrlS);
$('<img/>').attr('src', imgUrlS).load(function(){
$(this).remove();
$(box).attr('style', bigImg);
});
})
The script basically does the job but in that moment when the image gets replaced there is a quite noticeable ‘shake’.
Any ideas how to make transition smoother or anyone knows what causing this 'shake'?
Edit: As suggested I'm adding a markup snipped of where script has to be applied.
<div class="about__section__bgimage img-loader"
style="background-image: url(<?php echo $contentBlock->imageurl ?>)"></div>

I suggest you create two separate elements with the same size, overlapping each other, with position: absolute; make one of them visible with the original bg image (using opacity: 1). The second one invisible (using opacity:0)
Once the higher quality image is completely loaded, set the opacity of the original image to 0 and the new image to 1.
use a css transition on the opacity property to make the opacities change smoothly.

you have to use animation for this. Use any of them according to your scenario enjoy it !!!
https://daneden.github.io/animate.css/

d3.ease fade image in

I am calling the following function and passing it the location of an image:
function show_image(source) {
var img = d3.select("#right-section").append("img").attr("src",source)
img.transition().duration(5000).easeLinear;
}
Here is the function that uses some JQuery to empty the relevant HTML div object (right-section) and then show the image:
function Con1aaRight(div) {
$("#right-section").empty();
show_image("images/netflix.jpg");
}
The problem is the image is showing but not fading in like I would like it to (with d3.ease in the show_image function). I probably should be using JQuery but I would like to incorporate d3. Similar transition/animation ideas welcome. I am building a scrolling webpage tutorial on a data science topic with text on the left and images on the right.

The problem here is understanding what is a D3 transition and how it works.
A D3 transition, as the name implies, transitions from one state, or value, to another state.
That being said, you can, for example, transition...
A position: from x = 10 to x = 60.
A color: from green to blue.
A font size: from 10px to 18px.
An opacity: from 0.2 to 0.9.
A stroke width: from 1px to 5px.
... and several other attributes/styles.
However, you cannot transition this:
non-existence ➔ existence
As Bostock, creator of D3, once said (emphasis mine):
When modifying the DOM, use selections for any changes that cannot be interpolated; only use transitions for animation. For example, it is impossible to interpolate the creation of an element: it either exists or it doesn’t. (source)
Solution: transition the opacity of the image:
var body = d3.select("body");
show_image("http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg")
function show_image(source) {
var img = body.append("img").attr("src", source).style("opacity", 0)
img.transition().duration(5000).ease(d3.easeLinear).style("opacity", 1)
}
<script src="https://d3js.org/d3.v4.min.js"></script>
PS: get rid of that jQuery code. You don't need jQuery when using D3. Mixing jQuery and D3 is not only unnecessary but also, in some cases, it will make things silently break.

Get element position relative to screen. (Or alternative solution)

I am aware this had been asked before, but no answer actually did the trick as far as I tested them.
Basically what I need is to change some element styles as soon as it "hits" the top border of the screen while scrolling down. This element is a 'Back to Top' button that will be sitting in a section and start following the user when they scroll pass said section.
I am not asking about CSS properties, I am asking about some JS property or method that allow me to know this. IE:
$('#back').distanceFromTopOfTheScreen() // This value will decrease as I scroll down
I know there are other soultions, but the client has asked for this behavior.
Any idea?

You can :
distance = $('#eleId')[0].getBoundingClientRect().top;
For more about getBoundingClientRect() look at the MDN Documentation
Note: This value change when you're scrolling, it gives you the distance between the top border of the element and the top of the Page

Sometimes JQuery make's everything more confusing than Native Javascript, even forgothing the very basics functions:
window.onscroll = function() { fixPosition()};
function fixPosition() {
var Yplus = 4; //number of lines in every scroll
document.getElementById('element').style.top = document.body.scrollTop + Yplus ;
}
This will allows you to move an "element" static on the window following the scroll.

Use plain javascript rather then Jquery

I am attempting to code the game breakout in javascript. Currently I have it working using JQuery in several locations. My professor does not want the class to use Jquery so I have to change the areas I use jquery to javascript.
function windowsize() {
WIDTH = $("#canvas")[0].width = ($(window).width()-20.5);
HEIGHT = $("#canvas")[0].height = ($(window).height()-20.5);
}
windowsize();
I am using this function to get reference to the canvas element and subtracting from the sides to remove the scrollbar. (on a side note if anyone knows how to remove the scroll bar without subtracting let me know!)
I attemped the following code to get reference to the canvas, but cannot get it to work?
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
Here is my fiddle: http://jsfiddle.net/Kinetic915/kURvf/29/
Any help is appreciated!
Thanks!

Assuming Chrome, document.documentElement.clientWidth seems to do it for you. Or, find a 100% width element on the page and get the width of that.