How to get the dimensions of Base64-encoded image in JavaScript [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 22 days ago.
Improve this question
I have a REST API return a Base64-encoded image:
API response
Is there a way to get dimensions (height, width) of this image?

You can create an Image object with the given src and directly access the width and height properties.
let url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAABp0lEQVR4nO2YzarqMBRG08bUaicRFIWCmSgUnPj+z+BUEQQrxYBQrdCiVMnPGfTCvehtztmj42CvUUv297GSQAf1VqsV+Tz83xb4P6gFAbUgoBYE1IKAWhBQCwJqQUAtCKgFAbUgfKhWx7283W7ruiaEhGGYJImU8nK5dLtdIUQYht+2v8QJIT9scGlZaz3PWy6XzWtVVff7fbFYVFV1PB5ns5nb6SUOanBd4uPxMMas1+vNZlOW5e12GwwGlFLO+fP5tNY2Y+fzOU1TQsjhcMjzvC1OCGlrgGnVdc0YS5JECJFlmda60/lzur7vG2Oa5+FwaK3d7/fGmNFo1Ba31rY1vOO6RM4555wQEkURY4xSqrVulrTWvv93S+PxeLfbzedzR1wp5Wh4wXVaeZ6naaqUqqrKGBNFUVEUSqnr9RoEged5zZi1VkoZx7GU8t97eYkzxtoa3vEcv0aMMVmWlWUZBMF0Ou33+1LKoigYY0KIXq/XjEkpKaWTyeR0Ommt4zhuizfD7w0wrV/kQz+nqAUBtSCgFgTUgoBaEFALAmpBQC0IqAXhCy1TEI1gV/YFAAAAAElFTkSuQmCC';
// same image as https://via.placeholder.com/50x50
let img = new Image();
img.src = url;
img.onload = function() {
console.log(img.width, img.height);
}
document.body.append(img); // just for demonstration

Related

How to get image path from JSON file? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am just trying to display an image from a JSON file:
[
{
"Images" : "images/examples.jpg"
}
]
But JSON does not accept the path as a path but as a string. Is there any way to display the image?
I'm not sure how you are processing the JSON but the path of the image is all you need. You would simply then use that path to show the image.
In the example below I used javascript to parse the image path and inject it into the image source.
The key here is you need to somehow get the path of the image into the img tag.
<img src="{{json.Images}}">
var json = '{"Images" : "https://res.cloudinary.com/demo/image/upload/sample.jpg"}';
var jsonObject = JSON.parse(json);
document.getElementById("someImage").src = jsonObject.Images;
<img id="someImage" src="">
Below an example using an image from placeholder.com
const a = [{
"Images": "https://via.placeholder.com/100x100"
}];
// Store reference to image tag
const image = document.getElementsByTagName("img")[0];
a.map(function(img) {
// Here just assigning the single image URL
image.src = img.Images;
})
<img src="">

Change image src with jquery for 5 seconds [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I need help with how to change an image src with another one for 5 seconds before reverting back to the default one with jquery.
below is a code I am trying to use.
$('#indicator').attr("src", 'notification.png');
I need to change it for 5 seconds only.
You need just two scripts
$('#indicator').attr("src", 'notification-new.png');
and
setTimeout(function(){ $('#indicator').attr("src", 'notification.png'); }, 5000);
The first one changes the attribute to a new src and the second one changes it back to the original state after 5 seconds.
var oldSrc = $('#indicator').attr("src"); //save old image source
$('#indicator').attr("src", 'notification.png'); //set new image source
setTimeout(function(){ $('#indicator').attr("src", oldSrc); }, 5000); // after 5 seconds, reset old image source
var changeSrc = function(obj){
var elem = jQuery(obj.selector), img = elem.attr('src'); elem.attr('src', obj.tmpSrc);
setTimeout(function(){elem.attr('src', img);}, 1000*obj.revertAfter);
};
changeSrc({
selector: 'your-img-selector-here',
tmpSrc: 'your-tmp-img-src-here',
revertAfter: 5
});

Easy way to resize image in Node.js? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
After data is loaded from filesystem, which model worth to use to resize image and return to client?
fs.readFile(process.env.OPENSHIFT_DATA_DIR + request.headers['filename'], function read(err, data) {
var w = request.headers['w']
var h = request.headers['h']
response.writeHead(200)
// CODE TO RESIZE DATA
response.write(data)
response.end()
})
Use ImageMagick:
https://www.npmjs.com/package/imagemagick
Or other modules from npm:
https://www.npmjs.com/package/image-resizer
https://www.npmjs.com/package/resize-image
https://www.npmjs.com/package/easyimage

How to get hold of a part of dynamically generated URL [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm using filestack, when ever I upload an image it creates an unique url for the uploaded Image. I want to get hold of a specific part of a url to a variable.
https://www.filestackapi.com/api/file/qiXTZ0dQUGPQRG4GH0Cy
https://www.filestackapi.com/api/file/"qiXTZ0dQUGPQRG4GH0Cy"
The above Url belongs to an image, but I want get hold of the quoted part to a variable, how to do that?
You can search for the last index of / in the url then make a substring of the url starting from that point.
var url = 'https://www.filestackapi.com/api/file/qiXTZ0dQUGPQRG4GH0Cy';
var lastIndex = url.lastIndexOf("/");
var searched = url.substring(lastIndex + 1);
// searched = qiXTZ0dQUGPQRG4GH0Cy

Photoshop JavaScript to resize image and canvas to specific (not square) sizes [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How can I use PhotoShop's JavaScript functionality to convert a set of hundreds of images to a specific, non-square size (e.g. 320x350px)?
Searching the web I've found many potential solutions but 100% of them converted to square sizes. So, I gathered a few and solved the problem myself.
Save the code below as a .jsx file in your Photoshop \Presets\Scripts folder. Then, make an ACTION if want to use it with many files.
// get a reference to the current (active) document and store it in a variable named "doc"
doc = app.activeDocument;
// change the color mode to RGB. Important for resizing GIFs with indexed colors, to get better results
doc.changeMode(ChangeMode.RGB);
// these are our values for the END RESULT width and height (in pixels) of our image
var fWidth = 320;
var fHeight = 350;
// do the resizing. if height > width (portrait-mode) resize based on height. otherwise, resize based on width
if (doc.height > doc.width) {
doc.resizeImage(null,UnitValue(fHeight,"px"),null,ResampleMethod.BICUBIC);
}
else {
doc.resizeImage(UnitValue(fWidth,"px"),null,null,ResampleMethod.BICUBIC);
}
// Makes the default background white
var white = new SolidColor();
white.rgb.hexValue = "FFFFFF";
app.backgroundColor = white;
// Convert the canvas size as informed above for the END RESULT
app.activeDocument.resizeCanvas(UnitValue(fWidth,"px"),UnitValue(fHeight,"px"));
// our web export options
var options = new ExportOptionsSaveForWeb();
options.quality = 70;
options.format = SaveDocumentType.JPEG;
options.optimized = true;
var newName = 'web-'+doc.name+'.jpg';
doc.exportDocument(File(doc.path+'/'+newName),ExportType.SAVEFORWEB,options);

Categories

Resources