I have a page where a user can upload a photo. Once uploaded they can move it in a canvas and they can crop the image that is over the canvas.
To crop it, I get the image coordinates relative to the canvas and i convert it with toDataURL.
On mobile devices I use zoom in CSS to scale the whole canvas to fit the viewport. I cannot do it in another way because besides the user's photo, the are other elements and various texts that are impossibile to scale to fit each resolution.
The problem is that when cropping on mobile, the position is not exactly the one the user chose, obviously because of the zoom property.
Here is a fiddle https://jsfiddle.net/g6e16xza/ simulating the mobile problem.
I tried working with ctx.scale() to match the css zoom but without any luck.
In the end I need the result image to be always a fixed dimension (500px × 325px), whether the user is uploading from desktop or mobile.
Any suggestions are greatly appreciated.
Thank you
Related
i made a website - clone of million dollar homepage.
But i have a major problem.
Images rendered on canvas on big screens appear normal (good quality).
Here's the picture:
But when i open the webiste on my phone, all pictures are barely visible. See here:
and here is a closer look
the images are drawn on canvas by this function
context.drawImage(img, myOptions.x, myOptions.y, myOptions.sw, myOptions.sh)
do you have any solution how to fix this issue? Thanks
Ahoj! Try to check if there isn't some special resolution for smaller screens, or maybe change resolution od that canvas. Because on desktop you can see normally some picture but on smaller resolution canvas can crop or edit pictures to fit into to the screen
My goal is to allow users to upload a profile image, and to crop the image prior to uploading in order to fit nicely in the image container. This is a very common issue.
The problem I’m having is that when the user is using a mobile device, the cropped and uploaded image ends up being roughly 350 pixels wide, which results in highly pixelized images when viewed on a large screen that ends up stretching the image as needed (upwards of 700 pixels).
The flow is as follows: user chooses new image locally to upload; this image is then implanted into the browser in order to be cropped; the resulting cropped image (base64) comes out with the correct aspect ratio, but the size (width and height) in pixels is in accordance with the devices screen width, which may be very small depending on the device.
I’m using Croppie.js to do the cropping, which works fine. However, the resulting base64 image located in the browser is very small in pixels when cropped on a small device (phone, etc.). The base64 image is what ends up getting uploaded, so this results in the problem mentioned above with stretching and pixelization on larger devices.
Any input or other techniques that I’ve overlooked would be greatly appreciated.
Per https://foliotek.github.io/Croppie/ :
when you call for result, using size = original should get you the higher quality image, which you can scale to the size you need when you display it.
I have created a website to allow users to design playing cards online using fabricjs and have made the canvas responsive so it will work equally well on mobile devices as desktop. Almost everything works perfect... On smaller screens the objects are scaled correctly with the canvas and positioned correctly based on the canvas size but selecting/manipulating the objects doesn't work properly. When the canvas is scaled down from it's original (desktop based) size I cannot click on the object. I have noticed that the point on the canvas you need to click to select the object is shifted down and right from the object itself. The smaller the canvas gets, the further from the object the selection point gets. Is there a way to fix this?
Thanks!
Steve Sherrin
i have a panel that should be drawn floating over the normal html page.
This object is dynamically created on DOMloaded event and scaled to fit current screen resolution depending on the zoom level of page.
In order to obtain that we have to scale the element, because we fix the width and height.
The scale amount in not mobile friendly website is always bigger than 1. It seems to work in all browsers except for Safari mobile, in which the floating panel is blurry.
How can i solve this problem?
It is the device, not the browser. iPhones have retina displays, which, in plain words, means that the pixels are doubled. Fonts, borders and other CSS styles scale up fine, but images are stretched, that's the reason your image appears blurred.
The simplest way to fix this is to use a bigger image
Of course this has the drawback that well... you will be using a bigger image for all devices/browsers even if you don't need one. Of course, there are many other ways to handle this.
Here is a place to start:
https://www.smashingmagazine.com/2012/08/towards-retina-web/
http://www.mightybytes.com/blog/make-retina-images-website/
I have a web page which displays a large image, for example a page from a magazine. I have no control over the image size or orientation. It's possible that the image may need to be rotated by the user to orient it correctly.
Are there any Javascript or Flash solutions that will allow someone to rotate and zoom a given image? Ideally I'd specify a single image and the dimensions to use when displaying it. If the image is larger than those dimensions, the user could zoom in and view a portion of the image in greater detail.
I've seen a couple of solutions for rotating images with straight Javascript and CSS. Raphael would do the trick. There is apparently even an example featuring rotating an image. (it uses SVG but is support on all major browsers)
This one is not cross browser, but is an interesting exercise nevertheless.
As for flash rotation etc...
For rotating images, I used jquery-rotate and it works very well.
It is not totally cross-browser, it doesn't work with IE6 (and probably other old browsers).
For zooming, I guess you could make your own implementation using javascript, you can just resize the image (easy with jQuery).