Question

我现在对这个诡计很好......似乎很容易，但我无法弄清楚

也许我无法提出正确的问题......

好吧，

1。我有这个画布：

- ＆GT;

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

和一个＆＃34;测试画布＆＃34;

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

从＆＃34; placehoder＆＃34;制作副本到＆＃34; ctx＆＃34;没问题，只需要这个功能：

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

=＆GT;

**但我无法将该画布复制到另一张图片

就像这个例子：

<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>

拜托......我做错了什么？

Answer 1

我更新了整个答案

如果您只需要一个小部件，从图像顶部的一个Canvas，您可以使用＆＃34;帮助＆＃34;画布，一个接一个地绘制图像和toDataUrl函数

解决方案可以是：
1）在第一个画布上画画，
2）在Helper Canvas上绘制大图 3）将第一个Canvas的一部分复制到Helper Canvas上，
4）从Helper Canvas生成DataUrl并将其设置为图像的src属性

＆＃13;

// 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

＆＃13;

<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/>

＆＃13;

此处画布将转换为DataUrl，并分配给src代码的img属性。

这里有一些关于DataUrl https://de.wikipedia.org/wiki/Data-URL的信息这里是函数toDataUrl https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toDataURL

如果图片位于同一个域中，或设置了正确的allow-access-control-origin标题，则该图片应该可以正常使用

Answer 2

试试这个：

imageCTX.src = placeholder.toDataURL();

如何将一个画布复制到图像？

2 个答案: