Category: JavaScript

jsからCanvas

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>JavaScriptでスクリーンショット</title>
</head>

<body>
	<hr>
	<div style="background-color : #AAEEDD"><h1>JavaScriptで撮るスクリーンショット</h1></div>
	<div id="target">
	<h2>導入方法と処理概要</h2>
	<table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333" style="table-layout: fixed;">
	<tr>
		<th bgcolor="#7b9ad0" width="40"><font color="#FFFFFF">No</font></th>
		<th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">概要</font></th>
		<th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">補足</font></th>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">1</td>
		<td bgcolor="#7b9ad0" width="230">任意のタイミングでhtml2canvas関数を呼ぶ</td>
		<td bgcolor="#7b9ad0" width="230">※今回はオンロード処理</td>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">２</td>
		<td bgcolor="#7b9ad0" width="230">任意のタイミングでhtml2canvas関数を呼ぶ</td>
		<td bgcolor="#7b9ad0" width="230">※今回はオンロード処理</td>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">３</td>
		<td bgcolor="#7b9ad0" width="230">onrendered処理にて指定のElementに画像を追記</td>
		<td bgcolor="#7b9ad0" width="230">※[img]タグの[src]や、[a]タグの[href]など</td>
	</tr>
</table>
</div>
<br>
<hr>
<h3>↓↓ここから画像↓↓ (上の対象のDIVを画像化)</h3>
<img src="" id="result">
<h3>↑↑ここまで画像↑↑</h3>

<hr>

<a href="" id="ss" download="html_ss.png">スクリーンショット(document.body全体)をダウンロード</a>
<hr>
<h3>注意</h3>
<ul>
	<li>実際にはスクリーンショットを撮っているわけではない</li>
	<li>html2canvasは、HTML内のDOMやCCSを解釈してCanvas上に描画するライブラリ</li>
	<li>つまり、レンダリングエンジンに近い動作をする</li>
	<li>そのため、ブラウザと異なる表示がされる場合がある</li>
	<li>flashやapplet, iframe(別URL)はうまくキャプチャできない</li>
</ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
	window.onload = function(){

		html2canvas(document.getElementById("target"),{
			onrendered: function(canvas){
				var imgData = canvas.toDataURL();
				document.getElementById("result").src = imgData;
			}
		});

		html2canvas(document.body, {
			onrendered: function(canvas){
				var imgData = canvas.toDataURL();
				document.getElementById("ss").href = imgData;
			}
		});
	}
</script>
</body>
</html>

svgをcanvasで表示する

<!doctype html>
<html>
<head>
	<title>title</title>
</head>
<body>
	<canvas id="c" width="200" height="200"></canvas>
</body>
<script>
	var img = new Image();
	img.src = 'http://www.w3.org/Icons/SVG/svg-logo-v.svg';
	img.onload = function(){
		var c = document.getElementById('c');
		var ctx = c.getContext('2d');
		ctx.drawImage(img, 0, 0, 200, 200);
	}
</script>
</html>

これはsvgなんだが、HTMLタグで行きたいね。。

HTMLタグ→SVG画像作成→Canvasで画像化？
んーん、苦戦。。

foreignObject

SVG elements make it possible to include external XML namespaces with graphic content rendered by different user agents. External graphic content included is subject to SVG conversion and composition.

<svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
	<desc>The svg tag can write code and draw an image. Compared with bitmap data such as JPEG and PNG, even if it is enlarged, it can be displayed in a beautiful state without blurring.</desc>
	<switch>
		<foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml">
		<body xmlns="http://www.w3.org/1999/xhtml">
			<p>Here is a paragraph that requires word wrap</p>
		</body>
	</foreignObject>

	<text font-size="10" font-family="Verdana">
		<tspan x="10" y="10">Here is a paragraph that</tspan>
		<tspan x="10" y="20">requires word wrap.</tspan>
	</text>
</switch>
</svg>


<svg width="960px" height="1280px" viewBox="0 0 960 1280" xmlns="http://www.w3.org/2000/svg">
	<style>
	h1 {
		color:red;
	}
	</style>
	<g>
		<foreignObject x="0" y="0" width="100%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml">
		<body xmlns="http://www.w3.org/1999/xhtml">
			<p>Hello, world!</p>
		</body>
	</foreignObject>
</g>
</svg>

ん？　どういこと？

tinyMCEに絵文字を追加する

TinyMCEに絵文字を追加したい

公式ドキュメント：TinyMCE Emoticons plugin
https://www.tiny.cloud/docs/plugins/emoticons/
これ↓を追加すればよい？？

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "emoticons",
  toolbar: "emoticons"
});

早速行きます。

<!DOCTYPE html>
<html>
<head>
	<script
  src="https://code.jquery.com/jquery-3.3.1.slim.js"
  integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
  crossorigin="anonymous"></script>
	<script src="tinymce/js/tinymce/tinymce.min.js"></script>
	<script>
  tinymce.init({
    mode : "specific_textareas",
    editor_selector : "mceEditor",
    plugins: "emoticons",
    toolbar: "emoticons",
    init_instance_callback: function (editor) {
      editor.on('change', function (e) {
          $('#preview_area').html(editor.getContent());
      });
    }
  });
</script>
	
</head>
<body>
	<h1>テキストを入力してください</h1>
    <textarea id="myTextArea" class="mceEditor">TinyMCE Editor</textarea>
    <div style="border:1px solid; width:200px; height:200px;" id="preview_area"></div>
</body>
</html>

すくな！？デフォルトだと16種類しかない！？　うーむ、困ったぞー　これ、tinyMCEのバージョンが最新なら、絵文字の種類も増えるとかある？？

ああああああああああ、なるほど、emoticonsのimgフォルダに入っている画像を使ってるのね。
utf-8の絵文字、👿👹👺などをパレットで選べるようにしたいですねー

パスワード 入力値の確認　その2

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#errorMessage {
	color: red;
}
</style>
<form>
<div id="errorMessage"></div>

<label for="name">お名前:</label>
<input name="name" id="name" required><br>
<label for="password">パスワード:</label>
<input type="password" name="password" id="password" required><br>
<label for="passwordConfirm">パスワード(確認):</label>
<input type="password" name="confirm" id="confirm" oninput="CheckPassword(this)"><br>
<input type="submit" value="送信">
</form>
<script>
		function CheckPassword(confirm){
			var input1 = password.value;
			var input2 = confirm.value;

			if (input1 != input2){
				confirm.setCustomValidity("入力値が一致しません");
			} else{
				confirm.setCustomValidity('');
			}
		}
</script>

うまくいきました。

oninput=””か、なるほど。

Rhino

Rhino is an open source JavaScript implementation that is being developed. Rhino is written in Java and is managed and distributed by the Mozilla Foundation. The Mozilla Foundation also provides software called SpiderMonkey implemented in C language.

The development of Rhino was launched by Netscape Communications in 1997, and after being transferred to the Mozilla Foundation in 1998 it became open source software. The name of Rhino was from the animal drawn on the cover of JavaScript book published by O’Reilly.

$ sudo yum install rhino

インストール:
  rhino.noarch 0:1.7R4-4.el6

依存性関連をインストールしました:
  jline.noarch 0:0.9.94-0.8.el6

完了しました!

Inside of tinymce’s js

I want to customize link pulugin JS of tinymce.

Let’s look at source code, pulugin.min.js

/**
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
* Licensed under the LGPL or a commercial license.
* For LGPL see License.txt in the project root for license information.
* For commercial licenses see https://www.tiny.cloud/
*
* Version: 5.0.0-1 (2019-02-04)
*/
!function(){“use strict”;var n,t,e,r,o,i=tinymce.util.Tools.resolve(“tinymce.PluginManager”),u=tinymce.util.Tools.resolve(“tinymce.util.VK”),a=function(n){return n.target_list},c=function(n){return n.rel_list},l=function(n){return n.link_class_list},h=function(n){return”boolean”==typeof n.link_assume_external_targets&&n.link_assume_external_targets},f=function(n){return”boolean”==typeof n.link_context_toolbar&&n.link_context_toolbar},s=function(n){return n.link_list},p=function(n){return”string”==typeof n.default_link_target},v=function(n){return n.default_link_target},g=a,d=function(n){return!1!==a(n)},m=c,y=function(n){return c(n)!==undefined},k=l,x=function(n){return l(n)!==undefined},b=function(n){return!1!==n.link_title},O=function(n){return”boolean”==typeof n.allow_unsafe_link_target&&n.allow_unsafe_link_target},w=function(n){return!0===n.link_quicklink},_=tinymce.util.Tools.resolve(“tinymce.dom.DOMUtils”),A=tinymce.util.Tools.resolve(“tinymce.Env”),C=function(n){if(!A.ie||10‘),o.close()}}var i,u},T=tinymce.util.Tools.resolve(“tinymce.util.Tools”),N=function(n,t){var e,r,o=[“noopener”],i=n?n.split(/\s+/):[],u=function(n){return n.filter(function(n){return-1===T.inArray(o,n)})};return(i=t?(e=u(e=i)).length?e.concat(o):o:u(i)).length?(r=i,T.trim(r.sort().join(” “))):””},S=function(n,t){return t=t||n.selection.getNode(),D(t)?n.dom.select(“a[href]”,t)[0]:n.dom.getParent(t,”a[href]”)},M=function(n){return n&&”A”===n.nodeName&&n.href},D=function(n){return n&&”FIGURE”===n.nodeName&&/\bimage\b/i.test(n.className)},z=function(n,t){var e,r;(r=n.dom.select(“img”,t)[0])&&(e=n.dom.getParents(r,”a[href]”,t)[0])&&(e.parentNode.insertBefore(r,e),n.dom.remove(e))},E=function(n,t,e){var r,o;(o=n.dom.select(“img”,t)[0])&&(r=n.dom.create(“a”,e),o.parentNode.insertBefore(r,o),r.appendChild(o))},L=function(i,u){return function(o){i.undoManager.transact(function(){var n=i.selection.getNode(),t=S(i,n),e={href:o.href,target:o.target?o.target:null,rel:o.rel?o.rel:null,”class”:o[“class”]?o[“class”]:null,title:o.title?o.title:null};if(!y(i.settings)&&!1===O(i.settings)){var r=N(e.rel,”_blank”===e.target);e.rel=r||null}o.href===u.href&&(u.attach(),u={}),t?(i.focus(),o.hasOwnProperty(“text”)&&(“innerText”in t?t.innerText=o.text:t.textContent=o.text),i.dom.setAttribs(t,e),i.selection.select(t),i.undoManager.add()):D(n)?E(i,n,e):o.hasOwnProperty(“text”)?i.insertContent(i.dom.createHTML(“a”,e,i.dom.encode(o.text))):i.execCommand(“mceInsertLink”,!1,e)})}},U=function(t){return function(){t.undoManager.transact(function(){var n=t.selection.getNode();D(n)?z(t,n):t.execCommand(“unlink”)})}},P=function(n){return 0]+>[^<]+<\/a>$/.test(n)||-1===n.indexOf(“href=”)))},q=S,I=function(n,t){var e=t?t.innerText||t.textContent:n.getContent({format:”text”});return e.replace(/\uFEFF/g,””)},j=N,V=function(){for(var n=[],t=0;t

Customize TinyMCE

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="tinymce/js/tinymce/tinymce.min.js"></script>
	<script>
		tinymce.init({
			selector:"#tiny",
			menubar: false,
			 plugins: "textcolor link",
       		 toolbar: [ 
            "bold",
            "forecolor link"
        ],
        statusbar: false,
		});
	</script>
</head>
<body>
	<textarea id="tiny" name=""></textarea>
</body>
</html>

なんだこれ、すげー簡単じゃん。やられたー
色を赤だけ、linkからtitleを外したい。

公式ドキュメントを見ます。
https://www.tiny.cloud/docs/configure/content-appearance/#text_color

	<script>
		tinymce.init({
			selector:"#tiny",
			menubar: false,
			 plugins: "textcolor link",
       		 toolbar: [ 
            "bold",
            "forecolor link"
        ],
        color_map:[
        	"FF0000", "Red",
        ],
        statusbar: false,
		});
	</script>

ぎゃあああああああああああああああああああ

Download TinyMCE, and set it for vagrant

TinyMCE is a library of editors that you can edit while viewing sentences like blogs and word.
(It is made with JavaScript, license is LGPL)

– Abundant functions including plug-ins
– High quality is adopted for WordPress etc.
– You can flexibly customize such as adding toolbars, replacing and deleting button positions, adding own buttons

Download files from distribution site
https://www.tiny.cloud/get-tiny/

Self-hosted release 5.0.0
// Download everything you need for production usage (including a jQuery integration plugin) for free. TinyMCE is open source and licensed under LGPL 2.1.

Unzip the downloaded tinymce and place it on the server.

index.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="tinymce/js/tinymce/tinymce.min.js"></script>
	<script>
		tinymce.init({
			selector:"#tiny"
		});
	</script>
</head>
<body>
	<textarea id="tiny" name=""></textarea>
</body>
</html>

さーカスタマイズ頑張るぞ！