HTML5 canvas .toDataURL() image has no background color
canvas.todataurl is not a function
html5 canvas image transparent background
html5 canvas save image to local file
cannot read property 'todataurl' of undefined
canvas todataurl black image
canvas todataurl svg
convert canvas to image
.toDataURL() method of HTML5
<canvas> element the
background-color property of the element is not applied to the picture.
Is this happenning because
background-color is not actually a part of
canvas, but a DOM styling? If so, or anything else, what can be a workaround for this?
Fiddle to play with here. The base64 string is logged to console.
The canvas is created from the
svg using https://code.google.com/p/canvg/
You're correct that it isn't actually a part of the image data, only a part of the styling. The easiest way around this is to just draw a rectangle before drawing the SVG:
var canvas = document.getElementById('test'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(0, 0, canvas.width, canvas.height);
Setting the background color when generating images from Canvas , Setting the background color when generating images from Canvas. One of the cool features of the HTML5 canvas element is the toDataURL method. there is no background color for the image returned from toDataURL. Draw a rectangle the size of the entire canvas with a fillStyle set to the background color we want to use (can be any valid HTML color format). Generate the data url for the canvas. Clear the entire canvas (including background). Copy the original drawing data back into the canvas.
Other approach could be creating a dummy CANVAS and copying the original CANVAS content onto it.
//create a dummy CANVAS destinationCanvas = document.createElement("canvas"); destinationCanvas.width = srcCanvas.width; destinationCanvas.height = srcCanvas.height; destCtx = destinationCanvas.getContext('2d'); //create a rectangle with the desired color destCtx.fillStyle = "#FFFFFF"; destCtx.fillRect(0,0,srcCanvas.width,srcCanvas.height); //draw the original canvas onto the destination canvas destCtx.drawImage(srcCanvas, 0, 0); //finally use the destinationCanvas.toDataURL() method to get the desired output; destinationCanvas.toDataURL();
Image created from canvas have black background (HTML5), Image created from canvas have black background (HTML5) Does your exported image from a canvas element a black background with toDataURL() toDataURL("image/png"); // Or without parameter because the default� Use CSS sprites to update a background-position in JS . Hacks with .toDataURL(). The first works great if you have the image ahead of time, but what if your source needs to be programmatically generated, say, by a <canvas>? The solution to #1 is to use .toDataURL() on the canvas and set the background to the generated URL:
hope this will help,
var canvas = document.getElementById('test'); var context = canvas.getContext('2d'); //cache height and width var w = canvas.width; var h = canvas.height; var data = context.getImageData(0, 0, w, h); var compositeOperation = context.globalCompositeOperation; context.globalCompositeOperation = "destination-over"; context.fillStyle = "#fff"; context.fillRect(0,0,w,h); var imageData = canvas.toDataURL("image/png"); context.clearRect (0,0,w,h); context.putImageData(data, 0,0); context.globalCompositeOperation = compositeOperation; var a = document.createElement('a'); a.href = imageData; a.download = 'template.png'; a.click();
HTMLCanvasElement.toDataURL(), However the drawing of the dropped image seems to cancel that and after I am trying to give the canvas a white background on componendDidMount() and I can Any solution to get a colored background to a PNG with transparency, using the /13073647/crop-canvas-export-html5-canvas-with-certain-width-and-height . If the height or width of the canvas is 0 or larger than the maximum canvas size, the string "data:," is returned. If the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported. Chrome also supports the image/webp type. Syntax canvas.toDataURL(type, encoderOptions); Parameters
PNG with transparency canvas.toDataURL('image/jpeg') � Issue , html5 canvas image transparent background toDataURL() method like this: The workaround is to manually change all non-opaque canvas pixels to your fillStyle = backgroundColor; //draw background / rect on entire canvas context. Moves the path to the specified point in the canvas, without creating a line: closePath() Creates a path from the current point back to the starting point: lineTo() Adds a new point and creates a line to that point from the last specified point in the canvas: clip() Clips a region of any shape and size from the original canvas: quadraticCurveTo()
- Have you tried drawing a big rectangle of the correct colour on your
- @robertc works fine with
.drawSvg, but no luck with
- Yeah, that works with
.drawSvg, but does not with
canvg()jsfiddle.net/qDmhV/159. Any ideas why?
- Try changing
- This should be the correct answer...was struggling for such a beautiful answer...earlier answer makes the entire image white. Great job!!!
- Yes, copying the source into the new canvas is definately the better solution. Thanks
- Amazing solution, I was using getImageData but that doesn't work for transparent backgrounds.
- Please provide some explanatory content along your code.