Image Reposition on Mobile Devices - javascript

I am currently working on a website which uses a banner image on a profile. However if a user uploads an image the position of the banner may not be correct and they may want to change it to display the correct position of the image they want. So I have been following this guide: http://w3lessons.info/2014/08/31/facebook-style-cover-image-reposition-using-jquery-php/
I have used this guide and it works without error when I am on desktop screen sizes like 20" and above... However when ever I try to change the image position on mobile it doesn't scale correctly and the image thumb nail is not cropped correctly. But it works when the website is on a desktop because the image banner is full size... There is a demo on the website with the guide if you want to check it out and see what I am on about. I tried to see changing the crop width and height to match the mobile size but that means when it resizes back to a desktop the image is only scaled for a mobile then.
The problem is to do with:
$default_cover_width = 918;
$default_cover_height = 276;
As the screen size changes the default cover size changes as well...
I was wondering if anyone could point me in the right direction so that I could get this working on a mobile device as well.
Thanks.

Related

Prevent Image from being resized using Javascript

I'm putting together a site for work using Wix. Currently, the page I am working on has an image on it that is meant to be used by the user to find out what size of disposable gloves they should purchase.
The issue is this image is resized on computers with a smaller resolution. I need this picture to remain at its exact size no matter what the size of the desktop monitor.
Is there a way of accomplishing this through Javascript?
Layout should be visible by link. Thanks!
You do not have access to CSS/HTML on wix (for this context) so the only way you can control image dimensions is using the fitMode property of the image.

How can I set orientation to landscape in mobile REACT JS

I have a canvas in my project where you can draw a signature and save it. I'm using React JS and https://github.com/szimek/signature_pad which is great. But the problem i have is that i need to set the default orientation to landscape on mobile (I dont want to display a message like 'please use landscape' and then show the canvas).
If i rotate the canvas with something like: div.style.webkitTransform = 'rotate(90deg)';
visually it looks good, the problem is that when I draw a line to the right it goes down, if I draw a line to the left it goes up, etc (as if the canvas is in the original 0°)
Is there a way to change the orientation of canvas in anyway?
I found some library which was able in React Native only, tried to find a workaround with css and using The Screen Orientation API but nothing seems to work

How to prevent scaling of images on mobile devices?

I've been having a lot of issues with displaying images on mobile devices. It has something to do with pixel ratios and scaling.
The idea is that I want to prevent billiniar filtering on my images. On desktop this is easy, just display the image at 1x, and it looks perfect.
There are some issues with desktop, such as when you try to scale up using the browser it filters the image, but you can at least upload a scaled version and it will look perfect.
Here is my test page: http://stage.samkeddy.com/test/
You can see that all but the second one are perfectly crisp.
But here is what it looks like on my phone: http://imgur.com/a/4rMKj
It's not even close to the right size. The image should be 70 pixels wide, but it comes out to either 53 or 63 pixels wide (one is page loaded, second is after double tapping).
I want my image to line up exactly with the pixels on my phone, is there a way to even achieve this?
Actually you should forget pixel in mobile device, like android, the screen density is barely same, a picture looks different at different density screen.
I suggest using some responsive design, use min-width parameter for a img tag, and the image from server side should big enough to prevent blur.
There are also some image service which provide scale function, you can add ?w=100&h=100 to thre image url for compressing a big picture to a small one.

How to disable auto rotate for a video preview in a Windows Phone 8.1 App using javascript/html5

I followed the tutorial below to create a Windows Phone 8.1 app for previewing the camera capture:
http://msdn.microsoft.com/en-us/library/windows/apps/Hh452789(v=win.10).aspx
However, there is an undesired behavior of this basic app. When the device is placed horizontally, with the top pointing to the left, the orientation of the preview is the same as the scene, which is fine. However, when the device rotates to the portrait position (top up), the preview auto rotates to a confusing orientation. Below is a picture demonstrating this behavior.
I guess what I want is the same behavior as the built-in Camera app of a Windows Phone, that the preview orientation always follows the camera (image panel) orientation. In other words, no matter how the device is rotated, the house roof tip should always point upward. Is that possible using the developer API? If so, what function or attributes should I use?
One potential solution I can think of is to disable auto rotate for the element that is used to hold the preview. However, I don't know how to do that. In addition, can one disable the auto rotate for only some elements in an app page instead of the entire page? I ask because I want to display some text over the video preview and I want the text to auto rotate for legibility.
MediaCapture _mediaCapture = new MediaCapture();
_mediaCapture.SetPreviewRotation(VideoRotation.Clockwise90Degrees);
await _mediaCapture.InitializeAsync();
await _mediaCapture.StartPreviewAsync();
Check the phone orientation on orientation changed and set the MediaCapture .SetPreviewRotation(VideoRotation.Clockwise90Degrees) as you want.

Issue with retinajs plugin

I'm trying to implement retina.js plugin but experiencing a weird issue.
When checking my website with my ipad it seems that the scripts detects that this is a retina screen as it display the #2x logo picture, but instead of displaying the logo with the same size as on a regular screen but with more pixel density, it displays the logo with 2x size. Any idea what the issue is? Many thanks
I think the issue is your image. The normal image has more padding than retina image. If you can equalize the padding of retina and normal image I think It will be ok.

Categories