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.
Related
I have users uploading images using filepicker, but I want them to have to upload an image of a certain size (and crop if the image is too big). I could cut it myself, but then it won't look good. Ideally, the user would crop it themselves.
I've tried this page: https://www.filepicker.com/documentation/file-ingestion/widgets/pick?v=v2 and I've tried various options but nothing seems to work quite well.
data-fp-image-min doesn't prevent users from uploading smaller images. data-fp-crop-force along with data-fp-crop-max and data-fp-crop-min doesn't do the trick either.
I'm open to using other image uploading libraries, but I like using filepicker. Seems like this is something other people would have run into.
I'm using rails btw.
From the docs:
data-fp-image-min - Images smaller than the specified dimensions will be upscaled to the minimum size.
So it doesn't really prevent users from uploading smaller images.
data-fp-crop-max and data-fp-crop-min specifies the maximum and minimum dimensions of the crop area so it won't give you specific dimensions.
I would recommend you to:
Set data-fp-crop-ratio - Specify the crop area height to width ratio. User will be able to adjust the crop area for each photo with desired ratio.
Set data-fp-crop-force="true" - User could not skip cropping image.
Then resize image to specific height or width.
This will result, you will always get the image with the desired dimensions.
Example for 150 x 200 image output:
Html widget:
<input type="filepicker"
data-fp-crop-ratio="3/4"
data-fp-crop-force="true"
mimetype="image/*"
onchange="window.upload(event)"
data-fp-apikey="APUGwDkkSvqNr9Y3KD4tAz" />
Javascript:
window.upload = function(event){
console.log(JSON.stringify(event.fpfile));
var listElem = document.createElement("li");
var image = document.createElement("img");
/*
set w=150 (width) conversion option
so all images would be 150x200
and crop_first option to make sure the image is cropped
before any other conversion parameters are executed.
*/
image.setAttribute('src', event.fpfile.url + '&w=150&crop_first=true');
listElem.appendChild(image);
document.getElementById('results').appendChild(listElem);
};
Here is working solution: http://jsfiddle.net/krystiangw/9o9ebddL/
I have a series of images that I would look to loop through using iOS's [UIView startAnimating]. My trouble is that, when I exported the images, they all came standard in a 240x160 size, although only 50x50 contains the actual image, the rest being transparent parts that are just taking up space.
When I set the frame of the image automatically using image.size.width and image.size.height, iOS takes into images' original size of 240x160, so I am unable to get a frame that conforms to the actual parts of the image. I was wondering if there is a way using Illustrator or Photoshop, or any other graphics editing software for me to export the images based on their natural dimensions, and not a fixed dimension. Thanks!
I am a fan of vector graphics and thinks everything in the world should be vector ;-) so here is what you do in illustrator: file - document setup - edit artboards. Then click on the image, and the artboard should adjust to the exact size. You can of course have multiple artboards, or simply operate with one artboard and however-many images.
Is there a way to get the image dimension of an image that was just resized? What I'm foing is taking a file and fitting it to a 48x48 area (note, I said FIT, not scale.) Once that's done, I need to get the new image's dimension but I don't want to have to write it out to disk, then reading it back in to use. Is there a way to do it without that step?
$img = new Imagick('file.jpg');
$img->resizeImage(48,48,Imagick::FILTER_LANCZOS,1,TRUE);
// this is where I need to get the dimensions of the new image created above, unless it's a perfect square, only one side will be 48 pixels, the other could be less.
Thanks.
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/
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 .