图片去除底色（vue+canvas）

把它封装成一个组件
首先要创建两个canvas标签
id（originalPic）处理图片的画布
id (modify) 存放处理图片后的画布

  <template><div class="img-warpper"><img v-if="!flag" :src="data:imageSrc" /><canvas style="display: none;" id="originalPic"></canvas><canvas style="display: none;" ref="modify" v-show="flag" id="modify"></canvas><button class="cancle" @click="removeBgc()">点击去底色</button></div></template><script>data() {return {cimg: { //图片的宽高width: 0,height: 0},flag: false //控制是否显示预览图（imageSrc）去底色后不显示预览图}},props: {imageSrc:  {//默认展示的预览图地址type: String,default() {return ""}}},methods: {removeBgc() {var _this = this//1.获取画布var cavs = document.querySelector("#Originalpic");var picCavs = document.querySelector("#modify");var canvasResult = cavs.getContext("2d");var contextResult = picCavs.getContext("2d");//2.每次去底色前清空画布picCavs.getContext("2d").clearRect(0, 0, this.cimg.width, this.cimg.height);var imgData = [],imgDataResult = [],rgbaPicker = []; //依次为图片像素信息 处理完成后的像素信息 最终颜色值（rgba）var img = new Image();img.crossOrigin = "anonymous"; //处理图片跨域img.src = this.imageSrc + "&v=" + Math.random(); //防止图片缓存img.onload = function() {cavs.setAttribute("width", img.width); //设置画布宽度cavs.setAttribute("height", img.height); //设置画布高度picCavs.setAttribute("width", img.width); //同上picCavs.setAttribute("height", img.height); //同上_this.cimg.width = img.width; //将图片宽度赋值cimg中 用于下次清除画布_this.cimg.height = img.height;  //将图片高度赋值cimg中 用于下次清除画布canvasResult.drawImage(this, 0, 0);//将图像绘制到画布上 imgData = canvasResult.getImageData(0, 0, img.width, img.height);// 获取像素信息数据（原数据）imgDataResult = imgData; // 赋值像素信息数据（要修改的数据）//points  （获取画布点坐标[ x, y ]）var points = [ [1, 1],[img.width - 1, 1],[img.width / 2, 1],[img.width/2, img.height - 1],[1, img.height - 1],[1, img.height / 2],[img.width - 1, img.height / 2],[img.width - 1, img.height - 1] ];for (var i = 0; i <= points.length - 1; i++) {//遍历坐标获取对应点RGBA()  getImageData()rgbaPicker[i] = canvasResult.getImageData(points[i][0],points[i][1],1,1).data; //获取}var obj = {};var range = 2;//容差值var maxCount = 0; //rgba中0-255var maxElement = rgbaPicker[0]; //默认取第一个rgbafor (var i = 0; i < rgbaPicker.length; i++) {var ponit = rgbaPicker[i];var key = ponit.join(",");obj[key] = 0;//对色点附近点位也做计数for (var j = 0; j < rgbaPicker.length; j++) {if (Math.abs(ponit[0] - rgbaPicker[j][0]) <= range &&Math.abs(ponit[1] - rgbaPicker[j][1]) <= range &&Math.abs(ponit[2] - rgbaPicker[j][2]) <= range) {obj[key]++;}}if (maxCount < obj[key]) {maxCount = obj[key];maxElement = key;}}if (maxCount <= 1) {_this.flag = false//色点太多无法计算} else {var rgba = maxElement.split(",").map(Number);}// 容差大小var tolerance = range * range * range;// 基于原始图片数据处理for (var index = 0; index < imgData.data.length; index += 4) {var r = imgData.data[index];var g = imgData.data[index + 1];var b = imgData.data[index + 2];if (Math.sqrt((r - rgba[0]) * (r - rgba[0]) +(g - rgba[1]) * (g - rgba[1]) +(b - rgba[2]) * (b - rgba[2])) <= tolerance) {//将rgba赋值0imgDataResult.data[index] = 0;imgDataResult.data[index + 1] = 0;imgDataResult.data[index + 2] = 0;imgDataResult.data[index + 3] = 0;} else {imgDataResult.data[index] = r;imgDataResult.data[index + 1] = g;imgDataResult.data[index + 2] = b;imgDataResult.data[index + 3] = imgData.data[index + 3];}}contextResult.putImageData(imgDataResult, 0, 0); //将图像数据放回画布this.$refs.modify.style.display = 'block' //处理完成将画布展示this.flag = true};}}</script>```

图片底色去除vue+canvas（简易版）相关推荐

html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
Stable Diffusion：使用Lora用二十张图片训了一个简易版薇尔莉特头像生成器（不作商用，纯纯个人兴趣，狗头保命）
目录一.系统环境二.数据准备及预处理三.使用Stable Diffusion获取图像信息四.安装训练图形化界面五.参数设置及训练过程六. 效果测试七.常见报错处理一.系统环境同上一篇 ...
JS——图片变清晰（简易版刮刮乐）
JS--图片变清晰题目描述代码题目描述当鼠标移到图片上时,图片一点一点变清晰演示代码 <!DOCTYPE html> <html><head><m ...
Vue源码分析-手写Vue（简易版）
1.Vue双向绑定/MVVM响应式原理/v-model的原理 vue.js通过数据劫持结合发布订阅者模式,通过Object.defineProperty来劫持各个属性的setter,getter,在数 ...
javascript实现图片轮播_手撸一个简易版轮播图(上)
手撸一个简易版轮播图实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果. 页面布局简易版轮播图 < > 页面样式 .container{width: 60 ...
手写简易版Vue源码之数据响应化的实现
当前,Vue和React已成为两大炙手可热的前端框架,这两个框架都算是业内一些最佳实践的集合体.其中,Vue最大的亮点和特色就是数据响应化,而React的特点则是单向数据流与jsx. 笔者近期正在研究 ...
简易版购物车案例(vue)
简易版购物车案例(vue) <div id="app"><div v-if="books.length"><table>&l ...
vue鼠标悬停出现悬浮框（简易版实现）
vue鼠标悬停出现悬浮框(简易版实现) 使用一个变量来控制悬浮框显示和隐藏,注意:这是简易版实现,其他功能需自行开发: 代码如下: <template><div><div ...
01、Vue简易版网易云——项目简介
1.项目介绍在经过一段时间Vue的学习之后,本人决定用一个简易版的网易云项目,对Vue的知识进行进一步的巩固. 项目完整github地址 2.项目技术 1.后台技术本次后台使用的是,别人写好的网络 ...
VUE+Canvas实现输入文字生成对应的字体图片小功能
你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...

图片底色去除vue+canvas（简易版）

图片去除底色（vue+canvas）

图片底色去除vue+canvas（简易版）相关推荐

最新文章

热门文章