cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Color Change with AlphaPicker</h1>
<p>非透過部分をクリックで画像の色が変わります。</p>
<p><img src="data:image/png;base64,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
" alt="" /></p>
            
          
!
            
              body {
  background: url(data:image/gif;base64,R0lGODlhEAAQAIAAAN/f3////yH5BAAHAP8ALAAAAAAQABAAAAIfjG+gq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7);
  color: #333;
	text-align: center;
}

h1 {
	font: 48px/1.6 "Myriad Pro", sans-serif;
}

img {
	border: 1px solid #999;
}

.alphapicker {
	cursor: default;
}
.hover {
	cursor: pointer;
}
            
          
!
            
              /*
 * AlphaPicker.js
 * https://github.com/escapism/AlphaPicker
 *
 */

window.addEventListener("load", function() {
	var img = document.getElementsByTagName("img")[0],
		alpha;
	
	try {
		alpha = AlphaPicker(img);
	}
	catch(e) {
		console.log(e.name + ":" + e.message);
		return;
	}
	
	alpha.mousemove(function(e) {
		if(e.alpha) {
			this.className = "hover";
		} else {
			this.className = "";
		}
	}).mouseout(function(e) {
		this.className = "";
	}).click(function(e) {
		if(e.alpha) {
			/* RGB値変換(下記参照) imageDataを書き変えます */
			/* 自己オブジェクトは、イベントオブジェクトのalphapickerプロパティで参照できます */
			processing(e.alphaPicker.imageData);
			/* canvasのcontextに書き変わったimageDataを渡します */
			e.alphaPicker.context.putImageData(e.alphaPicker.imageData, 0, 0);
			/* 書き換えられたcanvasからData URI schemeを受け取り、imgのsrcにセット */
			this.src = e.alphaPicker.context.canvas.toDataURL();
		}
	}).load(function(e) {
		/* 画像が変更された場合、Alphapickerの設定をリセットします */
		this.className = "";
		e.alphaPicker.reset();
	});
	
	/* RGB値変換関数 */
	function processing(imagedata) {
		for(var i = 0, l = imagedata.data.length; i < l; i += 4) {
			/* ピクセルのRGBA値をそれぞれ取得 */
			var r = imagedata.data[i],
				g = imagedata.data[i+1],
				b = imagedata.data[i+2],
				a = imagedata.data[i+3];
			
			if(a) {
				/* アルファ値 > 0 のとき */
				/* RGB値を順繰りで入れ替えています */
				imagedata.data[i] = b;
				imagedata.data[i+1] = r;
				imagedata.data[i+2] = g;
			}
		}
	}
}, false);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console