Home javascript Saving an image from canvas canvas.todataurl ();

Saving an image from canvas canvas.todataurl ();

Author

Date

Category

Please tell me why when we use the canvas.todataurl () function; And draw simple figures on canvas, like curves Beziers. I get a working link in Base 64 format.

& lt; canvas id = "mycanvas" width = "578" height = "200" style = "display: none ; "& gt; & lt; / canvas & gt;
& lt; img id = "canvasimg" alt = "Right Click to Save Me!" & gt;
& lt; script & gt;
 var canvas = document.getelementByid ('MyCanvas');
 var context = canvas.getContext ('2D');
 // Draw Cloud.
 context.beginpath ();
 context.moveto (170, 80);
 context.beziercurveto (130, 100, 130, 150, 230, 150);
 context.beziercurveto (250, 180, 320, 180, 340, 150);
 context.beziercurveto (420, 150, 420, 120, 390, 100);
 context.beziercurveto (430, 40, 370, 30, 340, 50);
 context.beziercurveto (320, 5, 250, 20, 250, 50);
 context.beziercurveto (200, 5, 150, 20, 170, 80);
 context.closepath ();
 context.linewidth = 5;
 context.fillstyle = '# 8ED6FF';
 context.fill ();
 context.strokestyle = '# 0000FF';
 context.stroke ();
 // Save Canvas Image AS Data URL (PNG Format by Default)
 var dataurl = canvas.todataurl ();
 // set canvasimg image src to dataurl
 // So it CAN BE SAVED AS AN Image
 Document.getelementByid ('Canvasimg'). SRC = DataURL;
& lt; / script & gt;

But as soon as I try to upload the picture opens a white screen. And BASE64 URL does not change when changing different pictures. It changes, only in case of changes in the width and height of the Canvas element. What suggests that the picture is simply not drawn on canvas, although in the browser it is visible. How to be?

& lt; a id = "img" & gt; & lt; p & gt; download & lt; / p & gt; & lt; / a & gt;
 & lt; canvas id = "can" width = "600" height = "300" & gt; & lt; / canvas & gt;
  & lt; script & gt;
    var sample = document.getelementByid ('CAN');
    CTX = Example.getContext ('2D');
    Pic = new image ();
    Pic.Onload = function ()
    {
      ctx.drawimage (PIC, 0, 0);
    }
    pic.src = '1.jpg';
    var canvas = document.getelementByid ('CAN');
    var dataurl = canvas.todataurl ("Image / PNG");
    Document.getelementByid ('img'). href = DataURL;
    Document.Write (DataURL);
 & lt; / script & gt;

Tell me, maybe I incorrectly draw a picture on the canvas. And if in such a way it is impossible to get a reference to the picture, tell me an effective way, anything suitable, even the most slow and bulky.


Answer 1, Authority 100%

First, because the operation is asynchronous, and you export white canvas.

It is necessary: ​​

var sample = document.getelementbyid ('CAN');
CTX = Example.getContext ('2D');
Pic = new image ();
Pic.Onload = function ()
{
  ctx.drawimage (PIC, 0, 0);
  var canvas = document.getelementByid ('CAN');
  var dataurl = canvas.todataurl ("Image / PNG");
  Document.getelementByid ('img'). href = DataURL;
}
pic.src = "https://www.google.ru/images/srpr/logo11w.png";

Uncaught SecurityERROR: Failed to Execute ‘Todataurl’ on ‘HTMLCANVASEEMENT’: Tainted Canvases May Not Be Exported.

I think it will not be if the picture will be loaded from your site.

But still there is a problem. Data URI has a length limit.

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions