最近做的一个项目里面有一个定制的需求。大致是需要从自己的设计图纸上将所有的设计图标加入产品然后截图查看截图后的自定义设计。
因为需要截图，我首先想到的就是用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>
<!-- <canvas id="ownCanvas" width="400px" height="300" style="border: 1px solid #c3c3c3;"></canvas> -->
</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，仓促之间做的功能，还需要多多优化，希望各位大佬多多指正。
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
