如何將一個畫布複製到圖像中？

我已經奔這個現在一個詭計...似乎很容易，但我cant't弄明白如何將一個畫布複製到圖像中？

也許我不能做出正確的問題...

好，

1.我有這個這個帆布：

- >

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

和一個「噸EST畫布」

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

使從副本「placehoder」到「CTX」是確定的，只是讓這個功能：

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

**但我無法將該畫布複製到另一個圖像

喜歡這個例子：

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

請......我做錯了什麼？

來源

2016-09-05 Roberval Sena 山本

你能檢查我的答案嗎？你需要更多的幫助嗎？ –

我上的圖像的頂部更新了全部答案

如果你只需要一個很小的一部分，從一個畫布，你可以使用一個「助手」畫布上描繪後的圖像一個其他和toDataUrl功能

解決方案可以是：
1）繪製在第一畫布，
2）上助手畫布
繪製大圖像3）複製第一畫布到助手畫布的部分，
4）從助手畫布生成一個DataUrl並設置它的到src屬性的圖像

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

這裏畫布轉換爲DataUrl，並分配給img標記的src屬性。

這裏的一些信息給DataUrl https://de.wikipedia.org/wiki/Data-URL
和這裏的功能toDataUrlhttps://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toDataURL

如果圖像是在同一個域，或者有正確的allow-access-control-origin頭設置它應該工作以及

來源

2016-09-05 11:42:50

非常感謝！但仍然...請...如何從畫布**中獲得** 100px X 250px的副本，並且**將其粘貼到DOM中的一個圖像中（可以說約32000px X 250x）也許在位置400px？就像我試過的tio做的一樣** imageCTX.putImageData（imgData，100，0）; ** –

從一塊畫布複製到另一塊畫布的一部分是可以的，但是將**一塊畫布**複製到** DOM中的另一部分.PNG ** ...我不知道... –

@RobervalSena山本我更新了我的答案，這應該可以解決問題。 :-D –

試試這個：

imageCTX.src = placeholder.toDataURL();

來源

2016-09-05 11:44:35

如何將一個畫布複製到圖像中？

回答

相關問題