I've looked at a number of similar questions, and tried implementing those solutions, but I'm still having the same problem, I believe primarily because I have an additional complication (and the fact that my understanding of image manipulation is limited).
Here's the situation: in a web app I have a webcam picture capture (using getUserMedia). The <video> element which displays the feed, as well as the <canvas> are sized to 640 pixel width as default. This works fine on desktop browsers.
On devices with screen width under 700px, the site responsively resizes everything, including the picture capture dialog, which resizes to 95% of the screen width, thus the <video> element display the camera feed is less than 640px in width most of the time (those are the times that matter here). The video feed displays fine, you can see the entire camera field. But every you take a picture, it gets displayed on the canvas (which resizes the same as the video feed) clipped, depending on the size of the screen. That is to say, the canvas displays as much of the original image, which remains 640px wide, as it can.
I don't want to resize the actual image; I'd like the uploaded data at the end of the day to be a 640px image regardless of the screen width. I just want the user to be able to see the whole thing before s/he saves it.
I've already tried playing with width attribute (element attribute, not CSS) on the canvas, but that did nothing, and changing the width of the video display will shrink the actual image, so that's not what I want.
I also played with the drawImage method which should resizing, but I couldn't quite get what I wanted. This is the line I thought should work, but still gives me a clipped image:
if($(window).width()<701){
var ratio = videoHeight/videoWidth;
var canvasWidth = $(window).width()*.86; // calculated width after CSS resizing
context.drawImage(video, 0, 0,width,height,0,0,canvasWidth,canvasWidth*ratio);
}
Update
The following code will show the entire picture on the canvas, but shrinks it, and I get a much smaller image file, depending on the screen width it was taken on:
context.drawImage(video, 0, 0,canvasWidth,canvasWidth*ratio);
Many thanks!
Related
I have a monitor of size 800 x 480. I would like to render an HTML5 Canvas that fills the entire monitor in a full screen browser setting (no toolbar, dock, taskbar, browser window, etc) such that one pixel in canvas coordinate space corresponds exactly to one pixel in monitor coordinate space.
For example, I would like to ensure that canvas(0,0) corresponds physically to the top left pixel on the monitor.
Just making the canvas fill the width and height of the webpage doesn't make sense because the viewport isn't the same size as the entire monitor.
Would appreciate some advice on how to go about solving this.
Thanks!
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.
I wrote a module where you can perform image manipulation.
There is also always a preview of different filters and so on.
The prolbem is that it should all pictures fast. There also can
be a picture with like 3000 x 3000 pixels. For the previews that
would take too much time.
Is there a way to resize the pictures to for example 200 x 200?
I mean a real resizing of the image.
You can resize images in JavaScript using canvas.
The image must be hosted on same domain as your domain.
First you draw the image on the canvas you createing.
You can set the width&height
document.getElementByTagName('canvas')[0].getContext(2d).drawImage....
After that you can restore the image from canva to your image tag.
document.getElementByTagName('img')[0].src= document.getElementByTagName('canvas')[0].toDataUrl()
You can see this example:
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-size/
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.
I've got a image... and if the image's height is greater than maxHeight, or the width is greater than maxWidth, I'd like to proportionally resize the image so that it fits in maxWidth X maxHeight.
While this can be done, what happens when the user's screen is much bigger than the native size of the image? Do you stretch it to the point of it degrading into pixels?
What happens with people with smaller screens - do they have to waste time and bandwidth downloading an image that is much larger than they're capable if displaying, then depending on the browser to scale the image down?
In many browsers, especially older ones, scaling images degrades them, whether making them bigger or smaller. It's best to scale them on the server, based on a large image and deliver the "right" sized image to the client. This is much more complicated.
While all of this is possible, one must ask whether this really adds much value to the user experience in the first place and whether all this effort is worth it.
You can set the attributes of the image tag using JavaScript.
The properties you may like to set are height, width.