CODEWITHSUNDEEP
javascripthtmlcanvas
Roberval Sena 山本
Roberval Sena 山本

Reputation: 408

How to copy one canvas in to an image?

I've ben on this for a wile now... seems to be easy, but I cant't figure it out

Maybe I am not able to make the correct question...

Well,

1. I have this this canvas:

->

var placeholder = document.querySelector('.flot-base');
var context = placeholder.getContext('2d');

and one "test canvas"

var c   = document.getElementById('analysisFullGraph1');
var ctx = c.getContext('2d');

to make a copy from the "placehoder" to the "ctx" is OK, just make this function:

function copy{
    var imgData = context.getImageData(684, 0, 784, 250);
    ctx.putImageData(imgData, 100, 0);
}

=>

  1. **but I not able to copy that canvas in to another image

Like this example:

<html>
    <img id='analysisFullGraph1'  src="full_graphics.png" />
</html>

<script>
var placeholder = document.querySelector('.flot-base');
var context = placeholder.getContext('2d');

var imageCTX  = document.getElementById('analysisFullGraph1');

function copy{
    var imgData = context.getImageData(684, 0, 784, 250);
    imageCTX.putImageData(imgData, 100, 0);
}
</script>

please ... what I am doing wrong??

Upvotes: 1

Views: 81

Answers (2)

winner_joiner
winner_joiner

Reputation: 14925

I updated the whole answer

If you need only one small part, from one Canvas on top of an image, you can use a "helper" Canvas, draw the images on it one after the other and the toDataUrl function

The Solution can be:
1) Draw on the first Canvas,
2) Draw Big image on Helper Canvas
3) Copy a Part of the first Canvas onto a Helper Canvas,
4) Generates a DataUrl from the Helper Canvas and Set's it to the src Attribute of the Image 

// A Html img can be used also instead of the Image object
var bigImage = new Image();
// image CORS PROBLEMS
bigImage.setAttribute('crossOrigin', '');
// wait for image is loaded
bigImage.onload = function bigImageLoad(){

  var drawCanvas = document.getElementById("drawCanvas");
  var helperCanvas = document.getElementById("helperCanvas");
  var drawContext = drawCanvas.getContext("2d");
  var helperContext = helperCanvas.getContext("2d");
  var outputImage = document.getElementById("outputImage");

  // Create great Image
  drawContext.fillStyle = "green";
  drawContext.fillRect( 0, 0, 50,50);

  // draw big image onto helper Canvas
  helperContext.drawImage(bigImage, 0, 0);
  
  // draw great canvas onto helper Canvas
  helperContext.drawImage(drawCanvas, 100, 50  );

  // set image URL to output Image
  outputImage.src = helperCanvas.toDataURL();
};
// Set image SRC after onload, since image might load to fast
// due to CORS broken image but for what I want to show okay
bigImage.src="http://i.imgur.com/0U4ZW.png";
// due to CORS broken image but for what I want to show okay
<b>Large Image (with canvas drawn onto it):</b><br  />
<img id="outputImage" style="width:50%" /><br  />

<!-- HIDE HELPER CANVAS -->
<canvas id="helperCanvas" style="display:none"></canvas>

<b>Draw  Canvas:</b><br  />
<canvas id="drawCanvas" ></canvas><br/>

here the canvas is converted to an DataUrl, and assigned to the src attribute of the img Tag.

Here some information to the DataUrl https://de.wikipedia.org/wiki/Data-URL
and here to the function toDataUrl https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toDataURL

If the images are on the same domain, or have the correct allow-access-control-origin headers set it should work well

Upvotes: 1

Robin Dorbell
Robin Dorbell

Reputation: 1619

Try this:

imageCTX.src = placeholder.toDataURL();

Upvotes: 0

Related Questions