I am making web application where the user can copy images from their computer and when they want to send that image they can ctrl v on the text field to see the image their sending. I tried this using JS method call I guess it worked but now its giving a lot of problems for including JS on flutter so my question is there way to achieve this using only flutter.
You can copy the path of the image, then display it using the path copied since copy image directly is not that easy and well supported. (check this here).
Another option is to convert the image to Base64, then copy to clipboard and using the data to display the image.
In case it is required to copy the image directly, and you already have a JS function doing it, you can explore the interoperability between JS and Flutter Web using the js package. This article is a good start
To catch the event when the user presses hot key on his keyboard, check this article out. FocusableActionDetector is the widget we can use to detect the keyboard press, and map specific action to it. In this case it's copying the selected picture's path/ Base64 to clipboard.
You can use the pasteboard package:
final imageBytes = await Pasteboard.image;
Since version 0.1.1 it supports this method on the web client. But not the all types of images are supported, at least on the current version.
Related
I'm attempting to get an array of pixels of the screen (web page) but i know of no way of doing that without using canvas (either straight-up or converting HTML dom elements into canvas, first). I need to capture every pixel on the screen and i don't know what operating system is going to be used so i can't request the display from the O/S, either. Is there a third-party tool, possibly, or a way to do this from the window object in the DOM?
I have only one idea. Maybe you should try to move this functionality to the server. You can use WkHtmlToPDF(http://wkhtmltopdf.org/) for saving websites as PDF, pdf file you can convert to an image and read pixels array.
As web developers with no control of the client machine, there's two approaches to getting a screenshot of a webpage:
Open the webpage in a headless browser on the server and make the screenshot there. phantomjs is a popular one.
(I'm including this for completeness, though you said you don't want to take that route): Use the canvas element on the client. html2canvas is an interesting project that re-renders an entire HTML document into a canvas element so a screenshot can be made.
If your use case allows it, you could of course instruct your users to take a screenshot and paste it in an upload form that can handle images from the clipboard. On Windows, that's a matter of hitting "Print Screen" and CTRL+V.
Here is an api to generate images from online web pages: http://www.page2images.com/Create-Website-Screenshot-with-Javascript-API
I have this problem:
I want to make an interface where the user can drag and drop file uploads. Filepicker.io provides an easy solution to this in the form of filepicker.makeDropPane. However, this feature does not support parallel uploads without the callbacks getting confused.
So I would like to write my own drag/drop interface using standard html5 listeners, and make a direct api upload call to filepicker.io with the actual file data in string form. This way I can write the management of parallel uploads on my own.
Does filepicker.io have an api call that would allow me to do this? I only see these two things:
1) File selection modal
2) Auto drag-drop features
I don't see a way to simply upload a file directly from file data.
What can I do?
You should make use of the filepicker.store() command, which accepts a DOM file object. For example:
var input = document.getElementById("store-input");
filepicker.store(input, function(FPFile){/*your code here*/});
More details available at https://developers.filepicker.io/docs/web/#store
To make it even easier to work with user content, we enable image post-processing. This way, regardless of what type of file a user uploads from the Cloud or their local device, you can be sure it's in exactly the right size. To convert an image, take the filepicker url and append /convert, along with query parameters specifying what you want to change. See the Docs»
filepicker.io shows an example of a cropping tool on their front page. Could that be built into the picker itself?
We've discussed building it into the upload experience a la iOS, but think that the functionality is best done as a step after the upload. The demo on our front page is done using JCrop, and at some point we'll open-source the demo as a jquery plugin or similar.
I am using mupdf to render PDFs in my c++ application but I also need to edit PDFs (inserting a picture for example) but I cannot for the life of my figure out how - it's not documented very well. Ghostscript says that there is an API in mupdf to modify PDFs here http://www.ghostscript.com/MuPDF.html.
Ultimately I am hoping to be able to edit PDFs using MuPDF rather than using another library.
Any help would be appreciated, thanks!
The modification API in MuPDF is for editing the structure of a PDF (such as reordering pages, adding or removing annotations, etc) at a fairly low level. The graphics in PDF are based on a "content stream" object containing the commands for drawing a page using a subset of PostScript. There are no functions for editing these graphics content streams in MuPDF.
However, if all you want to do is add an image on top of the page, you can do so by creating an annotation object for the page. You'll need to create the PDF dictionary objects for the annotation, an image object, an appearance stream to draw the image object, and hook them up to the page. You'll need a good understanding of the PDF format to do this though.
You'll want to use the latest git checkout of MuPDF since we've recently (post 1.0 release) added some convenient functions for editing objects and updating streams with new content.
Is it possible to intercept image load requests in WebView before they are actually started and modify their URLs?
For example, I have
mWebView.loadUrl(myUrl);
In onLoadResources event I can see URLs, but I can't modify them?
The thing is I am working on application that loads html content from remote location. For some reason author excluded image path and in img src he just have file name. Existing iPhone application is using this html content and I assume the content is build the way that is the best for iPhone. So, I need somehow to figure how to alter these paths. For example, if I choose to download all images first, I would need to alter path and add file:///... in front of image.jpg name.
Thanks.
you can use onLoadResource although are not only images but any resource loaded like javascript and css