基本上標題是我的問題。我沒有代碼顯示(我不知道從哪裏開始),所有這些都需要使用純JavaScript。如何從我的電腦上傳圖像並將其繪製到畫布上?
回答
查找drawImage函數(我推薦w3schools)。
在JavaScript中,你首先需要獲得畫布
const canvas = document.getElementById("canvasID");
而且theb畫布
const context = canvas.getContext("2d");
的情況下的背景是要呼籲drawImage方法是什麼。
context.drawImage(image, xPos, Ypos);
您在的drawImage傳遞的圖像應該被加載這樣:
const image = new Image();
image.src = "path/image.jpg";
image.addEventListener('load',() =>
{
context.drawImage(image, xPos, yPos);
});
我會做的方式是如下:
window.addEventListener('load',() =>
{
const canvas = document.getElementById("canvasID");
const ctx = canvas.getContext("2d");
const image = new Image();
image.addEventListener('load',() =>
{
ctx.drawImage(image, xPos, yPos);
});
});
這不起作用。這裏是我的代碼: window.onload = function(){ var canvas = document.createElement(「canvas」); var c = canvas.getContext(「2d」); canvas.width = 400; canvas.height = 400; document.body.appendChild(canvas); c.fillStyle =「white」; c.fillRect(0,0,canvas.width,canvas.height); var image = new Image(); image.src =「C:\ Users \ Kids \ Desktop \ Game Maker Stuff \ Resources \已修改的Sprite資源\ Gaster Boss Fight \ gaster \ gaster_full」; image.addEventListener('load',()=> { context.drawImage(image,xPos,yPos); }); c.drawImage(image,0,0); } – Canvas16
xPos和yPos arent值,您需要用實際數字替換它們。也嘗試使用相對於html文件的路徑。所以如果你的html文件在一個文件夾中,並且文件夾中的圖像的路徑是:../images/image.png。請記住,路徑將來自html文件,即使您的html與html不同的文件 – danivdwerf
我實際上並沒有html文件。這是我第一次參與多文件程序。 @Aron這對我不起作用,因爲該程序每次運行時都需要手動上傳。我想要一個總是自動上傳相同圖像的程序。 – Canvas16
- 1. 繪製大型圖像到畫布上
- 2. 如何變暗畫布或畫布上繪製的圖像?
- 3. 在平板電腦上繪製繪圖
- 4. 從URL下載圖像並在畫布上繪製 - Android
- 5. html5,將一個eventlistener添加到畫布上的繪製圖像
- 6. 在畫布上繪製對象/圖像
- 7. 在畫布上繪製背景圖像
- 8. 在縮放畫布上繪製圖像
- 9. 在畫布上繪製旋轉圖像
- 10. 在畫布上繪製陣列圖像?
- 11. 用JQuery在畫布上繪製圖像
- 12. 掌上電腦:繪製控制位圖
- 13. 添加圖像到選擇選項或上傳並繪製它的畫布
- 14. 從畫布上的像素數組中繪製圖像putImageData
- 15. 在畫布中繪製並將其保存爲較大圖像
- 16. 安排畫布上繪製的繪圖
- 17. 如何將不同的圖像(從同一個畫布生成)繪製到另一個畫布上?
- 18. 將TRichEdit繪製到畫布上
- 19. 在畫布上繪製的圖像,並返回作爲紋理
- 20. 如何將同一對象的多個圖像繪製到單個畫布上
- 21. 如何將一個可繪製的圖像放入此畫布中並讓它在此圖像上畫線?
- 22. 如何將大量圖像複製到PHP中的畫布上?
- 23. WPF - 在畫布上創建並繪製圖像
- 24. 上傳從畫布圖像使用Grails
- 25. 用圖像填充對象,不用顏色(將圖像繪製到畫布上)
- 26. 在Android上的畫布上繪製多個圖像
- 27. 在畫布上繪製圖像時如何避免CORS錯誤?
- 28. Tkinter:如何在背景畫布上繪製圖像
- 29. 如何在畫布上對圖像進行「繪製」?
- 30. 如何繪製onResume上的畫布
你可能要開始谷歌找到這個:https://stackoverflow.com/questions/22255580/javascript-upload-image-file-and-draw-it-into-a-canvas。 – Aron
歡迎來到Stack Overflow!問「我從哪裏開始」的問題通常太寬泛,並不適合本網站。人們有自己的方法來解決這個問題,正因爲如此,沒有一個正確的答案。請仔細閱讀[**從哪裏開始**](https://softwareengineering.meta.stackexchange.com/questions/6366/where-to-start/6367#6367),然後解決您的文章。 – 4castle
@Aron感謝您的鏈接,下次您可以將此問題標記爲重複 –