Question

我知道可以仅使用canvas在客户端保存javaScript的内容作为图片。

我有一张照片，我想在其上添加一些文字，用CSS设置文字样式，然后将结果图像保存在客户端。

这可能吗？

如果有一些javaScript库来转换CSS中用画布形状设置的所有HTML元素，那就太棒了。

Answer 1

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

因此，在您的情况下，您将HTML + canvas转换为Canvas。然后你可以把它保存为图片。

Answer 2

HTML5 Javascript Canvas FileReader＆lt; - 需要很多工作支持

所以仅限于最新的浏览器。

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

<!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/

Answer 3

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

单独使用Canvas可以让你将文字放在图像上

字体面
字体大小
颜色
文字阴影
不透明度
渐变文字
以及......

没有那么多额外的努力，你可以做更多（仍然在画布本身）：

text align（using context.measureText）
大纲文字（没有使用strokeText填充的笔划）
显示下方图像的剪切文本（globalCompositeOperation）
路径上的文字（使用转化）

保存为与CSS混合的图像画布

3 个答案: