canvas圆形裁切

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <title>圆形裁剪</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        padding: 20px;
      }
      img {
        width: 500px;
      }
      img,
      canvas {
        outline: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <img src="./test.jpg" class="origin" alt="" />
    <button type="button" class="btn-crop">圆形裁剪</button>
    <img class="clip" alt="" />
 
    <script>
      const origin = document.querySelector('.origin');
      const btnCrop = document.querySelector('.btn-crop');
      const clip = document.querySelector('.clip');
 
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      const width = origin.offsetWidth;
      const height = origin.offsetHeight;
      canvas.width = width * devicePixelRatio;
      canvas.height = width * devicePixelRatio;
      canvas.style.width = `${100}px`;
      canvas.style.height = `${100}px`;
      clip.style.width = `${100}px`;
      clip.style.height = `${100}px`;
 
      const scalex = origin.naturalWidth / width;
      const scaley = origin.naturalHeight / height;
 
      context.drawImage(origin, 0, 0, width, height);
 
      context.beginPath();
      context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI);
      context.clearRect(0, 0, width, height);
      context.clip();
 
      let mask = null;
      origin.addEventListener('mouseenter', () => {
        mask = document.createElement('div');
        const { left, top } = origin.getBoundingClientRect();
        mask.style.cssText = `
          position: fixed;
          top: 0;
          left: 0;
          width: ${canvas.offsetWidth}px;
          height: ${canvas.offsetHeight}px;
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.5);
          translate:${left}px ${top}px;
          will-change: translate;
          z-index: 999;
          pointer-events: none;
        `;
        document.body.append(mask);
      });
      origin.addEventListener('mouseleave', () => {
        if (mask) {
          document.body.removeChild(mask);
        }
      })
 
      window.onmousemove = (e) => {
 
        let x = e.clientX - origin.offsetLeft - canvas.offsetWidth / 2;
        let y = e.clientY - origin.offsetTop - canvas.offsetHeight / 2;
 
        x = Math.max(x, 0);
        y = Math.max(y, 0);
        x = Math.min(x, origin.offsetWidth - origin.offsetLeft - canvas.offsetWidth / 2);
        y = Math.min(y, origin.offsetHeight - origin.offsetTop - canvas.offsetHeight / 2);
 
        if (mask) {
 
          mask.style.translate = `${e.clientX - canvas.offsetWidth / 2}px ${
            e.clientY - canvas.offsetHeight / 2
          }px`;
        }
 
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(
          origin,
          x * scalex,
          y * scaley,
          canvas.offsetWidth * scalex,
          canvas.offsetHeight * scaley,
          0,
          0,
          canvas.offsetWidth * scalex * devicePixelRatio,
          canvas.offsetHeight * scaley * devicePixelRatio
        );
      };
 
      origin.addEventListener('click', () => {
        // clip.src = canvas.toDataURL();
        canvas.toBlob(
          (blob) => {
            const url = URL.createObjectURL(blob);
            clip.src = url;
            // open(url);
            // URL.revokeObjectURL(url);
          },
          'image/jpeg',
          1
        );
      });
 
      document.body.append(canvas);
    </script>
  </body>
</html>

posted @ 2024-04-28 16:21 _clai 阅读(48) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· js+canvas图片裁剪

· canvas 压缩图片

· JavaScript中的文件

· 使用 HTML5 Canvas 实现用户自定义裁剪图片

· 使用 HTML5 Canvas 实现圆形图片裁剪并上传

公告

昵称： _clai
园龄： 4年11个月
粉丝： 0
关注： 7

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. uniapp 文件管理器(文件选择)(4)

_clai

canvas圆形裁切

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
	<title>圆形裁剪</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	body {
	padding: 20px;
	}
	img {
	width: 500px;
	}
	img,
	canvas {
	outline: 1px solid #999;
	}
	</style>
	</head>
	<body>
	<img src="./test.jpg" class="origin" alt="" />
	<button type="button" class="btn-crop">圆形裁剪</button>
	<img class="clip" alt="" />

	<script>
	const origin = document.querySelector('.origin');
	const btnCrop = document.querySelector('.btn-crop');
	const clip = document.querySelector('.clip');

	const canvas = document.createElement('canvas');
	const context = canvas.getContext('2d');
	const width = origin.offsetWidth;
	const height = origin.offsetHeight;
	canvas.width = width * devicePixelRatio;
	canvas.height = width * devicePixelRatio;
	canvas.style.width = `${100}px`;
	canvas.style.height = `${100}px`;
	clip.style.width = `${100}px`;
	clip.style.height = `${100}px`;

	const scalex = origin.naturalWidth / width;
	const scaley = origin.naturalHeight / height;

	context.drawImage(origin, 0, 0, width, height);

	context.beginPath();
	context.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI);
	context.clearRect(0, 0, width, height);
	context.clip();

	let mask = null;
	origin.addEventListener('mouseenter', () => {
	mask = document.createElement('div');
	const { left, top } = origin.getBoundingClientRect();
	mask.style.cssText = `
	position: fixed;
	top: 0;
	left: 0;
	width: ${canvas.offsetWidth}px;
	height: ${canvas.offsetHeight}px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	translate:${left}px ${top}px;
	will-change: translate;
	z-index: 999;
	pointer-events: none;
	`;
	document.body.append(mask);
	});
	origin.addEventListener('mouseleave', () => {
	if (mask) {
	document.body.removeChild(mask);
	}
	})

	window.onmousemove = (e) => {

	let x = e.clientX - origin.offsetLeft - canvas.offsetWidth / 2;
	let y = e.clientY - origin.offsetTop - canvas.offsetHeight / 2;

	x = Math.max(x, 0);
	y = Math.max(y, 0);
	x = Math.min(x, origin.offsetWidth - origin.offsetLeft - canvas.offsetWidth / 2);
	y = Math.min(y, origin.offsetHeight - origin.offsetTop - canvas.offsetHeight / 2);

	if (mask) {

	mask.style.translate = `${e.clientX - canvas.offsetWidth / 2}px ${
	e.clientY - canvas.offsetHeight / 2
	}px`;
	}

	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(
	origin,
	x * scalex,
	y * scaley,
	canvas.offsetWidth * scalex,
	canvas.offsetHeight * scaley,
	0,
	0,
	canvas.offsetWidth * scalex * devicePixelRatio,
	canvas.offsetHeight * scaley * devicePixelRatio
	);
	};

	origin.addEventListener('click', () => {
	// clip.src = canvas.toDataURL();
	canvas.toBlob(
	(blob) => {
	const url = URL.createObjectURL(blob);
	clip.src = url;
	// open(url);
	// URL.revokeObjectURL(url);
	},
	'image/jpeg',
	1
	);
	});

	document.body.append(canvas);
	</script>
	</body>
	</html>