1

我知道可以将 a 的内容保存canvas为图像，在客户端，仅使用javaScript.

我有一张照片，我想在上面添加一些文本，用 CSS 设置文本样式，然后保存生成的图像，所有这些都在客户端。

那可能吗？

如果有一些javaScript库可以将所有由 CSS 样式化的 HTML 元素转换为画布形状，那就太棒了。

4

3 回答 3

3

查看HTML-2-canvas项目。它会将您的整个网页（或您想要的特定标签）转换为画布对象。

因此，在您的情况下，您将 HTML + 画布转换为画布。然后，您可以将其保存为图片。

于 2013-07-07T20:20:09.147 回答
1

在不了解您的项目的情况下，您可能会考虑使用原生 Canvas – 不使用 CSS

仅 Canvas 就可以让您在图像上放置文本

  • 字体
  • 字体大小
  • 颜色
  • 文字阴影
  • 不透明度
  • 渐变文字
  • 和更多...

无需太多额外的努力，您就可以做更多事情（仍在画布本身内）：

  • 文本对齐（使用 context.measureText）
  • 轮廓文本（使用 strokeText 进行填充的描边）
  • 显示下方图像的剪切文本 (globalCompositeOperation)
  • 路径上的文本（使用变换）
于 2013-07-07T23:03:28.137 回答
1

HTML5 Javascript Canvas FileReader <- 需要大量支持才能工作

所以只在最新的浏览器中。

在此示例中，您上传的图像将调整大小以保持纵横比，并将在左上角添加一些文本。这都是客户端

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var
maxSize=600, // Max width or height of the image
font='"italic small-caps bold 40px/50px arial";', // font style
fontColor='white', // font color
text='HELLO', // TEXT
textX=50, // text x position
textY=50, // text y position
h=function(e){
 var fr=new FileReader();
 fr.onload=function(e){
  var img=new Image();
  img.onload=function(){
   var r=maxSize/Math.max(this.width,this.height),
   w=Math.round(this.width*r),
   h=Math.round(this.height*r),
   c=document.createElement("canvas"),cc=c.getContext("2d");
   c.width=w;c.height=h;
   cc.drawImage(this,0,0,w,h);

   cc.font=font;
   cc.fillStyle=fontColor;
   cc.fillText(text,textX,textY);

   this.src=c.toDataURL();
   document.body.appendChild(this);
  }
  img.src=e.target.result;
 }
 fr.readAsDataURL(e.target.files[0]);
}
window.onload=function(){
 document.getElementById('f').addEventListener('change',h,false);
}
</script>
</head>
<body>
<input type="file" id="f">
</body>
</html>

这是一个很好的添加文字效果的教程

http://www.html5rocks.com/en/tutorials/canvas/texteffects/

于 2013-07-07T20:34:29.360 回答