jquery svg图像生成器插件上传图片生成svg格式图片下载



91 361 121



特效描述:jquerysvg 图像生成器插件 上传图片 生成svg格式 图片下载,svg图像生成器插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="style.css" type="text/css" />

2. 引入JS

<script src="d3.min.js"></script>
<script src="jquery.min.js"></script>
<script src="triangloid.js"></script>

3. HTML代码

<div class="container">
	<div class="options">
		<h1>Triangloid</h1>
		<h2>选项</h2>
		<label for="cell-size-input">尺寸:</label>
		<input value="30" id="cell-size-input" />
		<div class="bottom-align">
			<div class="btn-container">
				<div class="btn trianglify-btn">生成图像</div>
				<div class="btn download-btn">下载svg图像格式</div>
			</div>
		</div>
	</div><div class="main"> 
	<label for="imageInput">
		<div id="drop-zone" class="hover">&nbsp;
			<div class="drop-label">拖动图片或点击这里上传</div>
		</div>
	</label>
	</div>
</div>
<input type="file" id="imageInput" />
<script>
var cellsize =30;
var image, imageHeight, imageWidth, backgroundSize, svg;
function getImagePixelData(img) {
	var canvas = document.createElement("canvas");
	canvas.width = img.width;
	canvas.height = img.height;
	var ctx = canvas.getContext("2d");
	ctx.drawImage(img, 0, 0);
	var imageData = ctx.getImageData(0, 0, img.width, img.height);
	var mappedData = [];
	for (var i = 0; i < imageData.data.length; i += 4) {
		mappedData.push([imageData.data[i], imageData.data[i + 1], imageData.data[i + 2]]);
	}
	return mappedData;
}
var dropZone = document.getElementById('drop-zone');
dropZone.ondragover = function() {
	this.className = 'hover';
	return false;
};
dropZone.ondragleave = function() {
	dropZone.className = "";
}
dropZone.ondragend = function() {
	dropZone.className = "";
	return false;
};
dropZone.ondrop = processInput;
document.getElementById("imageInput").onchange = processInput;
$("#cell-size-input").keyup(function() {
	cellsize = parseInt($(this).val());
});
$(".trianglify-btn").click(function() {
	draw(image);
	$(".download-btn").addClass("visible");
});
$(".download-btn").click(function() {
	document.location.href = svg.replace("image/svg+xml", "image/octet-stream");
});
function processInput(e) {
	dropZone.className = "";
	e.preventDefault();
	if (e.target.files) {
		var file = e.target.files[0];
	} else {
		var file = e.dataTransfer.files[0];
	}
	var reader = new FileReader();
	reader.onload = function(event) {
		image = new Image();
		image.onload = function() {
			var dropZoneWidth = $(dropZone).width();
			var dropZoneHeight = $(dropZone).height();
			var dropZoneRatio = dropZoneWidth / dropZoneHeight;
			var imageRatio = image.width / image.height;
			backgroundSize = "";
			if (image.width > dropZoneWidth) { //Could be expressed in smaller chunks...
				if (image.height > dropZoneHeight) {
					if (imageRatio > dropZoneRatio) {
						backgroundSize += dropZoneWidth + "px";
						backgroundSize += " ";
						backgroundSize += dropZoneWidth / imageRatio + "px";
					} else {
						backgroundSize += dropZoneHeight * imageRatio + "px";
						backgroundSize += " ";
						backgroundSize += dropZoneHeight + "px";
					}
				} else {
					backgroundSize += dropZoneWidth + "px";
					backgroundSize += " ";
					backgroundSize += dropZoneWidth / imageRatio + "px";
				}
			} else if (image.height > dropZoneHeight) {
				backgroundSize += dropZoneHeight * imageRatio + "px";
				backgroundSize += " ";
				backgroundSize += dropZoneHeight + "px";
			} else {
				backgroundSize = image.width + "px " + image.height + "px";
			}
			dropZone.style.background = 'url(' + imageData + ') no-repeat center';
			dropZone.style.backgroundSize = backgroundSize;
			console.log(dropZone.style.backgroundSize);
			$(".trianglify-btn").addClass("visible");
			$(".download-btn").removeClass("visible");
		}
		image.src = imageData = event.target.result;
	};
	reader.readAsDataURL(file);
	return false;
}
function draw(img) {
	var imageData = getImagePixelData(img);
	var triangloid = new Triangloid({
		cellsize: cellsize
	});
	var trianglifiedImage = triangloid.trianglifyImage(imageData, img.width, img.height);
	svg = trianglifiedImage.getSVG();
	dropZone.style.background = 'url(' + svg + ') no-repeat center';
	dropZone.style.backgroundSize = backgroundSize;
}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 切换按钮 表单 表单美化 表单插件 表单美化插件 图片拖动 图片拖拽 头像上传 图片上传 文本框 text文本框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到