「294-ol3ex.js」
var key = 'Ak-dzM省略';
var imagery = new ol.layer.Tile({
source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
/** ol.source.BingMaps
* Layer source for Bing Maps tile data.
* Bing Maps タイルデータのレイヤソース。（ol3 API）
*/
});
var map = new ol.Map({
layers: [imagery],
target: 'map',
view: new ol.View({
center: ol.proj.transform([-120, 50], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
var kernels = {
none: [
0, 0, 0,
0, 1, 0,
0, 0, 0
],
sharpen: [
0, -1, 0,
-1, 5, -1,
0, -1, 0
],
sharpenless: [
0, -1, 0,
-1, 10, -1,
0, -1, 0
],
blur: [
1, 1, 1,
1, 1, 1,
1, 1, 1
],
shadow: [
1, 2, 1,
0, 1, 0,
-1, -2, -1
],
emboss: [
-2, 1, 0,
-1, 1, 1,
0, 1, 2
],
edge: [
0, 1, 0,
1, -4, 1,
0, 1, 0
]
};
function normalize(kernel) {
var len = kernel.length;
var normal = new Array(len); /** Array(arraylength) * JavaScript は配列を扱うことができます。配列とは順序を持つ複 * 数のデータの集合であり、JavaScript のグローバルオブジェクト * である Array は、高位の、（C言語等で云うところの）「リス * ト」の様な、配列のコンストラクタです。 * arraylength * Array コンストラクタに渡される唯一の引数（arrayLength）に * 0 から 4,294,967,295( 232-1 ) までの整数値を指定する場合 * その値を要素数とする配列が作成されます。その際に範囲外の値 * は、を指定した場合には、例外: RangeError がスローされます。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Array]） */
var i, sum = 0;
for (i = 0; i < len; ++i) {
sum += kernel[i];
}
if (sum <= 0) {
normal.normalized = false;
sum = 1;
} else {
normal.normalized = true;
}
for (i = 0; i < len; ++i) {
normal[i] = kernel[i] / sum;
}
return normal;
}
var select = document.getElementById('kernel');
var selectedKernel = normalize(kernels[select.value]);
/** * Update the kernel and re-render on change. */
select.onchange = function() {
/** GlobalEventHandlers.onchange()
* The onchange property sets and returns the event handler
* for the change event.
* onchange プロパティは、change イベントに対してイベントハ
* ンドラを設定、および、返します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/GlobalEventHandlers/onchange]）
*/
selectedKernel = normalize(kernels[select.value]);
map.render(); /** render() * Requests a render frame; rendering will effectively occur * at the next browser animation frame. * レンダーフレームをを要求します。すなわち、レンダリングは、 * 次のブラウザのアニメーションフレームで、効果的に発生します。 * （ol3 API） */
};
/**
* Apply a filter on "postcompose" events.
* @param {ol.render.Event} event Render event.
*/
imagery.on('postcompose', function(event) {
/** on()
* Listen for a certain type of event.
* Returns: Unique key for the listener.（ol3 API）
*/
convolve(event.context, selectedKernel); });
/**
* Apply a convolution kernel to canvas. This works for any
* size kernel, but performance starts degrading above 3 x 3.
* キャンバスにコンボリューションカーネルを適用します。これは、
* 任意のサイズのカーネルで動作しますが、パフォーマンスは、
* 3×3 以上で低下を始めます。
* @param {CanvasRenderingContext2D} context Canvas 2d context.
* @param {Array.<number>} kernel Kernel.
*/
/** 「@param」 * The @param tag provides the name, type, and description * of a function parameter. * The @param tag requires you to specify the name of the * parameter you are documenting. You can also include the * parameter's type, enclosed in curly brackets, and a * description of the parameter. * @paramタグは、関数パラメータの名前と型、説明を提供します。 * @paramタグを使用すると、文書化されたパラメータの名前を * 指定する必要があります。また、パラメータのタイプと、中括弧 * で囲まれたおよびパラメータの説明を含めることができます。 * （@use JSDoc [http://usejsdoc.org/tags-param.html]） */
function convolve(context, kernel) {
var canvas = context.canvas;
//canvas 要素を取得して変数 canvas に代入
var width = canvas.width; /** HTMLCanvasElement.width * A positive integer reflecting the width HTML attribute * of the <canvas> element interpreted in CSS pixels. * When the attribute is not specified, or if it is set * to an invalid value, like a negative, the default value * of 300 is used. * CSSピクセルで解釈された <canvas> 要素の幅 HTML 属性 * を反映する正の整数。属性が指定されていない場合、または、 * 負の値のような、無効な値に設定されている場合、デフォルト * 値 300 が使用さます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/HTMLCanvasElement]） */
var height = canvas.height; /** HTMLCanvasElement.height * A positive integer reflecting the height HTML attribute * of the <canvas> element interpreted in CSS pixels. * When the attribute is not specified, or if it is set * to an invalid value, like a negative, the default value * of 150 is used. * CSSピクセルで解釈された <canvas> 要素の高さ HTML 属 * 性を反映する正の整数。属性が指定されていない場合、または、 * 負の値のような、無効な値に設定されている場合、デフォルト * 値 150 が使用さます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/HTMLCanvasElement]） */
var size = Math.sqrt(kernel.length); /** Math.sqrt() * 引数として与えた数の平方根を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/sqrt]） */
var half = Math.floor(size / 2); /** Math.floor() * The Math.floor() function returns the largest * integer less than or equal to a given number. * Math.floor() 関数は、指定された数以下の最大の整数、 * または、等しい数を返します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * JavaScript/Reference/Global_Objects/Math/floor]） */
var inputData = context.getImageData(0, 0, width, height).data; /** CanvasRenderingContext2D.getImageData() * The CanvasRenderingContext2D.getImageData() method * of the Canvas 2D API returns an ImageData object * representing the underlying pixel data for the * area of the canvas denoted by the rectangle which * starts at (sx, sy) and has an sw width and sh * height. * Canvas 2D API の * CanvasRenderingContext2D.getImageData（）メソッド * は、（SX、SY）で始まり、および、SWの幅とSHの高さを持つ、 * 長方形で表示されるキャンバスの領域の基礎となるピクセル * データを表現するの ImageData オブジェクトを返します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/getImageData]） */
var output = context.createImageData(width, height); /** CanvasRenderingContext2D.createImageData() * The CanvasRenderingContext2D.createImageData() * method of the Canvas 2D API creates a new, blank * ImageData object with the specified dimensions. * All of the pixels in the new object are transparent * black. * Canvas 2D APIの * CanvasRenderingContext2D.createImageData（）メソッド * は、指定された大きさで新しい、空白の ImageData オブジェ * クトを作成します。新しいオブジェクトの全ての画素は透明 * な黒です。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/createImageData]） */
var outputData = output.data;
for (var pixelY = 0; pixelY < height; ++pixelY) {
var pixelsAbove = pixelY * width;
for (var pixelX = 0; pixelX < width; ++pixelX) {
var r = 0, g = 0, b = 0, a = 0;
for (var kernelY = 0; kernelY < size; ++kernelY) {
for (var kernelX = 0; kernelX < size; ++kernelX) {
var weight = kernel[kernelY * size + kernelX];
var neighborY = Math.min( /** Math.min() * 引数として与えた複数の数の中で最小の数を返します。 * （MDN [https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/min]） */
height - 1, Math.max(0, pixelY + kernelY - half)); /** Math.max() * 引数として与えた複数の数の中で最大の数を返します。 * （MDN [https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Reference/Global_Objects/Math/max]） */
var neighborX = Math.min( width - 1, Math.max(0, pixelX + kernelX - half)); var inputIndex = (neighborY * width + neighborX) * 4; r += inputData[inputIndex] * weight; g += inputData[inputIndex + 1] * weight; b += inputData[inputIndex + 2] * weight; a += inputData[inputIndex + 3] * weight; } } var outputIndex = (pixelsAbove + pixelX) * 4; outputData[outputIndex] = r; outputData[outputIndex + 1] = g; outputData[outputIndex + 2] = b; outputData[outputIndex + 3] = kernel.normalized ? a : 255; } }
context.putImageData(output, 0, 0); /** anvasRenderingContext2D.putImageData() * The CanvasRenderingContext2D.putImageData() method of * the Canvas 2D API paints data from the given ImageData * object onto the bitmap. If a dirty rectangle is * provided, only the pixels from that rectangle are * painted. * Canvas 2D API の * CanvasRenderingContext2D.putImageData（）メソッドは、与え * られた ImageData オブジェクトからのデータでビットマップ上 * に描画します。汚染された矩形が提供される場合、その矩形のピ * クセルだけが描画されます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/putImageData]） */
}
0 件のコメント:
コメントを投稿