前提・実現したいこと
http://www.chaordic.co.jp/memorandum/2016/09/addText2img.html
上記jQueryプラグインを使い、
テキストエリアに入力した文字を、img画像と合成し、
1つの画像として出力させています。
実現したいこととしては、
テキストエリアに入力した文字を、
一定の幅で折り返すようにさせたいです。
現状ですと、
テキストエリア入力時に、改行を入れないと文字が改行されず、
延々と続く形になり、画像外にはみ出しています。
問題が発生するまでの流れ・手順
上記ページを参考に入力した文字をcanvasに配置する際に、
文字を折り返すことが可能なところまでは調べたのですが、
実際にソースコードのどの部分が入力した文字に該当するのかわからず、
行き詰まっている状態です。
該当のソースコード
jQuery
1(function($){ 2 3 $.fn.addText2img = function(options) { 4 5 var _opt = $.extend({ 6 text: 'sample', 7 textset:{ 8 fillStyle: '#000', 9 font: "14px 'arial'", 10 textAlign: 'left', 11 textBaseline: 'top', 12 x: 10, 13 y: 10, 14 lineHeight: 5 15 } 16 }, options); 17 18 /* 19 * 改行してテキスト描画 20 */ 21 var lineFeed_fillText = function(_obj){ 22 var lines = _obj.text.split('\n'); 23 var lh = _obj.context.measureText("あ").width + _obj.lineHeight; 24 lines.forEach(function(line, i){ 25 _obj.context.fillText(line, _obj.x, _obj.y + lh * i); 26 }); 27 }; 28 29 var i = 0; 30 31 /* 32 * Main 33 */ 34 return this.each(function(){ 35 36 $this = $(this); 37 38 // 作業用キャンバスを作成 39 i++; 40 $('body').append('<canvas style="display:none;"></canvas>'); 41 var $canvas = $('canvas')[i - 1]; 42 43 /* 44 * 画像設定 45 */ 46 var img = new Image(); 47 img.src = $this.attr('src'); 48 49 /* 50 * 画像に文字を合成して画像として出力する 51 */ 52 var drawImg = function(){ 53 54 // 画像のロード判定 55 if (!img.complete){ 56 setTimeout(drawImg, 500); 57 return; 58 } 59 60 // 画像をキャンバスに書き出し 61 $canvas.width = img.width; 62 $canvas.height = img.height; 63 var cvs2d = $canvas.getContext("2d"); 64 cvs2d.drawImage(img, 0, 0); 65 66 // キャンバスのテキスト設定 67 cvs2d.fillStyle = _opt.textset.fillStyle; 68 cvs2d.font = _opt.textset.font; 69 cvs2d.textAlign = _opt.textset.textAlign; 70 cvs2d.textBaseline = _opt.textset.textBaseline; 71 72 // キャンバスに改行されたテキストを描画 73 lineFeed_fillText({ 74 context: cvs2d, 75 text: _opt.text, 76 x: _opt.textset.x, 77 y: _opt.textset.y, 78 lineHeight: _opt.textset.lineHeight 79 }); 80 81 // キャンバスを画像として書き出し 82 $this.attr("src", $canvas.toDataURL()); 83 84 } 85 86 drawImg(); 87 88 }); 89 }; 90})( jQuery );
HTML
1<script> 2$(function(){ 3 4 var n = 0; 5 var loc = [{top:380,left:750},{top:380,left:750},{top:380,left:750},{top:380,left:750},{top:380,left:750},{top:380,left:750}]; 6 var size = "16px"; 7 8 /* サムネのクリック */ 9 $(".select_chara li").click(function(){ 10 $(".select_chara li").removeClass("active"); 11 $(this).addClass("active"); 12 }); 13 14 $(".select_chara li").click(function(){ 15 var path = $(this).children("img").attr('src'); 16 path = path.replace( /-thumb/g , ""); 17 18 $('.addText').attr('src', path); 19 n = $(this).children("img").data("thumb"); 20 $('#text1').show(); 21 $('#make').show(); 22 23 var path2 = $(this).children("img").attr('src'); 24 path2 = path2.replace( /thumb/g , "result"); 25 26 $('.resultImg').attr('src', path2); 27 n = $(this).children("img").data("thumb"); 28 29 $('#result').hide(); 30 }); 31 32 /* ジェネレート */ 33 $("#make").click(function(){ 34 var textset = { 35 fillStyle: '#000', 36 font: size + " '", 37 textAlign: 'left', 38 textBaseline: 'top', 39 x: loc[n].left, 40 y: loc[n].top, 41 lineHeight: 5 42 }; 43 44 var text1 = $('#text1').val(); 45 $('.resultImg').addText2img({ 46 text: text1, 47 textset: textset 48 }); 49 50 $('#fukidashi').hide(); 51 $('#make').hide(); 52 $('#result').show(); 53 }); 54 55}); 56 57</script>
回答1件
あなたの回答
tips
プレビュー