How do you resize an image in javascript - javascript

I have a HTML editor that inserts items from predefined buttons using javascript and would like add a button to be able to post a thumbnail of a downloaded image with a link to view it full size. I have created the following code but it doesn't work and always inserts a 100X100 size image. Can anyone suggest a better way that does work?
// insert HTML code
insertHtml: function (url, title) {
var imgHeight;
var imgWidth;
function setHTMLImageSize() {
imgHeight = this.height;
imgWidth = this.width;
var ImageRatio = (imgHeight / imgWidth);
if (imgWidth > 100) {
imgWidth = 100;
imgHeight = (imgWidth * ImageRatio);
}
return true;
}
var myImage = new Image();
myImage.name = url;
myImage.onload = setHTMLImageSize;
myImage.src = url;
if (imgWidth = 0) {
imgWidth = 100;
}
if (imgHeight = 0) {
imgHeight = 100;
}
this.get_designPanel().insertHTML("<a href=\"" + url + "\" target=\"" + "_blank" + "\" style=\"" + "text-decoration: none" + "\" ><img src=\"" + url + "\" title=\"" + title + "\" width=\"" + imgWidth + "\" height=\"" + imgHeight + "\" /></a><br/>click image to View full size<br/>");
}

You are setting width and height to 100 before the onload function has fired. The onload will happen asynchronously so you should do a check for zero height or width inside the callback.
Edit:-
As observed by enhzflep in the comment below you have also used equal as assignment rather than to check conditions. I'd change them to triple equals === as a rule when you know the type you are expecting.
Is it not going to be simpler to control a thumbnail through CSS anyway? You could set max-height and max-width properties to maintain aspect ratio.

Thanks to everyone ... from the CSS suggestion I have resolved the issue by removing all the code to determine the image size and instead including a style attribute setting the width to 100 and the height to auto into the HTML image code being added to the editor ... see below
this.get_designPanel().insertHTML("<br/>Thumbnail view<br/><a href=\"" + url + "\" target=\"" + "_blank" + "\" style=\"" + "text-decoration: none;" + "\" ><img style=\"" + "width: 100px; height: auto" + "\" src=\"" + url + "\" alt=\"" + title + "\" title=\"" + title + "\" /></a><br/>Click image to view in seperate window<br/>");

Related

What's causing Intersection Observer API to respond differently when replacing synchronous logic with asynchronous logic?

Context
I've used the "Intersection Observer API" to build an infinite scroll image gallery. Basically this API allows me to load more items when a certain dummy DOM element enters the viewport.
Prototype
Currently the prototype is implemented for an “iPhone X” (375x812) mobile device only. See: http://urbexco-acceptance.droppages.com/min_rep_ex_working (use Chrome DevTools 'inspect' device toolbar to select the right resolution). The image gallery is generated based on 57 items in the "database". When scrolling down, first 15 elements are loaded, then 15 more elements are loaded, then another 15 elements are loaded into the DOM, then another 10 elements are loaded, and finally 2 elements are loaded. When there are still more than 15 items left to be loaded, they are added using the following logic:
function addItems(n){
// Append new items to .items-wrapper
var items = document.querySelector('.items-wrapper');
for (var i = 0; i < n; i++) {
var url = 'https://img01.ztat.net/article/spp-media-p1/09742e38c25b3e1d9716e02f8e76e87d/89fc0bda6a2c446a8e9e0d8adbc9a4fe.jpg';
width = 170.5;
height = 246;
var newDiv = document.createElement('div');
newDiv.classList.add('item');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + width + '"' + "height=" + height + "/>";
}
}
Minimal Working Example (no mobile view possible)
https://jsfiddle.net/9jqgzymo/
Objective
Since image width and height are currently hardcoded, I am now trying to assign width and height dynamically based on the image url. I try to achieve this using the getMeta() function:
function addItems(n){
// Append new items to .items-wrapper
var items = document.querySelector('.items-wrapper');
for (var i = 0; i < n; i++) {
var url = 'https://img01.ztat.net/article/spp-media-p1/09742e38c25b3e1d9716e02f8e76e87d/89fc0bda6a2c446a8e9e0d8adbc9a4fe.jpg';
getMeta(url);
}
}
function getMeta(url){
var img = new Image();
img.onload = function(){
res = calculateAspectRatioFit(this.width, this.height, 170.5, 246)
var newDiv = document.createElement('div');
newDiv.classList.add('item');
var items = document.querySelector('.items-wrapper');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + res.width + '"' + "height=" + res.height + "/>";
};
img.src = url;
}
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return { width: srcWidth*ratio, height: srcHeight*ratio };
}
Challenge
When implementing it this way, I see that - on initiation - already 30 items from the "database" where added to the DOM. Sometimes even all of them? Currently the non-working prototype is implemented for an “iPhone X” (375x812) mobile device only. See: http://urbexco-acceptance.droppages.com/min_rep_ex_not_working (use Chrome DevTools 'inspect' device toolbar to select the right resolution). For a minimal working example, see: https://jsfiddle.net/k3p20qno/
Key question
What is the reason that with my new implementation, on initiation, already 30 or more items are added to the DOM? How can I fix it?
Well the problem lies in here :
function getMeta(url){
var img = new Image();
img.onload = function(){
res = calculateAspectRatioFit(this.width, this.height, 170.5, 246)
var newDiv = document.createElement('div');
newDiv.classList.add('item');
var items = document.querySelector('.items-wrapper');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + res.width + '"' + "height=" + res.height + "/>";
};
img.src = url;
}
Above code does an async operation with onload event. So it doesn't wait to image to be loaded.
If you turn this into a function that returns a promise you will get the result that you expect. And you should await where you call the function. That way when you add the intersection element it will add it as the last element of the items wrapper. If you don't await it will be added as the first element because the loading of the images will be async and will happen later.
function getMeta(url){
var img = new Image();
const p = new Promise(resolve =>{
img.onload = function(){
console.log( this.width+' '+ this.height );
res = calculateAspectRatioFit(this.width, this.height, 170.5, 246)
var newDiv = document.createElement('div');
newDiv.classList.add('item');
var items = document.querySelector('.items-wrapper');
items.appendChild(newDiv);
newDiv.innerHTML = "<img src=" + '"' + url + '"' + "width=" + '"' + res.width + '"' + "height=" + res.height + "/>";
resolve()
};
})
img.src = url;
return p;
}
Fiddle
Edit: Put the resolve() in the right position which is inside the load function

Getting dynamic Image width

While i am trying to get the size of image so, that i can append same size of div to explain the image. Images are coming dynamically so how can i get the image size that appear on browser not the real size of image. I have tried following code but does not work when parent class is smaller the image.
$('img').each(function(i) {
$currentImg = $(this);
imgTextshow = $currentImg.attr('imgtext');
var img = new Image();
img.onload = function() {
$currentImg.after("<div class='img-fscreen' style='width:" + this.width + "px; max-width:" + $currentImgParent + "'>" + imgTextshow + "</div>");
}
img.src = $(this).attr('src');
});
If you use the following lines of code inside of the onload handler, they should give you the correct dimensions:
$currentImg.width();
$currentImg.height();
simply because those methods return the width/height of the img DOM element.
Just use below line
img.onload = function() {
$currentImg.after("<div class='img-fscreen' style='width:" + $currentImg.width() + "px; max-width:" + $currentImgParent + "'>" + imgTextshow + "</div>");
}

Javascript - window.open() popup size issue

I am trying to display preloaded images in a newly created popup window. Here is the code:
HTML
<div id="hiddenImages" style="display: none;"></div>
<img src="SmallImage1.gif" width="196" height="130" border="0">
<img src="SmallImage2.gif" width="196" height="130" border="0">
JS
<script type="text/javascript">
preloadImages('BigImage1.png','BigImage2.png');
</script>
// PreLoadImages:
function preloadImages() {
var hiddenDiv = document.getElementById('hiddenImages');
var i;
var img;
for(i = 0; i < arguments.length; i++) {
img = document.createElement('img');
img.src = arguments[i];
img.id = arguments[i];
img.alt = '';
hiddenDiv.appendChild(img);
}
}
// OpenImage:
function OpenImage(element,e)
{
e.preventDefault();
var big_image = element.getAttribute("href");
var img = document.getElementById(big_image);
var top = (screen.height/2)-(img.height/2);
var left = (screen.width/2)-(img.width/2);
var str = "\"" + "width=" + img.width + ",height=" + img.height + ",top=" + top + ",left=" + left + ",status=0, scrollbars=0, resizable=0" + "\"";
alert(str);
var myWindow = window.open(img.src , "win1", str);
}
When I output 'str' variable in OpenImage() function, this code gives perfect dimensions of the big image. However, the size of popup window is always different than size of the image. IE stretches the popup window horizontally while Google Chrome stretches it vertically. In spite of the fact that both browsers show exactly the same dimensions for the image. And these dimensions of the image are actually being set as size of the pop up window.
Regards.
Try this out, also try to rename your variable top, I think javascript read this as a keyword.
var str = "width=" + img.width + ",height=" + img.height + ",top=" + tops + ",left=" + left + ",status=0, scrollbars=0, resizable=0 ";

Margins for video in webview

I am trying to embed a youtube video inside a webview and it seems there is a small margin on the right-side of the video which is not going away.
I saw many other Questions like these and tried fixing the javascript but still the margin is there.
Here is my code :
video = (WebView) v.findViewById(R.id.videoview);
// video.getSettings().setLoadWithOverviewMode(true);
// video.getSettings().setUseWideViewPort(true);
String widthAndHeight = "width='null' height='null'";
String videoURL = "http://www.youtube.com/v/DZi6DEJsOJ0";
video.setHorizontalScrollBarEnabled(false);
video.setVerticalScrollBarEnabled(false);
video.getSettings().setJavaScriptEnabled(true);
video.getSettings().setPluginsEnabled(true);
String temp = "<object "
+ widthAndHeight
+ ">"
+ "<body style='margin:0;padding:0;rightmargin:0'>"
+ "<param name='allowFullScreen' value='true'>"
+ "</param><param name='allowscriptaccess' value='always'>"
+ "</param><embed src='"
+ videoURL
+ "'"
+ " type='application/x-shockwave-flash' style='margin:0;padding:0;' allowscriptaccess='always' allowfullscreen='true'"
+ widthAndHeight + "></embed></object>";
video.loadData(temp, "text/html", "utf-8");
I tried giving the style:body=0'margin=0 tag inside the javascript . I don't know how to upload the screenshot as i am debugging on my phone but its a video with a margin of about 6pixels on the right of the video while the left hand side and the top of the video are aligned with the screen.
Well, HTML is left-aligned by default, so, in case you have a margin on the RIGHT hand side, this means that margin:0 worked. However, setting the right-hand side margin to 0 won't help as it doesn't mean the object would fill.
Try to say
+ " type='application/x-shockwave-flash' style='margin:0;width:100%;padding:0;' allowscriptaccess='always' allowfullscreen='true'"
If setting width to 100% for the embed doesn't work, perhaps try to set the width to the device screen's width, and don't forget to update on orientation.
So after much researching and trying to figure out how it works i have this working code for whoever who might need it in the future :
Display display = getActivity().getWindowManager().getDefaultDisplay();
int width = display.getWidth();
int widthdp = (int) (width / getResources().getDisplayMetrics().density);
int height = display.getHeight();
int heightdp = (int) (height / getResources().getDisplayMetrics().density);
String widthAndHeight = "width=" + widthdp + "height=" + heightdp;
String temp = "<object "
+ widthAndHeight
+ ">"
+ "<body style='margin:0;padding:0;'>"
+ "<param name='allowFullScreen' value='true'>"
+ "</param><param name='allowscriptaccess' value='always'>"
+ "</param><embed src='"
+ videoPoP
+ "'"
+ " type='application/x-shockwave-flash' style='margin:0;padding:0;' allowscriptaccess='always' allowfullscreen='true'"
+ widthAndHeight + "></embed></object>";
video.loadData(temp, "text/html", "utf-8");
The problem was getting the width and the height for the screen would screw up the density pixels and normal pixalation problems.

How to render a PNG with transparency in IE6?

I have a very beautiful Web application with attractive icons images. My CSS and all other UI is looking great in all other browsers except IE.
How can I make a PNG to appear properly?
In Internet Explorer 6 and below, transparetn pngs do not show correctly. The transparent part of the png is not transparent but a solid color. Anyways to fix that problem add this code to your head tag.
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
Clearly, we have no idea what exactly is not displaying correctly since you've given no information. If you're looking to use Transparent PNG files in IE6, check out this link http://24ways.org/2007/supersleight-transparent-png-in-ie6
You should try this
<div style="position:relative; height: 188px; width: 188px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/image.png',sizingMethod='scale');"></div>
or use a JS downloaded from here http://labs.unitinteractive.com/downloads/unitip.zip
or http://www.twinhelix.com/css/iepngfix/

Categories

Resources