H5使用canvas抠取红色印章

实现抠取纸张上盖的红色印章，这个函数很简单，传入url，返回一个base64格式的印章图片

GTRS.convertToTransparent(url,callback);

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" id="viewportid" content="width=750,user-scalable=no" /><title></title></head><body style="background: aliceblue;font-size: 24px;"><h1>自动扣取图章</h1><input type="file" id="upload" /></p><div id="myCanvas"><img width="300" src="" id="show" /></div><script>// 获取图片中的红色印章Get the Red Sealvar GTRS = {// 预处理画布canvas: null,context: null,// 切割点位数组，顺序为开始和结束，cuttingPoint: [{x:0,y:0},{x:0,y:0}],// 设置范围判定值colorRange: 0,// 临时图片myImage: null,// 获取红色印章(只保留红色区间色彩)// 接受URLconvertToTransparent: function(URL,callback) {// 初始化画布this.canvas = document.createElement("canvas");this.context = this.canvas.getContext("2d");let that=this;this.myImage= new Image();this.myImage.onload = function() {that.canvas.width = that.myImage.width;that.canvas.height = that.myImage.height;that.context.drawImage(that.myImage, 0, 0);that.setColorData();that.exportSeal(callback);}this.myImage.src = URL;},// 输出处理后的图片到画布setColorData: function() {// 像素点let length = this.canvas.width * this.canvas.height;// 获取所有色值，每个像素数4个值，R、G、B、Athis.myImage = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);for (let i = 0; i < length * 4; i += 4) {let myRed = this.myImage.data[i];let myGreen = this.myImage.data[i + 1];let myBlue = this.myImage.data[i + 2];if (!this.colorInRange(myRed, myGreen, myBlue)) {this.myImage.data[i + 3] = 0;}if (this.myImage.data[i] > 70) {this.myImage.data[i] = 230;}}this.context.putImageData(this.myImage, 0, 0);},// *判断是否为红色，方法的核心部分，但是就这2行，还可能有点bug -_-colorInRange: function(red, green, blue) {if (red >= this.colorRange && green >= this.colorRange && blue >= this.colorRange && ((red - green) > 20)) {return true;};return false;},exportSeal: function(callback) {// 获取所有像素let length = this.canvas.width * this.canvas.height;this.myImage = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);this.cuttingPoint[0].y = this.leftPoint(length, this.myImage);this.cuttingPoint[0].x = this.topPoint(length, this.myImage);this.cuttingPoint[1].y = this.bootomPoint(length, this.myImage);this.cuttingPoint[1].x = this.rightPoint(length, this.myImage);let image = new Image();let that = this;image.src = this.canvas.toDataURL("image/png");image.onload = function() {let canvas = document.createElement("canvas");canvas.width = that.cuttingPoint[1].x - that.cuttingPoint[0].x;canvas.height = that.cuttingPoint[1].y - that.cuttingPoint[0].y;let context = canvas.getContext("2d");context.drawImage(image, that.cuttingPoint[0].x, that.cuttingPoint[0].y, canvas.width, canvas.height, 0, 0,canvas.width, canvas.height);if(callback){callback(canvas.toDataURL());}}},download: function(url) {let a = document.createElement("a");a.download = '';a.href = url;document.body.appendChild(a);a.click();a.remove();},// 切割开始点YtopPoint: function(length, myImage) {for (let i = 0; i < this.canvas.width; i += 1) {for (let j = 0; j < this.canvas.height; j++) {let myRed = this.myImage.data[j * this.canvas.width * 4 + i * 4]if (myRed >= 10) {return i;}}}},// 切割开始点XleftPoint: function(length, myImage) {for (let i = 0; i < length * 4; i += 4) {// 获取起点xlet myRed = this.myImage.data[i];if (myRed >= 10) {return Math.ceil(i / 4 / this.canvas.width);}}},// 切割结束点Y                   bootomPoint: function(length, myImage) {for (let i = length * 4 - 4; i >= 4; i -= 4) {let myRed = this.myImage.data[i];if (myRed >= 10) {return Math.ceil(i / 4 / this.canvas.width);}}},// 切割结束点XrightPoint: function(length, myImage) {for (let i = this.canvas.width - 1; i > 0; i--) {for (let j = this.canvas.height; j > 0; j--) {let myRed = this.myImage.data[(this.canvas.height - j) * this.canvas.width * 4 + i * 4]if (myRed >= 10) {return i;}}}}}document.getElementById('upload').addEventListener('change', function(event) {var reads = new FileReader();f = document.getElementById('upload').files[0];reads.readAsDataURL(f);reads.onload = function(e) {GTRS.convertToTransparent(this.result,function(url){document.getElementById('show').src=url;});};});</script></body>
</html>

H5使用canvas抠取红色印章相关推荐

「PS技巧」教你如何快速抠取红色合同印章,大兵SEO博客
「PS技巧」:教你如何快速抠取红色合同印章 1.首先需要用PS选取工具框选出要抠取的红印章: 2.然后点击PS菜单选项"选择"-"颜色范围": 3.吸取红印章的 ...
php开发h5游戏,H5的canvas实现贪吃蛇小游戏
这次给大家带来H5的canvas实现贪吃蛇小游戏,H5的canvas实现贪吃蛇小游戏注意事项有哪些,下面就是实战案例,一起来看一下. 本文介绍了H5 canvas实现贪吃蛇小游戏,分享给大家,具体如下 ...
用h5的canvas实现动画的泡沫
效果图一代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
使用传统算法进行红色印章区域的提取
使用代码提取红色印章区域: 提取的区域: (平台有可能显示图片违规,所以大家自己查看身份证反面的图片:国徽) 主要用途:判断证件的倒正步骤:将图像bgr空间转换到Lab空间,然后提取 a空间中的图像 ...
使用H5的Canvas,实现证件照的识别
使用H5的Canvas,实现证件照的识别需求:实现证件照上传时,提示用户证件照是否合法. 思路:在用户上传的照片上取三个像素点,判断像素点是否符合证件照的特点项目中用到了element-plus中 ...
matlab手动抠取圆形区域_利用Photoshop通道工具扣取人物头发教程-PS抠图
本文原创作者小申羊,北京科技大学冶金专业研究生.平面设计爱好者!作者从自身学习角度总结分析,教程非常详细,非常适合新手学习! 本次扣图教程主要使用钢笔工具沿女孩的边缘区域绘制路径:然后借助通道.画笔工 ...
绿布抠像怎么抠干净_AE如何抠取绿幕视频干净抠像教程
AE是一款相当不错的视频处理软件,我们能够用它来解决各种各样在视频编辑方面出现的问题,不少制作视频的朋友都知道绿幕视频要抠取东西的话是一个非常头疼的事情,但是有时候工作需要得用AE进行抠取,特此小编带 ...
canvas制作圆型印章
通过canvas制作圆型印章,首先是上效果图,中间没有填充logo,自行填充就好了 <!DOCTYPE html> <html lang="en">< ...
php从照片中抠出人脸,PS怎样将一张图片上的人脸抠取五官下来到另一张图片
怎么样用Photoshop把一张图片上的脸抠取五官下来到另一张图片?就是用Photoshop像下面图片一样抠取五官到另一张图片上但是只要五官然后肤色还是要黄色的. 主要过程: 1. 把皮卡丘的五官 ...

H5使用canvas抠取红色印章

H5使用canvas抠取红色印章相关推荐

最新文章

热门文章