美文网首页
canvas绘制圆形裁剪图片

canvas绘制圆形裁剪图片

作者: wayne1125 | 来源:发表于2024-02-21 15:57 被阅读0次

1、效果图

裁剪后头像
头像原图

2、实现思路

首先通过arc绘制圆形区域块,再通过drawImage绘制图片,根据图片宽高不同适配剪切不同方向的内容,将图片定位到圆形中心位置

3、实现代码(以下实现头像为例)

<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;background: #e8e8e8" />
<script>
// 获取Canvas元素
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 头像半径
const radius = 50
// 创建Image对象加载图片
const img = new Image();
// 解决资源跨域问题
img.crossOrigin = 'Anonymous';
// 竖向图
img.src =  "https://img.haomeiwen.com/i6793907/67b96e641ab4fc8d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
// 图片加载
img.onload = () => {  
    // 设置canvas尺寸与图像相同,防止拉伸  
    const imageWidth = img.width
    const imageHeight = img.height
    // 头像圆心坐标值
    const roundX = 100 
    const roundY = 120
    // 纵向剪切图片
    let direction = 'column'
    // 图片剪切前适配中心位置的宽高
    let roundImageWidth = 0
    let roundImageHeight = 0
    // 图片剪切X、Y轴偏移量
    let roundImageX = 0
    let roundImageY = 0
    // 横向剪切图片
    if(imageWidth > imageHeight) {
        direction = 'row'
    }
    // 纵向图片计算偏移量
    if(direction === 'column'){
        roundImageWidth = radius * 2
        roundImageHeight = roundImageWidth * imageHeight / imageWidth
        roundImageX = roundX - radius
        roundImageY = roundY - roundImageHeight / 2
    } else{
        // 横向向图片计算偏移量
        roundImageHeight = radius * 2
        roundImageWidth = roundImageHeight * imageWidth / imageHeight
        roundImageY = roundY - radius
        roundImageX = roundX - roundImageWidth / 2
    }
    console.log(img)
    // 清空画布内容
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 开始绘制圆形裁剪区域
    ctx.beginPath();
    ctx.arc(roundX, roundY, radius, 0, 2 * Math.PI);
    ctx.fill()
    ctx.closePath();
    ctx.clip();
    // 将图片绘制到指定位置
    ctx.drawImage(img, roundImageX ,roundImageY , roundImageWidth, roundImageHeight);
    // 转成base64码,抽离单独组件时可以用到
    const screenshot = canvas.toDataURL('image/png',1);
    console.log('screenshot',screenshot); 
};  
</script>

相关文章

  • Quartz2D 绘图

    绘制文字 绘制图片 裁剪圆形图片

  • Quartz 2D绘图 (2)再遇

    图片裁剪 直接裁剪图片 裁剪思路:绘制一个已经裁剪好的圆形的图形上下文将图片绘制上去就可以了 代码 保存到相册和沙...

  • Canvas绘制矩形&圆形&图片

    1.方式一:先设置 rect, 再设置样式2.方式二:先设置样式, 再设置strokeRect,fillRect ...

  • 实现圆形头像功能

    UIImageView绘制圆形图片 实际上是2种方法:1. 把imageview拿来裁剪2. 把image拿来裁剪

  • canvas基础知识总结

    一、Canvas-绘制文字 1、属性 二、canvas-设置阴影 三、canvas-创建路径-绘制矩形和圆形 1、...

  • 移动端添加图片裁剪的坑

    本文关键:阻止冒泡、canvas压缩、canvas裁剪、生成黑色图片。 最近项目需要在添加图片时实现裁剪功能,虽然...

  • 2018-07-24 学习总结

    1.canvas基本图形绘制 (1)直线段 (2).圆形 (3)圆弧 (4).图片 image.png 2.for...

  • Canvas绘制圆形

    使用canvas绘制圆形步骤: 1、在页面中创建canvas的节点(相当于创建一个画板),设置CSS样式。(注意:...

  • 圆形图片裁剪

    一直觉得简书是个充满文学氛围浓厚的平台,后来一些同事和圈友经常问一些技术方面的问题,说我要是把我那本经常用来记录开...

  • 用颜色直接生成image

    附送裁剪圆形图片的方法

网友评论

      本文标题:canvas绘制圆形裁剪图片

      本文链接:https://www.haomeiwen.com/subject/zmoiadtx.html