1

canvasのみを使用して、クライアント側でのコンテンツを画像として保存できることを知っていますjavaScript。

写真があり、その上にテキストを追加し、CSS でテキストのスタイルを設定し、結果の画像を保存します。これらはすべてクライアント側で行います。

それは可能ですか？

javaScriptCSS によってスタイル設定されたすべての HTML 要素をキャンバスの形状に変換するライブラリがあれば、すばらしいことです。

4

3 に答える 3

3

HTML-2-canvasプロジェクトをチェックしてください。Web ページ全体 (または必要な特定のタグ) をキャンバス オブジェクトに変換します。

したがって、あなたの場合、HTML + canvas が Canvas に変換されます。その後、画像として保存できます。

于 2013-07-07T20:20:09.147 に答える
1

プロジェクトについて詳しく知らなくても、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 に答える