图片生成box-shadow并下载

最新推荐文章于 2024-10-02 05:39:15 发布

_最初の心

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量226

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_36405210/article/details/141645059

版权

把图片生成由box-shadow拼接成的阴影组成的图片

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片生成阴影html</title>
  </head>
  <body>
    <input id="file" type="file" />
    <button id="btn">制作</button>
    <script src="./index.js"></script>
  </body>
</html>

js

(function () {
  // 获取元素
  const files = document.getElementById('file');
  const btn = document.getElementById('btn');

  // 添加事件
  btn.addEventListener('click', () => {
    const file = files.files[0];
    if (!file) {
      alert('请选择图片');
      return;
    }
    // 创建 FileReader 对象 获取文件信息
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
      // 创建 img 元素
      const img = document.createElement('img');
      img.src = e.target.result;
      // img 加载完成
      img.onload = function () {
        // 创建 canvas 元素
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        // 设置 canvas 宽高
        canvas.width = img.width;
        canvas.height = img.height;
        // 将图片绘制到 canvas 上
        ctx.drawImage(img, 0, 0);
        // 获取图片的像素数据
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        // 获取图片的 box-shadow 值
        const boxShadow = getBoxShadows(imageData);
        // 生成html文件的字符串
        const html = montageHtml(boxShadow);
        // 生成html文件
        downloadHtml(html);
      };
    };
  });

  // 获取图片的 box-shadow 值
  function getBoxShadows(imageData) {
    let boxShadow = '';
    // 遍历像素数据 获取每个像素的 RGBA 值  X Y 坐标
    for (let i = 0; i < imageData.data.length; i += 4) {
      const r = imageData.data[i];
      const g = imageData.data[i + 1];
      const b = imageData.data[i + 2];
      const a = imageData.data[i + 3];
      const x = (i / 4) % canvas.width;
      const y = Math.floor(i / 4 / canvas.width);
      // 拼接box shadow
      if (boxShadow) {
        boxShadow += `,${x}px ${y}px 1px rgba(${r}, ${g}, ${b})`;
      } else {
        boxShadow += `${x}px ${y}px 1px rgba(${r}, ${g}, ${b})`;
      }
    }
    return boxShadow;
  }

  // 生成html文件 并下载
  function downloadHtml(html) {
    const blob = new Blob([html], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'box-shadow.html';
    a.click();
    URL.revokeObjectURL(url);
  }

  function montageHtml(boxShadow) {
    const html = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
            width: 1px;
            height: 1px;
            box-shadow: ${boxShadow};
            }
        </style>
        </head>
        <body>
        <div></div>
        </body>
        </html>
    `;
    return html;
  }
})();