1

src/views/group/picLibrary/demo/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <el-card class="box-card">
+    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
+      <canvas ref="canvas" width="500" height="500" style="border: 1px solid #ccc"></canvas>
+    </div>
+  </el-card>
+</template>
+
+<script setup>
+// import { ElMessage, ElMessageBox } from "element-plus";
+
+// const { proxy } = getCurrentInstance();
+const imgs = [
+  { name: "p1", url: "/img/miao.png" },
+  { name: "p2", url: "/img/miao2.png" },
+  { name: "p3", url: "/img/miao3.png" },
+];
+const canvas = ref(null);
+const ctx = ref("");
+const width = ref(500);
+const height = ref(500);
+/** 图片数据 名字 位置等 */
+const imagesData = ref([]);
+/** 选择的颜色 */
+const selectColor = ref("");
+const getColor = (e) => {
+  // 获取当前颜色
+  let pixel = ctx.value.getImageData(e.pageX - canvas.value.offsetLeft, e.pageY - canvas.value.offsetTop, 1, 1);
+  let data = pixel.data;
+  const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
+  selectColor.value = rgba;
+};
+/** 图片拖拽 */
+const init = () => {
+  ctx.value = canvas.value.getContext("2d");
+
+  canvas.value?.addEventListener("mousemove", getColor, false);
+  /** 当前点击的信息 */
+  let clickCoordinate = { x: 0, y: 0 };
+  let target = ref('');
+
+  imgs.forEach((item) => {
+    let img = new Image();
+    img.src = item.url;
+    const name = item.name;
+    img.onload = function () {
+      const w = 100;
+      const h = (w / img.width) * img.height;
+      const x = Math.random() * (width.value - w);
+      const y = Math.random() * (height.value - h);
+      const obj = { img, name, x, y, w, h };
+      console.log(imagesData.value);
+      imagesData.value.push(obj);
+      drawByObj(obj);
+    };
+  });
+  function drawByObj(obj) {
+    ctx.value.drawImage(obj.img, obj.x, obj.y, obj.w, obj.h);
+  }
+  function drawGuideByObj(obj) {
+    ctx.value.beginPath();
+    ctx.value.lineWidth = 4;
+    ctx.value.strokeStyle = "green";
+    ctx.value.rect(obj.x, obj.y, obj.w, obj.h);
+    ctx.value.stroke();
+  }
+
+  canvas.value.addEventListener("mousedown", mousedownFn, false);
+  function mousedownFn(e) {
+    clickCoordinate.x = e.pageX - canvas.value.offsetLeft;
+    clickCoordinate.y = e.pageY - canvas.value.offsetTop;
+    console.log("初次点击位置：" + clickCoordinate.x + "--" + clickCoordinate.y);
+    checkElement();
+    if (target.value == undefined) return;
+    canvas.value.addEventListener("mousemove", mousemoveFn, false);
+    canvas.value.addEventListener("mouseup", mouseupFn, false);
+    canvas.value.removeEventListener("mousemove", getColor);
+    selectColor.value = "";
+  }
+  /** 判断点击的是哪个 */
+  function checkElement() {
+    imagesData.value.forEach((item, index) => {
+      drawGuideByObj(item);
+      if (ctx.value.isPointInPath(clickCoordinate.x, clickCoordinate.y)) {
+        // console.log("点击的元素是：", item.name);
+        target.value = index;
+      }
+    });
+  }
+  function mousemoveFn(e) {
+    console.log(imagesData.value,target.value,'222');
+    // 计算点击位置和图片原点位置的差
+    let sx = clickCoordinate.x - imagesData.value[target.value].x;
+    let sy = clickCoordinate.y - imagesData.value[target.value].y;
+    // 计算移动元素的坐标
+    imagesData.value[target.value].x = e.pageX - canvas.value.offsetLeft - sx;
+    imagesData.value[target.value].y = e.pageY - canvas.value.offsetTop - sy;
+    console.log(imagesData.value[target.value],'222');
+
+    // 重新赋值点击位置
+    clickCoordinate.x = e.pageX - canvas.value.offsetLeft;
+    clickCoordinate.y = e.pageY - canvas.value.offsetTop;
+    // 清空画布
+    ctx.value.clearRect(0, 0, width.value, height.value);
+    // 清空画布以后重新绘制
+    imagesData.value.forEach((i) => drawByObj(i));
+  }
+  function mouseupFn(e) {
+    console.log(e.pageX + "----" + e.pageY,'111');
+    // 鼠标抬起以后移除事件
+    canvas.value.removeEventListener("mousemove", mousemoveFn, false);
+    canvas.value.removeEventListener("mouseup", mouseupFn, false);
+    
+    target.value = undefined;
+
+    canvas.value.addEventListener("mousemove", getColor, false);
+  }
+};
+const imgOnPage = (ref < HTMLImageElement) | (null > null);
+// const save = () => {
+//   // 将canvas转换成base64的url
+//   let url = canvas.value.toDataURL("image/png");
+//   // console.log(url);
+
+//   // 把Canvas 转化为图片
+//   imgOnPage.value.src = url;
+
+//   // 将base64转换为文件对象
+//   let arr = url.split(",");
+//   let mime = arr[0].match(/:(.*?);/)![1];
+//   // console.log(arr);
+//   // console.log(mime);
+//   // console.log(arr);
+
+//   let binaryString = window.atob(arr[1]);
+//   let binaryLen = binaryString.length;
+//   let bytes = new Uint8Array(binaryLen);
+//   for (let i = 0; i < bytes.length; i++) {
+//     bytes[i] = binaryString.charCodeAt(i);
+//   }
+//   console.log(bytes);
+//   // saveByteArray(bytes);
+//   let file = new File([bytes], "filename", { type: mime });
+//   // 虚拟点击
+//   const link = document.createElement("a");
+//   link.download = file.name;
+//   let href = URL.createObjectURL(file);
+//   link.href = href;
+//   document.body.appendChild(link);
+//   link.click();
+//   document.body.removeChild(link);
+//   URL.revokeObjectURL(href);
+// };
+// const filter1 = () => {
+//   const imgData = ctx.value.getImageData(0, 0, width.value, height.value);
+//   const data = imgData.data;
+//   for (let i = 0; i < data.length; i += 4) {
+//     let avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+//     data[i] = avg; // red
+//     data[i + 1] = avg; // green
+//     data[i + 2] = avg; // blue
+//   }
+//   ctx.value.putImageData(imgData, 0, 0);
+// };
+// const filter2 = () => {
+//   const imgData = ctx.value.getImageData(0, 0, width.value, height.value);
+//   const data = imgData.data;
+//   for (let i = 0; i < data.length; i += 4) {
+//     data[i] = 255 - data[i]; // red
+//     data[i + 1] = 255 - data[i + 1]; // green
+//     data[i + 2] = 255 - data[i + 2]; // blue
+//   }
+//   ctx.value.putImageData(imgData, 0, 0);
+// };
+// const backToOriginal = () => {
+//   imagesData.value.forEach(obj => ctx.value.drawImage(obj.img, obj.x, obj.y, obj.w, obj.h));
+// };
+
+onMounted(() => {
+  // init1();
+  // init2();
+  init();
+});
+</script>
+
+<style lang="scss" scoped></style>