另存为与 CSS 混合的图像画布答案

【问题标题】：Save as image canvas mixed with CSS另存为与 CSS 混合的图像画布
【发布时间】：2013-07-08 07:03:28
【问题描述】：

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

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

这可能吗？

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

【问题讨论】：

我建议也通过画布编辑文本。如果你很勇敢 - 通过 SVG 做所有事情。更容易创建和编辑，但更难保存为光栅化图像。

标签： javascript html css image canvas

【解决方案1】：

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

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

【讨论】：

这是一个完整的Javascript渲染引擎！相当令人印象深刻。

【解决方案2】：

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/

【讨论】：

【解决方案3】：

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

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

字体
字体大小
颜色
文本阴影
不透明度
渐变文字
还有更多...

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

文本对齐（使用 context.measureText）
大纲文本（使用 strokeText 进行无填充的描边）
显示下方图像的剪切文本 (globalCompositeOperation)
路径上的文本（使用变换）

【讨论】：