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
1
vote
0 answers

Display a dataUrl as an image in a canvas

I have 2 canvases, I save the first one as a dataURL, and then try to display it on a second canvas. I tried many things but nothing shows up. Here is my code. How can I fix that ? image = canvas.toDataURL("image/png").replace("image/png",…
weirdFont
  • 11
  • 1
1
vote
0 answers

How to use dataURL to save div image With drop-shadow outline? (codepen link in cmt)

I want to use toDataURL to download specific div image
But because my div have filter drop-shadow as an outline border. So that why the toDataURL didn't capture it. .container { …
mangadrawing.123
  • 55
  • 4
1
vote
1 answer

toDataURL from firebase storage URL displays blank image

I am trying to convert an image URL taken from firebase storage to a data URL. But when I opened the data URL, it displays a blank image in the new window. I need help to fix this issue. var dataURL; var imageurl; var folder = formName + "/" +…
LQQ
  • 67
  • 6
1
vote
1 answer

html2canvas resize image and download

I have the following code below, and I need this image that is generated, to be generated in 1080x1080, how can I proceed, and after that the image is downloaded with 1080x1080px, how can I increase my code to make it happen? Currently it generates…
Gabriel Henrique Camargo
  • 11
  • 2
1
vote
0 answers

Fastest method of getting image data from a canvas as text

Background I am making a game that requires lots (thousands) of different images to be created so each of them can be drawn to a canvas. I can let the creation process be slow because I can do it over time, but I need to store them afterwards so I…
luek baja
  • 1,475
  • 8
  • 20
1
vote
0 answers

memory leak issue occurred due to creation of data url (image) in fabric js canvas

Memory issue occurred, when adding an image to the canvas using data url. Data url is created from image which were downloaded from axios. Images are not getting cleared in the memory unless we close the browser. axios.get(/getImage, { …
Pradeep Nooney
  • 740
  • 10
  • 12
1
vote
0 answers

JPG file loaded into the node canvas module loses quality after operations and export

I am using the node canvas implementation https://github.com/Automattic/node-canvas I use it to cut a jpg export of a newsletter design into slices and generate an image based HTML template that is email friendly. Essentially it's just slices from…
Dragos Iordache
  • 21
  • 3
1
vote
1 answer

How to convert DataUrl back into png image file in Javascript

I have my original image as png file as follows: Once I modify the original image using a third party annotation library, for example a simple pencil drawing on the original image, it gives me back a dataurl that…
Victor
  • 33
  • 7
1
vote
0 answers

Image captured from canvas and uploaded id getting corrupt from middle

I am using getUserMedia API to capture the camera stream and capture images using canvas from stream's snapshot. This was working fine for a while, however recently we have been receiving corrupt images as attached in 1 of 50 uploads. No specific…
Shashwat
  • 525
  • 4
  • 8
1
vote
2 answers

How to disable smoothing of images in Fabric.js when toDataUrl() is called?

Is it possible to disable smoothing of images within the canvas of Fabric.js when I export the canvas with toDataUrl()? I'm using version 3.6.2. I have created the canvas with this code: const canvas = new fabric.Canvas('canvas-1', { …
robsch
  • 9,358
  • 9
  • 63
  • 104
1
vote
1 answer

JavaScript using image only on local user

I'd like to understand how Image work in JavaScript. When you create an image like this: this.image = new Image(); this.image.src = canvas.toDataURL(); Is the image loaded only on the user computer or does it go on the server side? Because I'd…
Mathieu Colla
  • 51
  • 3
1
vote
1 answer

"Tainted canvases may not be exported" issue still present after setting cross-origin on S3 bucket

The code below should convert html to pdf using html2canvas library and then download it, but it's showing this error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported The issue is still present after…
Tanajee Yedage
  • 11
  • 4
1
vote
1 answer

A image converted with canvas fails to be read by python PIL _io.BytesIO

Python PIL rejects to read an image you have resized with Javascript canvas I resize an image on the client-side with Javascript: var reader = new FileReader(); reader.onload = function (e) { el('image-picked').src = e.target.result; …
brunosan
  • 295
  • 2
  • 6
  • 17
1
vote
1 answer

Konvajs - how to take a screenshot without transparency

Im just trying to let my user take a screenshot using the toDataUrl() function. but, without a background rectangle, all pixel are transparent , and appear black . so the solution is to dynamicly add a rectangle, generate the image, destroy the…
Ledahu
  • 111
  • 8
1
vote
0 answers

JS: ToDataURL doesn't include image when saved through link

So i'm trying to do a simple photo collage creator and i'm generating the layouts through canvases, let's say i want 4 images, two on each row, so i'm creating 4 canvases. On each of them i have the drop event set so i can load images. After the…
Ionut Nastase
  • 11
  • 1
1 2 3
…
13 14