canvas实现炫酷的一键抠图和背景替换

最新推荐文章于 2024-03-30 16:15:16 发布
最新推荐文章于 2024-03-30 16:15:16 发布
阅读量1.6k 收藏 7
点赞数
分类专栏： JavaScript vue 文章标签： html5 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39393899/article/details/119930384
版权

在这里插入图片描述

演示地址
代码仓库

关键技术

canvas api、 element-ui (el-color-picker、el-upload)

原理解析

1. 用户从本地上传一张图片

我们拿到图片数据并在页面渲染出来，这一步用到了elementui的el-upload

el-upload.avatar-uploader(
  ref="logoUpload",
  accept="image/*",
  action="#",
  :auto-upload="false",
  :on-change="handleStatusChange"
)
  el-button(size="small", type="primary") 点击上传

这里实际上不需要真正上传到服务器，只需要获取到图片的在内存中的url

handleStatusChange(file) {
   
  // console.log(file);
  this.originImg = URL.createObjectURL(file.raw);
},

拿到url之后可以先把图片用img标签渲染在页面上，这样做的目的是为了获取图片的实际尺寸，方面我们等比例缩放在我们的canvas上。

// 图片加载完成
    loadImg(e) {
   
      const img = e.target
最低0.47元/天 解锁文章
Not_A_Coder
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
html去除图片背景颜色,canvas实现图片背景色去色变透明 » 张鑫旭-鑫空间-鑫生活...
weixin_39955355的博客
06-08 1471
CSS代码：h4 + canvas {cursor: crosshair;}canvas {background: url(./tt-bg.gif);}HTML代码：左取色图，右效果图取色色值：容差范围：执行去色JS代码：/*** by zhangxinxu(.com)* 更多介绍：http://www.zhangxinxu.com/wordpress/?p=7510* MIT协议，可以任意复制，...
js+html5 canvas实现ps钢笔抠图
10-17
主要介绍了js+html5 canvas实现ps钢笔抠图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
canvas替换图片背景色
weixin_45356397的博客
03-21 1451
canvas替换图片背景色。
vue使用@imgly/background-removal给图片去除背景
最新发布
JQ___的博客
03-30 548
vue实现通过background-removal去除图片背景
文字转canvas
siqi的博客
10-27 191
【代码】文字转canvas。
webgl canvas系列——快速加背景、抠图、加水印并下载图片
热门推荐
编程知识分享，主打前端
03-17 1万+
大家好，我是yma16，本文分享webgl canvas系列——快速抠图、加水印。该系列往期文章web canvas系列——快速入门上手绘制二维空间点、线、面。
【微信小程序5】利用canvas实现纯色背景抠图功能
【安歌er】的博客
06-11 1450
最近，在小程序开发过程中，遇到了需要设置背景透明效果功能的需求。如果借助百度开放接口实现抠图功能是非常方便的，但是一个最大的缺点就是需要money支持。不得已，参考网上各家代码，实现了借助canvas来实现纯色背景抠图功能。1、在wxml文件中，添加canvas标签。3、对canvas上的每个像素进行扫描，把像素是白色背景的透明度设置为透明。1、准备好一张纯色背景的图片（我设置的剔除白色背景的）。好，下面我们来梳理下逻辑，同时完成代码的编写。2、添加一个按钮事件，来实现剔除图片背景颜色。
canvas和图片之间的互相装换
weixin_33801856的博客
12-19 187
canvas和图片之间的互相装换 一、总结 一句话总结：一个是canvas的drawImage方法，一个是canvas的toDataURL方法 canvas drawImage() Image对象 canvas toDataURL() 1、使用JavaScript将图片拷贝进画布 canvas drawImage() 要想将图片放入画布里，我们使用canvas元素的drawIm...
Vue3+Ts+vue-cropper:实现头像图片裁剪
qq_67718812的博客
09-27 1993
本文主要介绍如何基于VUE+TS，通过vue-cropper实现头像图片剪裁的基本功能，包含拖拽效果、放大、缩小、旋转、更换图片。上传部分请根据自身要求进行代码编写。
改变canvas背景的两个方法
每天进步一点点
08-21 8104
1   canvas.drawColor(Color.YELLOW);      canvas.drawColor(Color.argb(125,255,0,255)); 2    绘制一个带有颜色的矩形    canvas.drawRect(0,0,getWidth(),g
网页端抠图实现 H5抠图 canvas抠图 在线抠图
06-08
网页端抠图实现 H5抠图 canvas抠图 在线抠图，这个是一个抠图的demo，可以直接运行使用
canvas实用小工具利用html5canvas将纯色背景图片的背景抠出转为png图片
08-10
canvas实用小工具，利用html5 canvas 将纯色背景图片的背景抠出， 转为png图片。
微信小程序基于canvas实现纯色背景抠图功能
06-11
微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现...
vue-cropper裁剪个人图像
weixin_42304966的博客
10-31 458
总结：1.原始图像是oss，短时间请求两次，会报跨域，第二次回显图像编辑时，可让后端提供一个接口转成base64。4.右侧预览需要固定宽或者高，不然选择裁剪高宽小于预览宽高，会变成椭圆，在realTime方法里。2.option里面注释的属性，如果需要放开使用，在vue-cropper需要加入属性。3.获取的是Blob格式图片，需要转成file，3.上传图像右侧有个原型和方型图像展示实时效果。需求：1.点击修改图像按钮，弹出修改图像弹窗。1.安装vue-cropper。2.图片都是上传到oss上面。
一键智能抠图-原理实现
星沉阁
08-31 3435
1. 效果秀 有些朋友已经体验过了cvpy.net最近新上的一键智能抠图和换背景的功能，智能判断前景并自动抠图，效果还是挺惊艳的，放几张图看看效果： 请注意看这位喵星人右侧性感的胡须，抠的可谓是非常精细了。 有人说了，这张图片的的背景是简单的纯色背景，体现不出难度来。 那我换一张我在路边拍的一朵不知名的花（恕我孤陋寡闻…）的图片，看看抠图的效果，顺便换个蓝色的背景： 可以看到，模型成功识别出了前景区域，而且边缘等细节识别的非常好。 再来看一张人物照的抠图效果： 注意看左手指缝和肩膀后面的那一缕头发，称
vue实现更换背景图片_vue.js怎么改背景图片,vue怎么设置背景图片
weixin_42298876的博客
01-14 7457
vue.js怎么改背景图片·怎么改变了背景图片，vue.js改变背景图片的方法：通过内嵌样式引入样式，使用[require ()]方法，代码为[div :style=’leftBg’/div]。[相关文章推荐：vue.js]vue.js改背景图片的方法：在Vue项目的开发中，我们经常在页面中添加背景图片，但是当我们在样式中添加背景图片，编译打包，在服务器上配置时，由于路径解析的问题，图片无法正...
canvas制作图片选区的效果（Vue）
sfyjknvcx的博客
01-28 4578
大家好，我是南宫，今天来写一篇关于canvas绘制“图片选区”的博客。 最近我接到了一个新的任务，要求做一个新的弹窗，里面可以点击按钮，切换配置的能力。其中一个能力涉及到在图片上用鼠标拖动，框选出一个区域，这看起来比较复杂，各种百度无果，我只能自己从零开搞。历时两天终于弄完了，所以现在写一篇博客来记录一下这个思路和实现的过程。 一、成品效果 截图如下： 初始状态是这样的，左右是两张相同的图片，中间有一个钩的按钮。 左边的图可以用鼠标框出一个虚线框。具体来说是按下鼠标后，在图片区...
vue3加原生canvas实现抖音头像抠图和预览
06-10
好的，下面是基于Vue3和原生Canvas实现抖音头像抠图和预览的代码示例： 1. 在Vue3中引入Canvas 在Vue3中，我们可以通过在template中添加canvas元素来引入Canvas，然后通过ref属性获取Canvas的实例。代码如下： ```html <template> <canvas ref="canvas"></canvas> </template> ``` 2. 实现头像抠图功能 首先，我们需要获取用户上传的头像图片，并创建一个新的Canvas元素来处理图片。代码如下： ```javascript import { ref } from 'vue' export default { setup() { // 获取Canvas实例 const canvasRef = ref(null) // 处理上传的图片 const handleImageUpload = (event) => { const file = event.target.files[0] if (file) { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { const img = new Image() img.src = reader.result // 创建新的Canvas元素 const canvas = canvasRef.value const ctx = canvas.getContext('2d') img.onload = () => { const width = img.width const height = img.height canvas.width = width canvas.height = height // 将图片绘制到Canvas中 ctx.drawImage(img, 0, 0, width, height) // 实现头像抠图功能 // ... } } } } return { canvasRef, handleImageUpload } } } ``` 接下来，我们需要实现头像抠图的功能。首先，我们需要使用Canvas的getImageData方法获取Canvas中的像素数据。代码如下： ```javascript // 获取Canvas中的像素数据 const imageData = ctx.getImageData(0, 0, width, height) const pixels = imageData.data ``` 然后，我们可以遍历像素数据，判断每个像素的透明度是否大于某个阈值，如果大于阈值则将该像素的透明度设为255，否则将透明度设为0。这样，就可以把头像部分的像素点都变成不透明的，从而实现头像抠图的效果。代码如下： ```javascript // 实现头像抠图功能 const threshold = 200 // 阈值 for (let i = 0; i < pixels.length; i += 4) { const alpha = pixels[i + 3] if (alpha > threshold) { pixels[i + 3] = 255 } else { pixels[i + 3] = 0 } } ctx.putImageData(imageData, 0, 0) ``` 3. 实现头像预览功能 最后，我们需要实现头像预览的功能。首先，我们需要在template中添加一个img元素，用于展示处理后的头像。代码如下： ```html <template> <div> <input type="file" accept="image/*" @change="handleImageUpload"> <canvas ref="canvas"></canvas> <img ref="preview"> </div> </template> ``` 然后，我们需要在handleImageUpload方法中，将处理后的Canvas转换成DataURL，然后将其赋值给img元素的src属性，从而实现头像预览的效果。代码如下： ```javascript // 将Canvas转换成DataURL const dataURL = canvas.toDataURL() // 将处理后的头像展示在img元素中 const imgPreview = previewRef.value imgPreview.src = dataURL ``` 至此，基于Vue3和原生Canvas实现抖音头像抠图和预览的代码示例就完成了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Not_A_Coder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值