Can I get image from canvas element and use it in img src tag?

by

canvas.toDataURL() will provide you a data url which can be used as source:

var image = new Image();
image.id = "pic";
image.src = canvas.toDataURL();
document.getElementById('image_for_crop').appendChild(image);

Complete example

Here’s a complete example with some random lines. The black-bordered image is generated on a <canvas>, whereas the blue-bordered image is a copy in a <img>, filled with the <canvas>‘s data url.

// This is just image generation, skip to DATAURL: below
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d");

// Just some example drawings
var gradient = ctx.createLinearGradient(0, 0, 200, 100);
gradient.addColorStop("0", "#ff0000");
gradient.addColorStop("0.5" ,"#00a0ff");
gradient.addColorStop("1.0", "#f0bf00");

ctx.beginPath();
ctx.moveTo(0, 0);
for (let i = 0; i < 30; ++i) {
  ctx.lineTo(Math.random() * 200, Math.random() * 100);
}
ctx.strokeStyle = gradient;
ctx.stroke();

// DATAURL: Actual image generation via data url
var target = new Image();
target.src = canvas.toDataURL();

document.getElementById('result').appendChild(target);
canvas { border: 1px solid black; }
img    { border: 1px solid blue;  }
body   { display: flex; }
div + div {margin-left: 1ex; }
<div>
  <p>Original:</p>
  <canvas id="canvas" width=200 height=100></canvas>
</div>
<div id="result">
  <p>Result via &lt;img&gt;:</p>
</div>

See also:

More Related Contents:

  1. Resize image with javascript canvas (smoothly)
  2. Load image from url and draw to HTML5 Canvas
  3. canvas- Cropping images in different shapes
  4. How do I make two images fade in/out repeatedly? [closed]
  5. Get pixel color from canvas, on mousemove
  6. Why does canvas.toDataURL() throw a security exception?
  7. How to add image to canvas
  8. Should setting an image src to data URL be available immediately?
  9. how to save canvas as png image?
  10. Does HTML5/Canvas Support Double Buffering?
  11. html 5 canvas LineTo() line color issues
  12. HTML5 Canvas camera/viewport – how to actually do it?
  13. HTML5 canvas ctx.fillText won’t do line breaks?
  14. How do image preloaders work?
  15. Is it possible to programmatically detect size limit for data url?
  16. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? [closed]
  17. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  18. Detect if user clicks inside a circle
  19. Why does HTML Canvas getImageData() not return the exact same values that were just set?
  20. Javascript function to Rotate a base 64 image by X degrees and return new base64
  21. Drawing rotated text on a HTML5 canvas
  22. canvas.toDataURL() Security Error The operation is insecure
  23. Snap edges of objects to each other and prevent overlap
  24. createImageBitmap alternative on Safari
  25. Image Manipulation – add image with corners in exact positions
  26. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  27. HTML Canvas Full Screen
  28. javascript: upload image file and draw it into a canvas
  29. Extracting single frames from an animated GIF to canvas
  30. Using base64-encoded images with HtmlService in Apps Script

Leave a Comment