HTML5所見即所得的簡單的「圖像編輯器」添加文本

Question

我尋找代碼或HTML5的所見即所得的圖像編輯器，它是下列capaple：

• 所見即所得的疊加文本添加到圖像

我覺得這可以通過canvas和html5輕鬆處理。源代碼很可能是data_uri，因此可以通過創建畫布來完成最終圖片的創建。任何編程語言都可以訪問到真實文件的轉換。

我的想法是：

1. 創建畫布data_uri出圖片（物理文件）
2. 能夠2A）繪製的覆蓋範圍內寫入文本，2B）的地方和調整等。無論您想要的疊加在創建的畫布上

有沒有什麼這樣做或將有可能與哪些代碼？

Answer 1

縮放文本圖像通常會導致不可預期的像素化。

可替代地，這裏是一個帶註釋的示例，允許用戶：

1. 輸入文本到文本輸入。
2. 單擊一個按鈕將文本填充到畫布上。
3. 使用鼠標事件在畫布周圍「拖動」文本。

關於變更：

您可以添加另一組的2個HTML按鈕，讓用戶縮放文本更大或更小。不是縮放文本的圖像，您可以簡單地增加或減小字體大小以響應html按鈕。

演示：

// canvas related variables 
 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
// variables used to get mouse position on the canvas 
 
var $canvas=$("#canvas"); 
 
var canvasOffset=$canvas.offset(); 
 
var offsetX=canvasOffset.left; 
 
var offsetY=canvasOffset.top; 
 
var scrollX=$canvas.scrollLeft(); 
 
var scrollY=$canvas.scrollTop(); 
 

 
// variables to save last mouse position 
 
// used to see how far the user dragged the mouse 
 
// and then move the text by that distance 
 
var startX; 
 
var startY; 
 

 
// an array to hold text objects 
 
var texts=[]; 
 

 
// this var will hold the index of the hit-selected text 
 
var selectedText=-1; 
 

 
// clear the canvas & redraw all texts 
 
function draw(){ 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    for(var i=0;i<texts.length;i++){ 
 
    var text=texts[i]; 
 
    ctx.fillText(text.text,text.x,text.y); 
 
    } 
 
} 
 

 
// test if x,y is inside the bounding box of texts[textIndex] 
 
function textHittest(x,y,textIndex){ 
 
    var text=texts[textIndex]; 
 
    return(x>=text.x && 
 
     x<=text.x+text.width && 
 
     y>=text.y-text.height && 
 
     y<=text.y); 
 
} 
 

 
// handle mousedown events 
 
// iterate through texts[] and see if the user 
 
// mousedown'ed on one of them 
 
// If yes, set the selectedText to the index of that text 
 
function handleMouseDown(e){ 
 
    e.preventDefault(); 
 
    startX=parseInt(e.clientX-offsetX); 
 
    startY=parseInt(e.clientY-offsetY); 
 
    // Put your mousedown stuff here 
 
    for(var i=0;i<texts.length;i++){ 
 
    if(textHittest(startX,startY,i)){ 
 
     selectedText=i; 
 
    } 
 
    } 
 
} 
 

 
// done dragging 
 
function handleMouseUp(e){ 
 
    e.preventDefault(); 
 
    selectedText=-1; 
 
} 
 

 
// also done dragging 
 
function handleMouseOut(e){ 
 
    e.preventDefault(); 
 
    selectedText=-1; 
 
} 
 

 
// handle mousemove events 
 
// calc how far the mouse has been dragged since 
 
// the last mousemove event and move the selected text 
 
// by that distance 
 
function handleMouseMove(e){ 
 
    if(selectedText<0){return;} 
 
    e.preventDefault(); 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    // Put your mousemove stuff here 
 
    var dx=mouseX-startX; 
 
    var dy=mouseY-startY; 
 
    startX=mouseX; 
 
    startY=mouseY; 
 

 
    var text=texts[selectedText]; 
 
    text.x+=dx; 
 
    text.y+=dy; 
 
    draw(); 
 
} 
 

 
// listen for mouse events 
 
$("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 
$("#canvas").mouseup(function(e){handleMouseUp(e);}); 
 
$("#canvas").mouseout(function(e){handleMouseOut(e);}); 
 

 
$("#submit").click(function(){ 
 

 
    // calc the y coordinate for this text on the canvas 
 
    var y=texts.length*20+20; 
 

 
    // get the text from the input element 
 
    var text={text:$("#theText").val(),x:20,y:y}; 
 

 
    // calc the size of this text for hit-testing purposes 
 
    ctx.font="16px verdana"; 
 
    text.width=ctx.measureText(text.text).width; 
 
    text.height=16; 
 

 
    // put this new text in the texts array 
 
    texts.push(text); 
 

 
    // redraw everything 
 
    draw(); 
 

 
});

body{ background-color: ivory; } 
 
#canvas{border:1px solid red;} 
 
#theText{width:10em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input id="theText" type="text"> 
 
<button id="submit">Draw text on canvas then drag it</button><br> 
 
<canvas id="canvas" width=300 height=300></canvas>