js实现个性产品的定制并截图（DIY）

矫情吗；* 2022-01-06 01:17 192阅读 0赞

最近做的一个项目里面有一个定制的需求。大致是需要从自己的设计图纸上将所有的设计图标加入产品然后截图查看截图后的自定义设计。

因为需要截图，我首先想到的就是用canvas，由于本人对canvas了解不是太深，所以实现这个需求我只是用了canvas的toDataURL（还是太菜惹的祸啊 ~~呜呜呜）。我选择了先用js将定制的需求功能实现，记录下所有的图片以及图片的位置。然后再将图片划入画布。话不多说直接上代码

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<title>Document</title>
    		<style>
    			html,body{
    			margin: 0;
    			padding: 0;
    		}
    		#bigBox{
    			width: 100%;
    		}
         .box,#box, #box_1,#box_2, #box_3,#box_4, #box_5{
              width: 100px;
              height: 100px;
              position: absolute;
          }
          #father {
    		  width: 45%;
    			min-width: 400px;
    			height: 300px;
    			border: 1px solid #c3c3c3;
    			position: relative;
    			float: left;
          }
    		  img {
    			width: 100%;
    			height: 100%;
    			cursor: move;
    		  }
    		  .scale,
    		  #scale,
    		  #scale1{ 
    			width: 10px; 
    			height: 10px; 
    			overflow: hidden; 
    			cursor: se-resize; 
    			position: absolute; 
    			right: 50px; 
    			bottom: 50px; 
    			background-color: rgb(122, 191, 238); 
    			display: none;
    		  }
    			#classImg{
    				width: 15%;
    				min-width: 100px;
    				float: left;
    			}
    			ul{
    				min-height: 200px;
    			}
    			li{
    				margin-top: 2px;
    				width: 50px;
    				height: 50px;
    				list-style: none;
    			}
    			li img{
    				width: 50px;
    			}
      </style>
    	</head>
    	<body>
    		<div id="bigBox">
                
    			<div id="father"></div>
                
    			<div id="classImg">
    				<ul>
    					<li class="small_img" onclick="bindOwn(this,1)">
    						<img src="image/standardBg12.png" alt="">
    					</li>
    					<li class="small_img" onclick="bindOwn(this,2)">
    						<img src="image/standardBg13.png" alt="">
    					</li>
    					<li class="small_img" onclick="bindOwn(this,3)">
    						<img src="image/standardBg14.png" alt="">
    					</li>
    					<li class="small_img" onclick="bindOwn(this,4)">
    						<img src="image/standardBg5.png" alt="">
    					</li>
    					<li class="small_img" onclick="bindOwn(this,5)">
    						<img src="image/standardBg6.png" alt="">
    					</li>
    					<li class="small_img" onclick="bindOwn(this,6)">
    						<img src="image/standardBg9.png" alt="">
    					</li>
    				</ul>
    			</div>
    			
    
    		</div>
    		<div onclick="getWith()">保存为图片</div>
    		<script type="text/javascript">
    			  var fa = document.getElementById('father');
    			  var imgData=[]
    			  var img
    			// 图片点击
    			function bindOwn(a, b) {
    				img = new Image();
    				img.src = a.children[0].src
    				let as = a.children[0].width + "px"
    				img.style.width = "50px"
    				img.style.height = "50px"
    				img.style.marginLeft = "100px"
    				img.style.marginTop = "100px"
    				imgData.push(img)
    				if (imgData.length == 1) {
    					createBox(imgData[0])
    				} else {
    					createBoxFx()
    				}
    			}
    
    			function createBox(im) {
    				let innerDiv = "<div id='box' onclick='ownclick(this)'><img src='" + im.src +
    					"'style='width:50px;height:50px;margin-Left:0px;margin-top:0px'/><div id='scale'></div></div>"
    				fa.innerHTML = innerDiv
    			}
    
    			function createBoxFx() {
    				let innerDiv
    
    				imgData.forEach((i, index) => {
    					if (index == 0) {
    						innerDiv = "<div class='box' onclick='ownclick(this)'><img src='" +
    							i.src + "'style='width:50px;height:50px;margin-left: 0px;margin-top:0px' /><div class='scale'></div></div>"
    					} else {
    						innerDiv += "<div class='box' onclick='ownclick(this)'><img src='" + i.src +
    							"'style='width:50px;height:50px;margin-left:0px;margin-top:0px' /><div class='scale'></div></div>"
    					}
    				})
    				fa.innerHTML = innerDiv
    			}
    			var ac
    			// 图片移动
    			function ownclick(a) {
    				let ac = a
    				let scal = a.children[1]
    				ac.onmousedown = function(ev) {
    					var oEvent = ev;
    					// 阻止浏览器一些图片的默认事件
    					oEvent.preventDefault();
    					var disX = oEvent.clientX - ac.offsetLeft;
    					var disY = oEvent.clientY - ac.offsetTop;
    					fa.onmousemove = function(ev) {
    						oEvent = ev;
    						oEvent.preventDefault();
    						var x = oEvent.clientX - disX;
    						var y = oEvent.clientY - disY;
    
    						// 图形移动的边界判断
    						x = x <= 0 ? 0 : x;
    						x = x >= fa.offsetWidth - ac.offsetWidth ? fa.offsetWidth - ac.offsetWidth : x;
    						y = y <= 0 ? 0 : y;
    						y = y >= fa.offsetHeight - ac.offsetHeight ? fa.offsetHeight - ac.offsetHeight : y;
    						ac.style.marginLeft = x + 'px';
    						ac.style.marginTop = y + 'px';
    					}
    					fa.onmouseleave = function() {
    						fa.onmousemove = null;
    						fa.onmouseup = null;
    					}
    					// 鼠标弹起后停止移动
    					fa.onmouseup = function() {
    						fa.onmousemove = null;
    						fa.onmouseup = null;
    					}
    				}
    			}
    
    			function getWith() { //获取图片在画布上的位置
    				let allData = fa.children
    				let arr = []
    				let len = fa.children.length
    				for (var i = 0; i < len; i++) {
    					let obj = {
    						src: "",
    						width: 0,
    						height: 0,
    					}
    					obj.src = allData[i].children[0].src
    					obj.width = allData[i].style.marginLeft
    					obj.height = allData[i].style.marginTop
    					arr.push(obj)
    				}
    				//创建一个新的canvas
    				var canvas2 = document.createElement("canvas");
    				var context = canvas2.getContext("2d");
    				arr.forEach((i) => {
    					let newOwnImg = new Image();
    					newOwnImg.src = i.src
    					drawImg(newOwnImg, i.width, i.height, context);
    				})
    				convertCanvasToImage(canvas2)
    			}
    
    			function drawImg(a, b, c, d) { //画图
    				// a.setAttribute("crossOrigin",'Anonymous')
    				b = b.slice(0, b.length - 2)
    				c = c.slice(0, c.length - 2)
    				d.drawImage(a, b, c, 50, 50);
    				d.stroke();
    
    			}
    
    			function convertCanvasToImage(canvas) {//转成image
    				var image = new Image();
    				image.src = canvas.toDataURL("image/png");
    			}
    		</script>
    	</body>
    </html>

当然了，还是可能会出现一些小BUG，仓促之间做的功能，还需要多多优化，希望各位大佬多多指正。