canvas切割原图为九宫格图片

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

coder_yihua

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

阅读量471

点赞数 1

分类专栏：自定义组件 canvas 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45737062/article/details/128011326

版权

自定义组件同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

originUrl 图片原地址
cWidth 生成图片的宽度
cHeight 生成图片的高度
top 第一条切割线距离原图片顶部的距离
bottom 第二条切割线距离原图片底部的距离
left 第三条切割线距离原图片左侧的距离
right 第四条切割线距离原图片右侧的距离

切割

在这里插入图片描述

效果图

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>原图片</div>
    <img src="./img/3.png" />
    <div>切割后图片</div>
    <img class="myImg" />
    <script type="module">
        import './index.js'
    </script>
</body>
</html>

index.js

import drawImage from "./squared.js";

const myImg = document.querySelector(".myImg");
drawImage("/img/3.png", 1000, 100, 10, 10, 10, 10).then((res) => {
  myImg.src = res;
});
export {};

squared.js

const handleImg = (ctx, w, h, img, cw, ch, top, bottom, right, left) => {
  // 第一块;
  ctx.drawImage(img, 0, 0, left, top, 0, 0, left, top);
  // 第二块
  ctx.drawImage(
    img,
    left,
    0,
    w - right - left,
    top,
    left,
    0,
    cw - right - left,
    top
  );
  // 第三块
  ctx.drawImage(img, w - right, 0, right, top, cw - right, 0, right, top);
  // 第四块;
  ctx.drawImage(
    img,
    0,
    top,
    left,
    h - top - bottom,
    0,
    top,
    left,
    ch - bottom - top
  );
  // 第五块
  ctx.drawImage(
    img,
    left,
    top,
    w - right - left,
    h - top - bottom,
    left,
    top,
    cw - left - right,
    ch - top - bottom
  );
  // 第六块
  ctx.drawImage(
    img,
    w - right,
    top,
    right,
    h - top - bottom,
    cw - right,
    top,
    right,
    ch - top - bottom
  );
  // 第七块
  ctx.drawImage(img, 0, h - bottom, left, bottom, 0, ch - bottom, left, bottom);
  // 第八块
  ctx.drawImage(
    img,
    left,
    h - bottom,
    w - right - left,
    bottom,
    left,
    ch - bottom,
    cw - left - right,
    bottom
  );
  // 第九块
  ctx.drawImage(
    img,
    w - right,
    h - bottom,
    right,
    bottom,
    cw - right,
    ch - bottom,
    right,
    bottom
  );
};

/**
 * 九宫格图片
 * @param {string} originUrl 图片原地址
 * @param {number} cWidth 生成图片的宽度
 * @param {number} cHeight 生成图片的高度
 * @param {number} top 第一条切割线距离原图片顶部的距离
 * @param {number} bottom 第二条切割线距离原图片底部的距离
 * @param {number} left 第三条切割线距离原图片左侧的距离
 * @param {number} right 第四条切割线距离原图片右侧的距离
 * @returns
 */
const drawImage = (originUrl, cWidth, cHeight, top, bottom, left, right) =>
  new Promise((reslove, reject) => {
    const DOM = document.createElement("canvas");
    DOM.width = cWidth;
    DOM.height = cHeight;
    const ctx = DOM.getContext("2d");
    const img = document.createElement("img");
    img.src = originUrl;
    img.onload = () => {
      handleImg(
        ctx,
        img.naturalWidth,
        img.naturalHeight,
        img,
        cWidth,
        cHeight,
        top,
        bottom,
        right,
        left
      );
      reslove(DOM.toDataURL("image/png"));
    };
    img.onerror = (err) => reject(err);
  });

export default drawImage;