no message

haoss · Jun 24, 2015 · 67488eb · 67488eb
1 parent 13339ba
commit 67488eb
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 0 deletions.
diff --git a/img.png b/img.png
diff --git a/index.html b/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Border-radius inset for images</title>
+
+    <style>
+		body { padding-top: 40px; background:url(stripe.png) center top repeat; text-align:center;}
+		.block { padding:20px; text-align:center;}
+		canvas { max-width:100%;}
+		p { padding:0; margin:0; line-height:24px; color:#fff; background:#00719e;}
+    </style>
+
+</head>
+
+<body>
+
+	<p>minimum/default</p>
+	<div class="block block-1">
+		<img src="img.png"/>
+	</div>
+
+	<p>radius: [30], width: 10, color: "#00719e"</p>
+	<div class="block block-2">
+		<img src="img.png"/>
+	</div>
+
+	<p>radius: [30,60], width: 10, color: "#00719e"</p>
+	<div class="block block-3">
+		<img src="img.png"/>
+	</div>
+
+	<p>radius: [30,60,25], width: 10, color: "#00719e"</p>
+	<div class="block block-4">
+		<img src="img.png"/>
+	</div>
+
+	<p>radius: [30,60,0,20], width: 10, color: "#00719e"</p>
+	<div class="block block-5">
+		<img src="img.png"/>
+	</div>
+
+    <script src="jquery-2.1.4.min.js"></script>
+	<script src="jquery.borderradiusinset.min.js"></script>
+
+	<script type="text/javascript">
+		$(window).load(function(){
+
+			$(".block-1 img").borderRadiusInset();
+
+			$(".block-2 img").borderRadiusInset({
+				radius: [30],
+				width: 10,
+				color: "#00719e"
+			});
+
+			$(".block-3 img").borderRadiusInset({
+				radius: [30,60],
+				width: 10,
+				color: "#00719e"
+			});
+
+			$(".block-4 img").borderRadiusInset({
+				radius: [30,60,25],
+				width: 10,
+				color: "#00719e"
+			});
+
+			$(".block-5 img").borderRadiusInset({
+				radius: [30,60,0,20],
+				width: 10,
+				color: "#00719e"
+			});
+
+		});
+	</script>
+
+</body>
+</html>
diff --git a/jquery-2.1.4.min.js b/jquery-2.1.4.min.js
diff --git a/jquery.borderradiusinset.js b/jquery.borderradiusinset.js
@@ -0,0 +1,98 @@
+/*
+ * Border-radius Inset for images
+ * https://github.com/tegArt/border-radius-inset
+ * 
+ * Copyright (c) 2013 Dmitry tegArt Sazonov
+ * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
+ */
+
+(function($){
+
+	$.fn.borderRadiusInset = function(options){
+
+		var options = $.extend({
+			radius: [20],
+			width: 0,
+			color: "#000"
+		}, options);
+
+		return this.each(function() {
+
+			var radiusTopLeft, radiusTopRight, radiusBottomRight, radiusBottomleft;
+
+			// One, two, three and four values in 'radius' option (like css border-radius)
+			switch (options.radius.length) {
+				case 1:
+					radiusTopLeft = radiusTopRight = radiusBottomRight = radiusBottomleft = Math.abs(options.radius[0]);
+					break;
+				case 2:
+					radiusTopLeft = radiusBottomRight = Math.abs(options.radius[0]);
+					radiusTopRight = radiusBottomleft = Math.abs(options.radius[1]);
+					break;
+				case 3:
+					radiusTopLeft = Math.abs(options.radius[0]);
+					radiusTopRight = radiusBottomleft = Math.abs(options.radius[1]);
+					radiusBottomRight = Math.abs(options.radius[2]);
+					break;
+				default:
+					radiusTopLeft = Math.abs(options.radius[0]);
+					radiusTopRight = Math.abs(options.radius[1]);
+					radiusBottomRight = Math.abs(options.radius[2]);
+					radiusBottomleft = Math.abs(options.radius[3]);
+			}
+
+			var imageWidth = $(this).width();
+			var imageHeight = $(this).height();
+
+			var canvas = document.createElement("canvas");
+			canvas.width = imageWidth;
+			canvas.height = imageHeight;
+
+			var ctx = canvas.getContext("2d");
+			$(this).before(canvas);
+			$(this).css("display","none");
+
+			var img = new Image();
+			img.src = $(this).attr("src");
+
+			img.onload = function () {
+
+				ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
+
+				// border-width
+				if (options.width > 0) {
+
+					ctx.globalCompositeOperation = 'source-over';
+					ctx.beginPath();
+					ctx.rect(0,0,imageWidth,imageHeight);
+					ctx.arc(0, 0, radiusTopLeft, 0, 2*Math.PI, true);
+					ctx.moveTo(imageWidth, 0);
+					ctx.arc(imageWidth, 0, radiusTopRight, 0, 2*Math.PI, true);
+					ctx.moveTo(imageWidth, imageHeight);
+					ctx.arc(imageWidth, imageHeight, radiusBottomRight, 0, 2*Math.PI, true);
+					ctx.moveTo(0, imageHeight);
+					ctx.arc(0, imageHeight, radiusBottomleft, 0, 2*Math.PI, true);
+					ctx.strokeStyle = options.color;
+					ctx.lineWidth = options.width*2;
+					ctx.stroke();
+
+				}
+
+				// transparency mask
+				ctx.globalCompositeOperation = 'destination-out';
+				ctx.beginPath();
+				ctx.arc(0, 0, radiusTopLeft, 0, 2*Math.PI, true);
+				ctx.moveTo(imageWidth, 0);
+				ctx.arc(imageWidth, 0, radiusTopRight, 0, 2*Math.PI, true);
+				ctx.moveTo(imageWidth, imageHeight);
+				ctx.arc(imageWidth, imageHeight, radiusBottomRight, 0, 2*Math.PI, true);
+				ctx.moveTo(0, imageHeight);
+				ctx.arc(0, imageHeight, radiusBottomleft, 0, 2*Math.PI, true);
+				ctx.fill();
+
+			}
+
+		});
+	};
+
+})(jQuery);
diff --git a/jquery.borderradiusinset.min.js b/jquery.borderradiusinset.min.js
diff --git a/stripe.png b/stripe.png