I'm using html2Canvas and canvas2Image plugins for taking screenshot of the webpage using JavaScript.
I'm trying to store both canvas and canvas2Image(in png format) by assigning to variables, but those variables are undefined after assigning. In addition, converted canvas is appending directly to DOM. So,
How to avoid appending that canvas to DOM?
How to download those screenshots(images)?
How to store those images in local storage instead of directly appending to DOM?
Is there any other good plugin for taking screenshots using javascript Other than html2Canvas?
Related
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.
I'm using the image upload script with a backend URL to rename uploaded images stored on the server. It seems to work well with both file uploads and also drag-and-drop.
Without that backend handling you can paste images directly into the editor, but they get saved as base64 with the post in the db itself which is not great for a lot of reasons.
If I use the image upload script as I am now, it seems it blocks the pasting of images directly into the editor. That's safest, I guess, but I was wondering if there was a way of allowing it, but treating the pasted image like a drag-and-drop image, for example, so we could have the convenience of pasting images but still have them saved with unique filenames on the server instead of being embedded as base64 with the rest of the source of the post?
Thanks.
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 a gallery module, the functionality implemented in this module as below
- getting the file path from the server using ajaxrequest
- the response will be json object of all image file path
- setting the filepath in image src attribute
As we are using ajax request, the images are loading in online mode only.
so how to implement the functionality so that images should show in offline also.
You may consider returning images as base64 string from the server and store them in a localstorage.
On the view use data-ng-src directive like this .
In your controller check if there is no connection and set base64 string from the localstorage as this: $scope.data.image_url=
After loading an image once, your best bet is going to be get a base64 representation of it, and then persisting that to disk.
Get the base64 representation of the image here:
Get image data in JavaScript?
Write the base64 data to disk using ng-cordova/ionic native and the writeFile method using the Cordova file plugin.
http://ngcordova.com/docs/plugins/file/
writeFile(path, file, data, replace)
There are some great answers here that I would like to build on...
I would suggest using PouchDB as a cache for base64 and/or Blob data after you have downloaded the original (one of my apps does the same thing with mp3 data converted to a Blob). You could then implement a method that checks the cache for the image before making a network request.
Nolan Lawson has created an excellent library for these binary conversions: https://github.com/nolanlawson/blob-util
Just save the base64 string to your PouchDB instance after the initial download, you can then check for that data before your app reaches out to the network.
Just beware of storage limits on iOS Safari (~50mb default)...
I have loaded a PDF into UIWebView. Now i want to search for strings in that pdf. So I used a string which contains JS steps(used to highlight that specific string) and evaluated it with the webView object like this. But no result was obtained .It was as if nothing had been done.
Dont the JS evaluation work on a pdf loaded into a webView? Is there anyother way to search for a string in a PDF loaded into webView?
Even if you could evaluate JS against a webview that is currently displaying a pdf, the pdf render has no exposed or documented APIs. If you have code that works on HTML then it is not working because the PDF is not exposing an HTML like dom. If you have code that works in the acrobat plugin on a desktop then it won't work because the phone uses a derivative of Apple's Webkit PDF plugin which does not export the same API as Acrobat (as far as I know it exports no API, and if it does it is undocumented). In any event, regardless of why you think your code should work, it won't.
If you want to find a string in a pdf you are going to need to write code to parse the PDF and find that string, and even then you will not be able to highlight the specific string in the webview based renderer.
If you want this sort of functionality you should should use Quartz to directly render your PDFs onto views. Apple provides documentation for how to do that.