JavaScriptで画像をぼかし加工

JavaScriptで直接、画像ファイルを変更することはできない。

Canvas内に画像を読み込んでから、画像と差し替え、Canvas内で画像を加工して描画する。

img 

<img src="****.png" alt="img" />

↓(例)以下のように変換される


<canvas style="height: 120px; width: 480px; " height="120" width="480"></canvas>
http://camanjs.com/examples
view source

JavaScript

var canvas;
var tid;
function init(){
  canvas = document.createElement('canvas');
  //画像のDOMと情報を取得
  var images = getImages('sample');
  var image = images[0];
  var object = image.parentNode;
  console.log(image);
  var w = image.height * 2;
  var h = image.width * 2;
  canvas.style.height = h+'px';
  canvas.style.width = w+'px';
  canvas.height = h * 2;
  canvas.width = w * 2;
  canvas.src = image.src; 


  //canvasに画像を読み込む
  var ctx = canvas.getContext('2d');
  ctx.drawImage(image, w/4, h/4);

  //imgタグをcanvasに差し替える
  //object.replaceChild(canvas,image);
  $('#canvasWrap').empty();
  $('#canvasWrap').append(canvas);

  clearInterval(tid);
  tid = setInterval(function(canvas){
    blur(canvas)
  }, 100, canvas);
  ;
}




var inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.setAttribute('accept', 'image/*');
$('form').append(inputFile);
inputFile.onchange = function() {
  let file = this.files[0];
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function() {
    img.src = reader.result;
    init();
  }
}
var img = $('.sample')[0];
var src = img.src;



function getImages(className){
	var children = document.getElementsByTagName('img'); 
  console.log(children);
	var elements = new Array(); var i = 0;
	var child; var classNames; var j = 0;
	for (i=0;i<children.length;i++) {
		child = children[i];
		classNames = child.className.split(' ');
		for (var j = 0; j < classNames.length; j++) {
			if (classNames[j] == className) {
				elements.push(child);
				break;
			}
		}
	}
  console.log(elements);
	return elements;
}

if(window.addEventListener) window.addEventListener("load",init,false);
else window.attachEvent("onload",init);

CSS


  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-js/js-canvas-img-filter-blur/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。