Stack Overflow
Stack Overflow

Questions tagged [todataurl]

a HTMLCanvasElement method that returns the data URI value of a canvas element

HTMLCanvasElement.toDataURL() is a method that returns the value of a element as a string.

Parameters

HTMLCanvasElement.toDataURL() accepts to optional parameters:

  • type: specifies the image type to be returned
  • encoderOptions: specifies the quality of the image to be returned

Resources

Related Tags

208 questions
4
votes
0 answers

Rails - save image to active storage using signature_pad js / toDataUrl canvas method

I am creating images using signature pad (signature pad allows the user to draw or "sign" and creates an image of the signature for you). Signature pad creates an image using the toDataURL() javascript method (see here). I'm trying to attach this…
Clark Taylor
  • 323
  • 2
  • 10
4
votes
1 answer

Reconstruct original 16-bit Raw pixel data from the HTML5 canvas

If a 16-bit single channel (Gray-scale) raw pixel data losslessly encoded into Image format(e.g.PNG, Webp , Jpeg-2000 or JPEG-XR) and Image rendered to HTML5 canvas, then is there any way to retrieve original 16-bit Raw pixel data from the canvas?
Kalpesh Mahajan
  • 103
  • 1
  • 8
4
votes
0 answers

html2canvas sometimes not capturing content + text quality

I'm trying to create a 'save div as png' function in JavaScript angular with html2canvas. It 'almost' works, except for the image quality could be better (mostly text) BUT sometimes it just opens an empty canvas not capturing the elements…
Anders Pedersen
  • 2,255
  • 4
  • 25
  • 49
4
votes
1 answer

Javascript download not working in Firefox and IE

I am downloading the image. It is only working in Chrome not in Firefox or IE. var a = document.createElement('a'); a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); a.download =…
Owais Ahmed
  • 1,364
  • 1
  • 30
  • 62
4
votes
1 answer

Merge Multiple Canvases and Download as Image

I'm attempting to merge two HTML canvases into a single canvas and then download that as an image. My code is as below: function downloadCanvas() { var bottleCanvas = document.getElementById('bottleCanvas'); var designCanvas =…
Alex Saidani
  • 1,277
  • 2
  • 16
  • 31
3
votes
1 answer

Get a canvas object from an element

The question on a single line: Is there a toDataURL method working on a element? Most of the people seem to be interested in how to get an IMG from a CANVAS, but I need the opposite. Why? I need to use the toDataURL() method on the IMG. So,…
ZioBit
  • 905
  • 10
  • 29
3
votes
1 answer

Canvas to dataURL Image Png quality not working

I've been trying to convert an HTML5 canvas to dataUrl with a low quality because I have to transfer the dataURL files through a server but wether I do dataURL = document.getElementById('canvas').toDataURL("image/png", 1); or dataURL =…
Woold
  • 783
  • 12
  • 23
3
votes
0 answers

html2canvas and toDataURL generated image has horizontal line

I am looping through 10-14 html elements, and generating image data in an array for later use for insertion into a PDF. The problem is that these images occasionally have a horizontal line across them, which seems seems to be an existing issue with…
russjman
  • 486
  • 9
  • 19
3
votes
0 answers

FabricJS toDataURL returning wrong scale?

After rendering the canvas the toDataURL returning image with canvas scale(My canvas scale is 700 x 600). How to return image with my Original Height and Width. Not canvas Width and Height. Here is the code section. …
isuru
  • 3,385
  • 4
  • 27
  • 62
3
votes
1 answer

Black area when exporting graph from svg (d3.js) to jpg

I am trying to export a graph from SVG (obtained through d3.js) to a JPG image using javascript. The fact is that the final image do not show the picture properly but it draws a black area enclosing the lines of the graph. Here they are the two…
Marcos Palacios
  • 33
  • 4
3
votes
0 answers

Load Event on Image does NOT work in mobile browsers

I have the following script (stripped down for this question) that uses the FileReader API to allow users to upload photos and display a thumbnail of their photo before they commit their changes. try { reader = new FileReader(); …
Ajmer Phull
  • 31
  • 3
2
votes
1 answer

canvas.toDataURL() returns a black image

We are developing a sample three.js application which shows a thumbnail. For any scene that we create, we require to take a screenshot of the canvas, for this purpose, we are using canvas.toDataURL("image/png"). For repeated invocations of the above…
Chintan Jagad
  • 115
  • 2
  • 2
  • 7
2
votes
1 answer

How to get the image in the xlink:href tag of an svg image to get converted to a png/jpg image using canvas's toDataURL .?

The SVG image's xlink:href tag contains a path to the image,when i load the svg image in the browser,it properly displays the image. When i convert the svg image using toDataURL,the converted jpg or png is empty. ` image.src =…
M. Shyam Sunder
  • 33
  • 5
2
votes
2 answers

Ionic 2 iOS 10.3 - canvas.toDataURL() error: the operation is insecure

canvas.toDataURL("image/jpg") is working when I'm using an image that is local. Like this this.originalImage = 'assets/img/defaultImage-900.jpg'; When I change it to a picture from the camera its not working. Like this this.originalImage =…
Fredrik Hasseleid
  • 33
  • 2
  • 7
2
votes
1 answer

Get img from canvas (toDataURL) --> Tainted canvases may not be exported

I have following error message: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at draw (http://motherlang-bananalang.com/videator-b.php:172:50) at HTMLVideoElement.…
Aneyeball
  • 33
  • 1
  • 4
1
2
3
…
13 14