HTML5 所见即所得简单 "Image editor" 添加文本

Question

我正在搜索代码或 Html5 所见即所得图像编辑器，它具有以下功能：

所见即所得的向图像添加叠加文本

我认为这可以由 canvas 和 html5 轻松处理。来源很可能是 data_uri，因此可以通过创建 canvas 来创建最终图片。任何编程语言都可以访问到真实文件的转换。

我的想法是：

创建 Canvas 为 data_uri out of Picture（物理文件）
能够 2a) 在绘制的叠加层中写入文本，2b) 在创建的 Canvas

有没有什么可以做的，或者可以使用哪个代码？

Answer 1

缩放文本图像通常会导致不希望出现的像素化。

或者，这是一个带注释的示例，让用户：

在文本输入中输入文本。
单击按钮将文本填充到 canvas。
使用鼠标事件 "drag" canvas 周围的文本。

关于调整大小：

您可以添加另一组 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>

HTML5 所见即所得简单 "Image editor" 添加文本

HTML5 Wysiwyg simple "Image editor" add text

html

image

canvas