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

发布时间：2024-12-11 17:22

个性化定制的家居产品，体现了实用生活美学的个性化追求 #生活乐趣# #生活艺术# #生活美学设计# #实用生活美学#

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

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

<!DOCTYPE html>

<head>

<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>

<ul>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

<div onclick="getWith()">保存为图片</div>

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)

}

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) {

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) {

var image = new Image();

image.src = canvas.toDataURL("image/png");

}

</script>

</body>

</html>

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

网址：js实现个性产品的定制并截图（DIY） https://www.yuejiaxmz.com/news/view/445330

上一篇：【PHP在线定制商城网站源码V3

下一篇：在线定制印刷系统源码/定制云印刷

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

相关内容

随便看看

最新动态分享

热点动态分享

专题

推荐动态分享