In my application I have some images and I want to rotate them and then save the rotated images.
I have rotated the images successfully but I could not save them.
Is It possible in jQuery to save the images? Does anyone know how to do it?
If the image is a simple image on the page (an img tag) that you rotate using the CSS3 transform rotate property I don't think there's a way to save the image as a rotated image file. But you could save the value of the CSS rotate property and then use it the next time someone views the page.
If you need to save the rotated image as a file, I'd suggest that you use HTML Canvas to rotate the image and the save the content of the canvas to a file:
http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/
Related
When showing an image in img tag it always show the original orientation. I want to show the rotated image with the exactly orientation, here is my code when binding source using angular property:
<img [src]="imageSrc">
Here is my image when view in Windows Explorer
And here is the image on my site
It happens since original orientation of image is not as we see in image viewer. Check images original orientation.
try with adding this to your css file
img {
image-orientation: from-image;
}
image orientation
I am using a library called SnapSliderFilters to apply filters to an image. I need the filters to be applied exactly the way it is presented in the library's example.
When I implemented the code exactly as directed on an image captured with a custom camera, sliding sideways, while applying the image filter, it also causes the image to rotate by 90 degrees and the image to zoom.
In other case, when I select an image from gallery, that is of exact dimension as the screen, it works perfectly fine.
So, I think I have found the cause to be image size but I don't know where to begin.
Here is how it displays:
I'm working on a toy JS project to apply filters to an image.
If I do the following:
add an image to a page via FileReader and Drag and Drop
apply said image to a maximum height/width of 500px canvas element via drawImage
apply changes to said canvas via putImageData
save the canvas via Canvas2Image
will the saved image be the size of the canvas element or the original image dimensions?
The mage you create from canvas will always be at the size of the canvas. The canvas does not know what you draw into it so the original size of the image does not matter.
I don't know what Canvas2Image will do to the resulting image, but you can simply extract the canvas as an image using:
var dataUri = canvas.toDataURL('image/jpeg');
This will save the image at the size the canvas is at (I assume Canvas2Image will do the same where it can or simulate this approach for bmp formats etc.).
To prompt the user to save the dataUri as an image please see my earlier answer here.
I use ImageResizer in my web application. It resizes most of the images on the page correctly. But there is one set of images, that it rotates. The code is the same for all the images.
See the following link, if you remove the querystring for ?width=500, then the image is right, but the width, resizes the image and rotates it for some reason
Please any help would be appreciated.
Cameras do not rotate images according to the orientation sensor; they just set a flag in the metadata.
Install the AutoRotate plugin and put &autorotate=true in the querystring. This will cause the image to be rotated according to the metadata prior to any rotate commands.
When I downloaded the images they were upside down, I fixed this paint.net, re-uploaded, now they are fine. The funny thing is when viewing the image in browser without the querystring they were fine.Wierd...
I have been designing an app with oCanvas.js. It's a really nice canvas library that makes it much easier to create an app that can create and manipulate images, but I ran into a snag when I was trying to implement image filters:
I need transparent backgrounds so that I can have multiple layers, each of which is represented by its own display object, rendered separately (meaning one at a time) on a hidden "staging" canvas. Immediately after being rendered, a layer is then drawn on top of the previous layers on the visible canvas, so that different image filters can be applied to each layer independently during render.
The issue I am having is that, when attempting to extract the image from an oCanvas object's canvasElement, the resulting images never have a transparent background. For example: Imagine I have a 50x50 canvas that has been oCanvas.create() processed, but has display: none; (this is used as the rendering canvas) and another canvas (same dimensions) without an oCanvas instance. I am trying to do something like this (Pseudocode):
visibleCanvas.getContext("2d").drawImage(MyOcanvasCore.canvasElement, 0, 0);
I have also tried using URL = MyOcanvasCore.canvasElement.toDataURL() and then having my visibleCanvas do a drawImage with src=url.
The images always transfer, but they have a white background, even though I specify background: "transparent" during canvas.create(). As such, they completely overwrite all previous layers.
Do you have any tips for me? Am I doing it wrong? I tried transferring stuff from one canvas to another using classic drawRect, drawImage, etc methods, and transparency was retained. That's why I believe it is either the library or my code.
I guess you are using the image format other than png.
You should have your image format in PNG which keeps all the details of every pixel >including transparency of pixels
and not a compressed format.
So just try keep your image in png format after edting them in some image editor and save > result as .png .