So this is really frustrating... on the mymaths website: https://www.mymaths.co.uk/, there's an image of a primary school child on a computer with this image address: https://www.mymaths.co.uk/assets/images/big/primary-school-photo-2.jpg.
I've tried so many things, but I can't seem to replace it.
Say I wanted to replace it with a picture of a hamburger, with this address: https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100.
So far I've tried lots of threads, but this image seems to be different from images on other websites, which is why my code isn't working on it:
var images3 = document.getElementsByTagName ("img");
var i3=0;
while(i3<images3.length)
{
if(images[i3].src == "https://www.mymaths.co.uk/assets/images/big/primary-school-photo-2.jpg")
{
images[i3].src = "https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100";
}
i3=i3+1;
}
Can somebody help me please? Thank you.
Well, this was new for me too. Apparently, the <picture> tag is not just a wrapper - it's a smarter version of <img>.
It allows to chose different URLs for the image tag depending on screen size and type. For example, try to do this in developper tools:
I replaced srcset for the <source> that has (max-width: 767px), which means it is active when browser window is smaller than 767px. Now if you resize browser window to make it smaller, at some point the original image will be raplaced with burger image.
So what you want to do is to replace all <source>'s srcset. This worked for me:
// Limit the list of omages on those that are under `<picture>` tag
const images = document.querySelectorAll("picture img, picture source");
// RegExp to check if we want to replace the URL
const replaceChecker = /primary-school-photo-2\.jpg$/i;
// The replacement URL
const replaceWith = "https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100";
for(const image of images) {
// Pick the name of the attribute we want to change based on whether it's <img> or <source>
const srcAttributeName = image.tagName.toLowerCase() == "img" ? "src" : "srcset";
const oldURL = image[srcAttributeName] + "";
if(replaceChecker.test(oldURL)) {
image[srcAttributeName] = replaceWith;
}
}
You could improve that by checking the media attribute and if it says minimum screen width, use URL for smaller image of the hamburger. That is set by the w GET param in the hamburger image's URL.
Related
I used to ask this question a few years ago, and back then it was not possible to apply a style to all images when exporting to docx using Pandoc.
Today, I wonder whether this still is true? I tried a bit using Pandoc 2.9.x, and images still seem to have applied the generic "Normal" style:
It would be nice to have a style like "Picture" which is applied to each image in the docx. Any way to do this?
Images by themselves cannot have any style, you have to wrap an image into a block, that can have custom attributes. I replace figure elements with a pair of an image and a caption, something like this:
funFigure = function(element)
local attrfigure = pandoc.Attr( "", { }, {{"custom-style", "Picture" }} )
local attrfiguretext = pandoc.Attr( "", { }, {{"custom-style", "Picture Caption" }} )
local figuretext = pandoc.Div(pandoc.Para(element.content[1].caption), attrfiguretext)
element.content[1].caption = pandoc.Null
local figure = pandoc.Div(element, attrfigure)
return { figure, figuretext }
end
I have an image with longitude and latitude coordinates, can any one tell me how do i get it? I have tried
if (CrossMedia.Current.IsPickPhotoSupported)
{
MediaFile photoPicked = await CrossMedia.Current.PickPhotoAsync();
if (photoPicked != null)
{
//await DisplayAlert("Photo Location", photoPicked.Path, "OK");
//path = photoPicked.Path;
using (Stream streamPic = photoPicked.GetStream())
{
var picInfo = ExifReader.ReadJpeg(streamPic);
ExifOrientation orientation = picInfo.Orientation;
//MainImage123.Source = ImageSource.FromStream(() => photoPicked.GetStream());
latitude = picInfo.GpsLatitude;
longitude = picInfo.GpsLongitude;
var filepath = photoPicked.AlbumPath;
var filepath1 = photoPicked.Path;
}
}
}
It works when I picked photo and trying to get its coordinates, but I have to take multiple photos from image gallery and find its coordinates.
does any one know how to read image geo coordinates? please help me.
You can use the ExifLib.PCL Nuget Package to read an image metada, by viewing your "code sample", i think you are using the Plugin.Media to take images/get images from the galery, be sure to use SaveMetaData = true when taking an photo from your app.
Once you have set the SaveMetaData to true, use the ExifLib to obtain the MetaData like this:
MediaFile photo;
using (Stream streamPic = photo.GetStream())
{
var picInfo = ExifReader.ReadJpeg(streamPic);
double lat = picInfo.GpsLatitude;
double lon = picInfo.GpsLongitude;
}
Also, as a plus, you have even more info on the photo (date taken, author, size, etc.).
UPDATE:
After Reading it again, it seems that the problem is that you are not able to pick multiple images from the galery, and NOT being able to get the lat and lon from the photos. At the moment, Plugin.Media doesn't support multi-picking.
Your question was unclear however - I think you are trying to make it work with multiple images together. How you can be able to pick multiple images together?
The plugin "CrossMedia" doesn't support picking up multiple images.
Your solution requires a lot of work to be done to be able to Pickup multiple images at once. So Follow this nice step-by-step tutorial here:
https://xamgirl.com/select-multiple-images-from-gallery-in-xamarin-forms/
With above you will be able to get all the images you need at once.
After you get List, all you have to do is to loop through those images and call your existing code.
I've got an Array with 17 web links of images
var products:Array;
trace(products)
// Ouput :
"http://www.myWebsite.com/zootopia.jpg"
"http://www.myWebsite.com/james.jpg"
"http://www.myWebsite.com/tom.jpg"
..etc
If I do products[10].movieimage; the output will be the 9th link (something like : "http://www.myWebsite.com/lalaland.jpg")
I'm looking for downloading every images without a dialog box.
I manage to do so for 1 image with the specific link, like that :
function saveImage (event:Event):void {
var stream:URLStream = new URLStream();
var image1:File = File.documentsDirectory.resolvePath("test.jpg");
var fileStream:FileStream = new FileStream();
stream.load(new URLRequest("http://www.myWebsite.com/lalaland.jpg"));
stream.addEventListener(Event.COMPLETE, writeComplete);
function writeComplete(evt:Event):void {
var fileData:ByteArray = new ByteArray();
stream.readBytes(fileData,0,stream.bytesAvailable);
fileStream.openAsync(image1, FileMode.UPDATE);
fileStream.writeBytes(fileData,0,fileData.length);
fileStream.close();
trace("writeComplete");
trace(image1.url);
}
}
Question : Is there a way to download all the images with the web links of my products array ? (and if images already exist, replace them. I could use if (image1.exists){ if (image2.exists){ ..etc for each image. But maybe there is a simplier solution)
If you could show me how, with a bit of code, I could that.
Also, note that I'd like to load the images then in Uiloader, like that :
function loadImages():void {
uiloader1.source = image1.url;
uiloader2.source = image2.url;
etc...
}
Don't over think it. You have your array of images. You have your tested routine for saving one image. Now put it together:
Some function initializes things and kicks it off.
Either splice out (or pop out) an item on the array – OR use a index var to access an item in the array
Pass that to your download function.
When the download completes either pop another item off the array OR increment your index. But first you would test if array.length== 0 OR `index > array.length. If either is true (depending on which method you use), then you are done.
If you want to get fancy you can show a progress bar and update it each time your download completes.
I want to upload 2 scaled images and I do not want to upload the original image. To do this, I set sendOriginal to false. If I set hideScaled to true, no files show in the uploader. If set set hideScaled to false, both scaled images show up in the list. I realize that the documentation says not to use both options this way. Is there another way to achieve what I want? How do I make fineuploader show only 1 file on the file list no matter how many scaled images it has?
I ran into this exact same problem. I also wanted to rename the larger scale to match the original filename and to pass a custom parameter so the server script could sort the images into the db based on scale size.
I used this method as a hackish substitute for an onScaled event. If anyone is still interested.
// Must be onSubmitted, not onSubmit or the DOM element won't be rendered yet.
onSubmitted : function(id, name) {
// scaling.sizes.name = 'thumb'
if (name.toLowerCase().lastIndexOf(' (thumb).jpg') !== -1) {
// Hide the element displaying the thumbnail.
qq(this.getItemByFileId(id)).hide();
// Good place to include any custom parameters based on scale size.
this.setParams({gpsize : 'thumb'}, id);
}
// scaling.sizes.name = 'large'
else if (name.toLowerCase().lastIndexOf(' (large).jpg') !== -1) {
this.setParams({gpsize : 'large'}, id);
// If needed rename file in this event, not before, since filename
// is the hackish hook needed to connect scale size to file id.
var newName = name.slice(0, name.toLowerCase().lastIndexOf(' (large).jpg')) + '.jpg';
this.setName(id, newName);
}
return true;
}
It's not perfect, but it gets the job done without bushwhacking through the script files.
I have a phantomjs script that is stepping through the pages of my site.
For each page, I use page = new WebPage() and then page.close() after finishing with the page. (This is a simplified description of the process, and I'm using PhantomJS version 1.9.7.)
While on each page, I use page.renderBase64('PNG') one or more times, and add the results to an array.
When I'm all done, I build a new page and cycle through the array of images, adding each to the page using <img src="data:image/png;base64,.......image.data.......">.
When done, I use page.render(...) to make a PDF file.
This is all working great... except that the images stop appearing in the PDF after about the 20th image - the rest just show as 4x4 pixel black dots
For troubleshooting this...
I've changed the render to output a PNG file, and have the same
problem after the 19th or 20th image.
I've outputted the raw HTML. I
can open that in Chrome, and all the images are visible.
Any ideas why the rendering would be failing?
Solved the issue. Turns out that PhantomJS was still preparing the images when the render was executed. Moving the render into the onLoadFinished handler, as illustrated below, solved the issue. Before, the page.render was being called immediately after the page.content = assignment.
For those interested in doing something similar, here's the gist of the process we are doing:
var htmlForAllPages = [];
then, as we load each page in PhantomJS:
var img = page.renderBase64('PNG');
...
htmlForAllPages.push('<img src="data:image/png;base64,' + img + '">');
...
When done, the final PDF is created... We have a template file ready, with all the required HTML and CSS etc. and simply insert our generated HTML into it:
var fs = require('fs');
var template = fs.read('DocumentationTemplate.html');
var finalHtml = template.replace('INSERTBODYHERE', htmlForAllPages.join('\n'));
var pdfPage = new WebPage();
pdfPage.onLoadFinished = function() {
pdfPage.render('Final.pdf');
pdfPage.close();
};
pdfPage.content = finalHtml;