jquery将图片变成九宫格拼图任意宫格拼图效果代码-html代码-BFW代码库

jquery将图片变成九宫格拼图任意宫格拼图效果代码

代码语言：html

代码描述：jquery将图片变成九宫格拼图任意宫格拼图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script>
    $(function() {
	const c1 = 21
	//首先给选择的内容填充下拉框
	for (var i = 3; i <= c1; i++) {
		$("<option value='" + i + "'>" + i + "</option>").appendTo($("#n1,#n2"));
	}
	//选择了正确的图片之后，将其存入缓存之中，并且反映出效果
	var imgurl = "//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png"; //这里存图片的base64格式的地址
	$("#img").change(function() {
		//然后假如这条数据有效，那么久进入替换背景图和拼图原图，并且在此期间禁止操作
		var file = $(this)[0].files[0];
		if (file) {
			$("#fimg").text(file.name);
			var reader = new FileReader();
			new Promise((resolve, reject) => {
				reader.readAsDataURL(file);
				reader.onload = function(res) {
					resolve(res);
				}
			}).then(res => {
				imgurl = res.target.result;
				drawbg();
			})
		}
	})
	//点击生成拼图的大概流程
	//生成乱序表，然后渲染正确的图块，帮上正确的方向事件
	var x = 3;
	var y = 3;
	$("#btn").click(function() {
		x = parseInt($("#n1").val());
		y = parseInt($("#n2").val());
		drawgame();
	})

	function drawgame() {
		dr.........完整代码请登录后点击上方下载按钮下载查看