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
20
votes
1 answer

Canvas toDataURL() returns blank image

I'm using glfx.js to edit my image but when I'm trying to get that image's data using the toDataURL() function I get a blank image (width the same size as the original image). The strange thing is that in Chrome the script works perfect. What I want…
Ionel Lupu
  • 2,695
  • 6
  • 29
  • 53
20
votes
3 answers

Drawing images to canvas with img.crossOrigin = "Anonymous" doesn't work

In a client-side standalone JS application, I'm trying to make it so I can call toDataURL() on a canvas on which I've drawn some images specified by a URL. Ie I can input into a textbox the url to any image (hosted on, say, imgur) that I want to…
Joey
  • 10,504
  • 16
  • 39
  • 54
11
votes
1 answer

Is it possible to programmatically detect size limit for data url?

I'm using javascript and html canvas to resize jpeg images. After resizing, I use canvas.toDataURL as the href attribute in an anchor tag in order to provide a link where users can download the resized images. This works nicely up to a certain…
Upgradingdave
  • 12,916
  • 10
  • 62
  • 72
11
votes
1 answer

Is it possible to generate an image (blob or data-url) in a web worker from a canvas context's getImageData?

Background Setup I have a web application that deals with creating images from a set of other images. The way I've chosen to do that is by reading in a set of images and placing them on an HTML canvas. Then, I export each canvas as a jpeg to a…
Kent Willis
  • 380
  • 3
  • 11
9
votes
2 answers

How do I set crossOrigin attribute when using canvas.toDataURL?

So I'm trying to create a print map function for an OpenLayers 3 application I'm building. I'm aware of their example but whenever I attempt to use it I run into the dreaded tainted canvas issue. I've read the whole internet and come across folks…
Alex Marple
  • 2,908
  • 4
  • 17
  • 24
8
votes
2 answers

window.open() opens a blank screen in chrome

I checked this same code in Firefox and it works perfectly. In fact, this worked in Chrome a few weeks back, but now I'm just getting a blank screen. The code is below: The function triggers on button click. function saving() { var saveURL =…
Code geek
  • 91
  • 1
  • 5
7
votes
1 answer

Upload image from data url to Axios?

Ive been uploading image files to an API (Graphcool) with this, and everything was working fine: fileUpload(file) { let data = new FormData(); data.append('data', file); axios …
Evanss
  • 23,390
  • 94
  • 282
  • 505
7
votes
2 answers

How to convert array of png image data into video file

I am getting frames from canvas through canvas.getDataURL(). However, now I have an array of png images, but I want a video file. How do I do this? var canvas = document.getElementById("mycanvaselementforvideocapturing"); var pngimages =…
David Callanan
  • 5,601
  • 7
  • 63
  • 105
7
votes
2 answers

How to compress .png images when exporting from Canvas using toDataURL()?

Need to generate .png images that are about ~20k in size using HTML5 canvas. Unfortunately, when creating .pngs using the toDataURL() method, you cannot specify quality like you can with jpegs. Any ideas for a workaround? toDataURL seems to be the…
greph
  • 79
  • 1
  • 3
7
votes
4 answers

How to use Fabric.js to save a canvas as an image

I have a Fabric.js prototype where people can load photos, text, and maps into the canvas. When they're done, I want them to be able to save the canvas as an image. I've tried using the standard: canvasURL = canvas.toDataURL(); var image = new…
mheavers
  • 29,530
  • 58
  • 194
  • 315
6
votes
0 answers

Google photos api - Access-Control-Allow-Origin

I am building a design tool to create fully customizable photo products like photobooks. I use technologies such as firebase (database and storage) and angular4. In order to integrate google photos with my web app I use the google photos api. When I…
Dimitrios Tournoglou
  • 61
  • 2
5
votes
1 answer

Why do canvas.toBlob and canvas.toDataURL have different return types

canvas.toBlob() requires a callback function but canvas.toDataURL() returns the result synchronously. Why the difference? It's not a problem, but I'm super curious and I can't find an explanation for why it is that way.
brisebom
  • 103
  • 10
5
votes
0 answers

Convert dynamic SVG to downloadable PNG in IE

Goal - using the client-side: Convert a dynamic SVG drawing (created using d3js) to a downloadable PNG image and works using Internet Explorer. Accomplished: Achieved in Chrome, no problem. Once I have the PNG DataURI it is easily converted to a…
Nicholas
  • 572
  • 6
  • 17
5
votes
2 answers

threejs canvas todataurl is blank

Okay, I know that canvas.toDataUrl() will produce an image in png format. However, when I try to get the image from http://threejs.org/examples/#webgl_lines_sphere. All I see is a black image on chrome. To replicate the steps - 1) Open dev console…
Santan Maddi
  • 51
  • 4
5
votes
1 answer

Missing extension when saving image from canvas

I use this code to save images in Javascript : window.location.href = grid.toDataURL("image/png").replace("image/png", "image/octet-stream"); The code works, but the file saved doesn't have any extension, I have to rename it manually. My question…
jbltx
  • 1,255
  • 2
  • 19
  • 34
1
2 3
…
13 14