We Keep Coding

How to embed image in a js file from url?

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);
}

Change all image urls to CDN url

How can I change my image url to CDN URL using JavaScript or jQuery
For example urls in my webpage are
https://example.com/img/img.jpg
Then it should be replaced by
https://mycdn.com/https://example.com/img/img.jpg

Consider following snippet:
$('img').each(function(){
var img = $(this);
var srcOld = img.attr('src');
var srcNew = 'https://mycdn.com/' + srcOld;
img.attr('src', srcNew); // Updating src here
});
Explanation: The above snippet loops to each img element and updates
src of each one. Whereas this way HTML page will load all images twice
first for local images and then CDN images. Better way to update src
from backend.

Get Image From Google Drive for Script-Based Web Page

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.

rewrite image source URL with javascript

I stuck when experimenting with blogger thumbnails. I don't want to use blogger default thumbnails since the size just 72px, it's very small. So, I found a method by rewriting the URL of the image source (the image hosted by google blogger service).
For example, I have an image in this URL http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s1600/home%2Bthumbs.jpg, the image will loaded with max-width 1600px, indicated by the /s1600/ in the URL. I want to load the image at 300px width, then the URL will be http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s300/home%2Bthumbs.jpg. Also, the image served in HTTP protocol by default, but it's possible to served in HTTPS just by adding https:// as the protocol.
This is my thumbnail markup:
<div class="thumbnail">
<a class="thumbTooltip" href="#" title="Flat Design Sample">
<img alt="Flat Design Sample" src="http://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s1600/home%2Bthumbs.jpg">
</a>
</div>
The question is, how I can rewrite the default image URL by using javascript method? I want to force the image served in HTTPS by rewriting http:// to https://, and served in 300px width by rewriting s1600 to s300. The final URL will look like this: https://4.bp.blogspot.com/-XfeUAQMRZnk/VBw8Gv0tZvI/AAAAAAAAAXM/DnmxYqUROVc/s300/home%2Bthumbs.jpg

The code is inside an window.onload to ensure that all elements are there. Then in the url-string the first replace() changes the protocol. The second uses a regular expression to find the segment where the size is defined and changes it to s300. It will work even when the images comes from another directory.
window.onload = function() {
var img = document.querySelector('.thumbnail img');
img.src = img.src.replace('http', 'https').replace(/\/s\d+(?=\/)/, '/s300');
};
Instead of the window.onload wrap you also can put the code in <script>-tags just before </body>.

Simple replacement of a token.
function getThumbnailUrl (element)
{
$url = element.href.split("/");
$url[7] = "s300";
return $url.join("/");
}

Create live preview of image (before upload it) using JQuery

I want to create a preview for image before upload it on the server, using JQuery.
My code, js code:
$(function(){
Test = {
UpdatePreview: function(obj){
// if IE < 10 doesn't support FileReader
if(!window.FileReader){
// don't know how to proceed to assign src to image tag
} else {
var reader = new FileReader();
var target = null;
reader.onload = function(e) {
target = e.target || e.srcElement;
$("img").prop("src", target.result);
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
My html:
<input type='file' name='browse' onchange='Test.UpdatePreview(this)' />
<br/><br/>
<img src="#" alt="test" width="128" height="128" />
See jsfiddle: http://jsfiddle.net/aAuMU/
After onload, I see the src of image (using Google console application) and it looks like:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gv4SUNDX1BST0ZJTEUAAQEAAAvoAAAAAAIAAABtbnRyUkdCIFhZWiAH2QADABsA...
It is a way to get in javascript the base of image and assign to image in case I'm using IE as browser ?
FileReader doesn't work in IE < 10.

If you need it as getting nice effect then you could use flash like they do in
https://github.com/mailru/FileAPI
But when i needed to show image to user because i needed to let user select area for croping then i used form inside hidden iframe and uploaded image to server and sent back image data uri so i was able to get data uri and replace image src attribute, then when area was selected i did not send image back as file but as data uri. In old browsers it means you upload image twice, but i did not want to use flash as in some cases flash may also not be installed there.

LIVE PREVIEW CAN BE DONE IN JQUERY
We need an onchange event to load the image. img tag is given an id = frame, the function UpdatePreview() loads the image immediately after the image or file is selected.
function UpdatePreview(){
$('#frame').attr('src', URL.createObjectURL(event.target.files[0]));
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type='file' name='browse' oninput='UpdatePreview()'/>
<img src="#" id ="frame" alt="test" width="128" height="128" />

Instead of
$("img").prop("src", target.result);
write
$("#ImageId").attr("src", target.result);
Where ImageId is the ID of your img tag.