I want to create a basic image js manipulation problem. Well not that basic. My requirements are
Image loaded after clicked by user
User can edit this image(contrast invert filter rotation)
User can use a dialog that displays some other smaller images. These images (fixed size) can be placed by clicking (or drag n dropped) on original first image
Images placed on original image can be rotated or moved.
I think fabric has what I want(rotating with anchors etc), but it doesn't include an asset manager? Is there a js library that has all these or is there a stand alone asset manager that can work well with fabricjs?
Related
I am interested in building a new functionality in which the user can print what he sees in the page (as screenshot). But first he has to customize the position of some elements (images).
I am trying to find a way to do this and I was thinking of html5 canvas. I have little experience on this and I wonder if what I am thinking is at all possible.
My idea is to take a screenshot of the corresponding element (in this case is a div element with a map). I save this screenshot in a canvas and on top of it I place some other images (legend of the map) which are movable. The user can drag and drop them on the canvas.
Do all these make sense? Can it be implemented or is science fiction?
I am trying to load some images from the users camera roll using Ionic 1. I am using a component which allows me to pull the location of the images and compress them so they become thumbnails for displaying.
I have got the point where I can recover the image location however the issue I'm having is displaying it in an img view tag. The component outputs the file location in a format like:
'/var/mobile/Containers/Data/Application/BLAH-BLAH/tmp/B08CABBD-596C-4F1A-8905-C652C9DCBC4D^L0^001_mthumb.png'
I have tried many approaches like moving this image to anther location within the phone, renaming it to a shorter name appending the image with file:// or local:// tags and added the sanitation changes to the ionic.js. Using all of this the image back shrinks in size and doesn't show the image.
Any help would be greatly appreciated.
I am developing an online restaurant menu editor. The template is SVG, with a jpeg image of the menu as the background. The user is able to edit the text which is SVG text elements laid on top of the template image.
I am able to create a PDF from this SVG, for the user to see, just fine. Now I want to drop the low resolution background image out of the SVG and place the remaining text into a high resolution print, ready pdf for printing. The problem is the text does not appear in the right place in the print ready file. Nor is it the same size.
I am using the ColdFusion CFPdftag to place the text using the watermark feature. I have tested this and it works fine. It's just the size and coordinates that are off. I know this is because of the resolution but how do I get it to work? There might even be a better way, I don't know.
I figured out that I needed to change the viewport in the svg to the actual size of the hi res pdf instead of leaving it at the low res pixel size I had it at for the web.
I have a JavaScript product designer that allows the web page user to add text and images to create a dynamic promo product. The design phase works great, and I use html2canvas to turn their custom product into an image. The image looks great for the screen but is not suitable for printing, which is the ultimate goal.
How can I scale up HTML content (retaining the detail) and save the results as an image (png) ?
I have successfully scaled the image AFTER putting the web content on a canvas, but that clearly loses detail.
I have used the CSS3 "transform" property to scale my image BEFORE applying the content to the canvas. That works and retains the detail and proportions nicely. However, html2canvas ignores that CSS and exports the original size (as confirmed here: https://github.com/niklasvh/html2canvas/issues/176 )
Anyone have experience doing this?
Has anyone got to some good code to zoom into an image using javascript?
I know I could just resize it etc but was being lazy and looking for something clever to zoom to different levels, move around when zoomed etc
Check this:
jQZoom
Zoomimage - jQuery plugin
jQuery ImgZoom
FancyBox
How big are the images?
If they are huge images you do them like google map style using this http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp
This really depends on what quality you are after. If you need a hires hiquality image with detailed zoom levels and proper interpolation you will need to write a backend service to serve up zoomed portions of your images. If you have no care for quality or speed, you could download the entire image and fit it to display inside a div absolutely positioned, offset for the area you want to view and sized as determined by your zoom level.
I would say you are probably after the first option. There are some tools already made for this, I persoanlly havnt used any of the tools; I am sure othes will post links to others you can try; I have written my own service and client. I cant go into the exact details as its proprietary, but I can give you an overview of what I do.
I have an asp.net generic handler that takes a query string denoting which image (by an id) and the coordinates to zoom on and the target image size. I have the service load the image and crop and resize it (its more complicated than that as I have many optimizations and preparsing when the file is originally uploaded, such as multiple cross sections of the file for faster serving when zooming, but what I describing here is the basics).
That service simply returns type image/jpeg and sends the image.
On the client side I have written a marquee box control that allows the user to marquee an area on the image they want to zoom in on. they marquee the area and click zoom. This then calculates the offsets into the image of the selected coordinates based on the original image size and the viewable image size. I send hese coords to the handler previously mentioned.I load the the url with query string of the srvice into an Image object, and handle onload. If all went well i then swap that to the viewed image and updates all my client side variables for determining where on the image I am zoomed into and then it can be zoomed again or zoomed out or panned further from there.
Now i understand your lazy requirement, but i need to say that writing this is actually quite easy to do to get the basics going. the hardest part you will find is doing a select box. But then even that can be as simple as tracking two click. Top left of the zoom select marque and bottom right. Or not having a select box at all and have a zoom in and out only at predetermined intervals. I on my projects required a zoom box as its a fairly complex image analysis solution.
I hope this at least helpful and leads you to something useful.