插入img標籤到Canvas元素

我試圖將一個圖像插入一個canvas元素。以此代碼爲例（http://jsfiddle.net/n3L6e1wp/）。我想用img標籤替換畫布中顯示的文本。我試着通過更換div的內容：插入img標籤到Canvas元素

<img src='<%= asset_path('layout/image.jpg') %>' id='picture' style='max-height:100%'>

但沒有顯示，我甚至不知道我能做到這一點。

在此先感謝！

2015-09-08 Danny

你不能把圖像的'內'......你可以將它們繪製到畫布上 – Alex

畫布drawImage方法將接受一個html img元素作爲圖象源，所以可以直接做：

ctx.drawImage(document.getElementById('picture'),0,0);

實施例的代碼和一個演示：

window.onload=function(){ 
 
    var canvas=document.getElementById("canvas"); 
 
    var ctx=canvas.getContext("2d"); 
 
    ctx.drawImage(document.getElementById('picture'),0,0); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas> 
 
<!-- src is for this demo. You can still use your <%...%> --> 
 
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/sun.png' id='picture' style='max-height:100%'>

來源

2015-09-08 20:32:38 markE

請注意，您需要在加載所有內容（或者特別是加載圖像元素）時運行該JS代碼。因此需要將其包裹在：'的window.onload =函數（）{...}' –

@SpencerWieczorek是的，總是包裹的帆布JS代碼'.onload'或'$（函數（）{}'難道你必須運行演示一個問題 - 我想棧片斷包裹JS自動有載 – markE

我也以爲，但是，是它似乎'onload'在Chrome至少也許代碼封裝後僅繪製。包裹在'document.ready'中呢？ –

試試這個代碼，將正常工作。

var canvas = document.getElementsByTagName('canvas'), 
var content = canvas.getContext('2d'); 

function insertImage() { 
    image = new Image(); 
    image.src = 'assets/img.png';  //any img src 
    image.onload = function(){ 
    content.drawImage(image, 300, 300); 
    } 
} 

insertImage();

來源

2015-09-08 10:11:29 WisdmLabs

事情是，我用JS改變圖像。我有一張表格，當我加載一張圖片時，我希望這張圖片能夠畫在畫布上。這就是爲什麼我試圖保持我的語法。也許有另一種解決方案... – Danny

@Danny你可以通過執行：document.getElementById（'picture'）。src'從HTML頁面獲取圖像'src'。 –

插入img標籤到Canvas元素

回答

相關問題