使用Javascript將畫布轉換為圖像

Question

首先，我想說我一直在尋找答案幾個小時...

問題如下。 我的HTML代碼中有一個畫布，該畫布在屏幕上顯示了一些繪圖。 我要做的是將屏幕（在畫布上）看到的圖像轉換為圖像，該圖像將顯示在“ img”標簽中，就像網站上的經典圖像一樣。

在我的HTML代碼中，我有：

<canvas height="842" width="595"></canvas>

當我看着屏幕時，我確實有東西。

但是我想要的代碼是這樣的：

<img src="blabla" style="height: 842px; width: 595px";></img>

並且上面的行應該顯示的圖像與我們在畫布中看到的圖像相同。

這是我的JavaScript代碼的一部分。 canvas變量是已經創建的東西，它可以顯示畫布中的內容，因此可以正常工作。

var image = new Image();
image.src = canvas.toDataURL("image/jpg");

image.style.height = canvas.height;
image.style.width = canvas.width;

document.body.appendChild(image);

當我運行代碼並打開DevTools時，在HTML代碼中，該行在src標記中帶有URL。 但是從視覺上看，在我的屏幕上什么也沒有。 圖像甚至不是白色，絕對沒有。 在DevTools中，當我將鼠標懸停在圖像的線條上時，可以看到有一個保留給我的圖像的位置，它的尺寸很好，但是里面什么也沒有。 控制台未檢測到任何錯誤。

我該怎么辦 ？

Answer 1

我已經復制/粘貼了您的代碼，它的工作原理就像是一種魅力。 http://jsbin.com/hojuco/edit?html,css,js，輸出

在導出畫布之前，您是否在畫布中畫了東西？ 畫布在開始時是透明的，因此請確保它不僅僅是空的。

否則，您將變量混在一起。