Javascript； 使用畫布在圖像上添加文本並保存到圖像
[英]Javascript; Adding text on image using canvas and save to image
問題描述
我只想制作一個頁面，您可以在其中鍵入文本並將其添加到所選圖像上並將其另存為新圖像。
我嘗試通過幾種方式做到這一點，但沒有運氣。
<body>
<canvas id = "idCanvas" width = "576" height = "577"> </canvas>
<img id="canvasImg" width = "576" height = "577"></img>
<script>
window.onload = function(){
var canvas = document.getElementById('idCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var dataURL = canvas.toDataURL();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0, 576, 577);
context.font = "20px Calibri";
context.fillText("My TEXT!", 50, 200);
document.getElementById('canvasImg').src = toDataURL();
window.alert(dataURL);
};
imageObj.src = "image.png";
};
</script>
當我在 img src 中使用 toDataURL() 時，圖像不會顯示，只有當我不在畫布中使用 drawImage 時才有效。
2 個解決方案
解決方案1
2 2015-01-19 00:11:25
好的，是的，出於安全原因，它不起作用，但有一個解決方案。 在這里看到一個工作演示： FIDDLE
draw();
function draw() {
var canvas = document.getElementById('idCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
context.font = "40px Calibri";
context.fillStyle = "red";
context.fillText("My TEXT!", 50, 300);
var canvas = document.getElementById('idCanvas');
var dataURL = canvas.toDataURL();
alert(dataURL);
}
imageObj.setAttribute('crossOrigin', 'anonymous');
imageObj.src = "https://loremflickr.com/400/200";
};
解決方案2
0 2015-01-18 21:58:11
首先，它應該是canvas .toDataURL() 嗎？
這是一個類似的例子，將內容放入圖像元素http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
從另一個主機名加載圖像時，我也收到以下錯誤：
未捕獲的安全錯誤：無法在“HTMLCanvasElement”上執行“toDataURL”：可能無法導出受污染的畫布。
當圖像未添加到畫布時，它工作正常，因此問題可能與未添加圖像的 CORS HTTP 標頭有關。 嘗試刪除
context.drawImage(imageObj, 0, 0, 576, 577);
看看它在沒有圖像的情況下工作
這是一個基於相關代碼的演示。 http://jsbin.com/logikuwefo/1/edit
向圖像添加文本，無 canvas，普通 javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.