Straight Tips: November 2023

v1.0 Save - v1.2 Load:

- Audios and Videos can be loaded now.

v1.0 Save - v1.1 Load:

- Added "Shrink" option to reduce the image base64 data by using CSS "max-width" or "max-height" properties.

Test code below (Click here)

<!DOCTYPE html>

<textarea id="User_Text" rows="10" style="width:400px;">
111
222
333
Unicode char 163890  = 𨀲
Unicode char 1114111 = 􏿿
</textarea>
<br>
<input type="button" value="Save" onclick='Save("User File.txt", document.getElementById("User_Text").value)'>
<input type="file" onchange='Load(this, "User_Text", "alert(reader.result); Test(reader.result)")'>

<br><br>
:::Simple Load::: <input type="file" onchange='Load(this, "", "Output = reader.result; alert(Output); Test(Output)")'>

<br><br>
<img id="User_Image" style="width:100%;  max-width:150px;" src="https://i.imgur.com/FHjzFv3.jpg">
<br>
<input type="button" value="Show src" onclick='document.getElementById("User_Text").value = document.getElementById("User_Image").getAttribute("src")'>
Load reduced: <input type="file" onchange='Load(this, "User_Image", "", "Shrink")'>
<br><br>
- "Shrink" option reduces the image base64 data by using CSS "max-width" or "max-height" properties!
<br><br>
- "Right click" the image and open it in a "new tab" to see its real size!
<br><br>
Load without reducing: <input type="file" onchange='Load(this, "User_Image")'>
<br><br>
Call functions with returned values: 
<input type="file" onchange='Load(this, "User_Image", "Change_3(reader.result); Change_2(Reduced_Image)", "Shrink")'>
<br><br>
Image 2: <br>
<img id="User_Image_2"> <br><br>
Image 3:<br>
<img id="User_Image_3">

<br><br>
<audio id="User_Audio" controls src="https://www.w3schools.com/html/horse.mp3"> </audio>
<br>
<input type="button" value="Show src" onclick='document.getElementById("User_Text").value = document.getElementById("User_Audio").getAttribute("src")'> 
Load Audio: <input type="file" onchange='Load(this, "User_Audio")'>

<br><br>
<video id="User_Video" width="400" controls src="https://www.w3schools.com/html/mov_bbb.mp4"> </video>
<br>
<input type="button" value="Show src" onclick='document.getElementById("User_Text").value = document.getElementById("User_Video").getAttribute("src")'> 
Load Video\Audio: <input type="file" onchange='Load(this, "User_Video")'>

<br><br>
"src" is short for "source".
<br><br>
- ".getAttribute('src' )" returns src as is, without being resolved to absolute URL: <br><br>
Example: "zzz_ Required Files/image.jpg" 
<br><br>
- ".src" returns the resolved src, the absolute URL: <br><br>
Example: "https://www.example.com/zzz_ Required Files/image.jpg" <br><br>
Example: "file:///E:/FolderX/FolderY/FolderZ/zzz_ Required Files/image.jpg" <br><br>
<br><br>

<script>

function Test(m) {    //____________________________

alert("_ Test Function Executed _" + "\n\n" + m);

}

function Change_2(data){     //_____________________

document.getElementById("User_Image_2").src = data;

}

function Change_3(data){     //_____________________

document.getElementById("User_Image_3").src = data;

}

function Save(filename, text) {    //_________________________ v1.0 ______________________________

var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);

element.style.display = 'none';
document.body.appendChild(element);

element.click();

document.body.removeChild(element);

}

function Load(input, el, Task, Options){    //__________________ v1.2 _____________________________

if (Options === undefined){var Options = ""}

var file = input.files[0];

var reader = new FileReader();

if ([undefined, ""].indexOf(el) === -1){    //if "el" is not undefined and blank
var El_NodeName = document.getElementById(el).nodeName}

	//alert(El_NodeName);

	if ([undefined, ""].indexOf(el) !== -1){    //if "el" is undefined or blank

	reader.readAsText(file);

	reader.onload  = function(){eval(Task)};

	}else if (["IMG", "AUDIO", "VIDEO"].indexOf(El_NodeName) !== -1){    //if "El_NodeName" is "IMG" or "AUDIO" or "VIDEO"

	document.getElementById(el).src = "";

	reader.readAsDataURL(file);

		reader.onload = function(){

			if (Options.match(/(^|\s)Shrink(\s|$)/i)){    //"|" or, "^" start of line, "$" end of line, "\s" match white spaces (spaces, tabs, new lines), "i" turns regex case sensitive off

			var T_img = document.createElement('img');

				T_img.onload = function(){

				var Real_Width  = T_img.width;
				var Real_height = T_img.height;

				document.body.appendChild(T_img);    //The img element will be resized to the max width\height set by user

				var Max_Width  = T_img.width;
				var Max_height = T_img.height;

				document.body.removeChild(T_img);    //remove the appended img element

					//alert("Max_ " + Max_Width + " x " + Max_height + " \n\nReal_ " + Real_Width + " x " + Real_height);

					if(Real_Width <= Max_Width && Real_height <= Max_height){

					var Reduced_Image = reader.result;

					}else{

						//alert("img Will be reduced");

					// create an off-screen canvas
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');

					// set its dimension to target size
					canvas.width  = Max_Width;
					canvas.height = Max_height;

					// draw source image into the off-screen canvas:
					ctx.drawImage(T_img, 0, 0, Max_Width, Max_height);

					// encode image to data-uri with base64 version of compressed image
					var Reduced_Image = canvas.toDataURL('image/jpeg');
					}

				document.getElementById(el).src = Reduced_Image;
				eval(Task);
				};

			T_img.style.maxWidth  = document.getElementById(el).style.maxWidth;

			T_img.style.maxHeight = document.getElementById(el).style.maxHeight;

			T_img.src = reader.result;


			}else{document.getElementById(el).src = reader.result; eval(Task)}

		};

	}else{

	document.getElementById(el).value = "Please Wait!!! (Reading and Loading File)";

	reader.readAsText(file);

	reader.onload  = function(){document.getElementById(el).value = reader.result; eval(Task)};

	}

reader.onerror = function(){alert(reader.error); eval(Task)};

}

</script>

More examples on getting src (source):

<!DOCTYPE html>

<img id="user_image" src="zzz_ Required Files/image.jpg" >

<img id="user_image_2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANCAYAAAB2HjRBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAfSURBVDhPY1Ta6POfgUzARKY+sLZRzSSG3miA0TPAALRCAjiN0NO6AAAAAElFTkSuQmCC" >

<br><br>
"src" is short for "source".
<br><br>
- ".getAttribute('src' )" returns src as is, without being resolved to absolute URL: <br><br>
Example: "zzz_ Required Files/image.jpg" 

<br><br>
- ".src" returns the resolved src, the absolute URL: <br><br>
Example: "https://www.example.com/zzz_ Required Files/image.jpg" <br><br>
Example: "file:///E:/FolderX/FolderY/FolderZ/zzz_ Required Files/image.jpg" <br><br>

<script>
alert(document.getElementById("user_image").getAttribute("src"));
alert(document.getElementById("user_image").src);

alert(document.getElementById("user_image_2").getAttribute("src"));
alert(document.getElementById("user_image_2").src);
</script>

Straight Tips

jQuery

elevateZoom (Requires jQuery)

Facebook Messenger (Donation)

Activation Code - Donation (Multiple Options)

Request Web\PHP\JavaScript\HTML Project !

Advertise On This Blog!

ADS - Multi One Password

Ads (Reserved)

Thursday, November 30, 2023

[JavaScript] Obfuscation is Not Security. (Find Almost Anything From Obfuscated Scripts)

Wednesday, November 1, 2023

[JavaScript] Save and Load File. (Text, Image, Audio and Video)

ADS - Multi Share Calculator