记canvas优化图片抠图历程

前提：工作涉及到IPTV机顶盒EPG开发业务，正常的IPTV机顶盒视频播放调用的是厂商封装的Mediaplayer组件，异于普通的video播放，渲染的视频窗口属于安卓系统底层渲染，和html页面元素不是一个层面，在文档流的下方，播放时会被dom元素遮挡。想正确的播放视频必须在视频区域处保持dom文档流完全透明才可以，所以用到了canvas解决方案，在此记录。

传统正常操作

传统EPG页面会在生成背景图时，预留好视频播放的窗口，简而言之就是做一个局部透明的PNG图片，当作底图，类似于下面这样：

弊端：固定编排，太过死板，限制视频播放区域。

因为本人开发的EPG页面非固定排版，为后台管理系统智能编排，所以EPG页面完全灵活可配，任何地方都有可能为视频播放区域，传统的解决方案无法满足此需求。

解决方案

设置一个img标签，引入背景图，调用视频播放的时候把图片转为canvas进行局部透明(抠图)，在视频播放完毕后还原背景图。

注:css代码忽略

 <img id="imgurl" src="xxx.jpg" /> <script>var bg = document.getElementById("imgurl");// 当调用视频播放，开始抠图bg2canvas(bg, 30, 40, 200, 160);function bg2canvas(bg, left, top, width, height){var canvas = document.createElement("canvas");canvas.width = 1280;canvas.height = 720;var content = canvas.getContext("2d");content.drawImage(bg, 0, 0);var imgData = content.getImageData(left, top, width, height);for (var i = 0, len = imgData.data.length; i < len; i += 4) {// 改变每个像素的透明度imgData.data[i + 3] = 0;}content.putImageData(imgData, left, top);bg.src = canvas.toDataURL();bg.onload = undefined;}// 当视频播放结束bg.src = "xxx.jpg";</script>

弊端：有些性能不好的机顶盒在执行的过程中极为缓慢，调查发现在执行透明循环以及canvas.toDataURL()过程中消耗时间过长

优化bg2canvas()方法1

查询canvas文档发现canvas变透明可以调用clearRect() API

 function bg2canvas(bg, left, top, width, height){var canvas = document.createElement("canvas");canvas.width = 1280;canvas.height = 720;var content = canvas.getContext("2d");content.drawImage(bg, 0, 0);// 删除/* var imgData = content.getImageData(left, top, width, height);for (var i = 0, len = imgData.data.length; i < len; i += 4) {// 改变每个像素的透明度imgData.data[i + 3] = 0;}content.putImageData(imgData, left, top); */content.clearRect(left, top, width, height); /* 新增 */ bg.src = canvas.toDataURL();bg.onload = undefined;}

弊端：确实节约了一部分性能问题，但是canvas.toDataURL()方法依旧消耗过长时间。

优化bg2canvas()方法2

既然最后一步转为图片消耗性能那就索性不转图片，直接在页面加载时就渲染呈现canvas形式的图形。

 <canvas id="canvas"></canvas><script>// 渲染canvas图形var oimg = new Image();oimg.src = "../pic/d/7b9ded875fac44208b8f9e5e90c8a21d.JPG";var cvs = document.querySelector("#canvas");var context = cvs.getContext("2d");oimg.onload = function () {cvs.width = 1280;cvs.height = 720;context.drawImage(this, 0, 0, 1280, 720);};// 当视频播放时,抠图context.clearRect(30, 40, 200, 160);</script>

性能提升明显，perfect

记canvas优化图片抠图历程相关推荐

canvas简单实现纯色背景图片抠图
最近在研究html5 canvas的过程中,发现,canvas为前端对图像的处理开辟了一条新的道路,canvas可以做到很多事情,甚至可以做个类似于PhotoShop的东西,曾经本人在一家软件工作就做 ...
记一次性能优化的心酸历程【Flask+Gunicorn+pytorch+多进程+线程池，一顿操作猛如虎】
您好,我是码农飞哥,感谢您阅读本文,欢迎一键三连哦. 本文只是记录我优化的心酸历程.无他,唯记录尔.....小伙伴们可围观,可打call,可以私信与我交流. 干货满满,建议收藏,需要用到时常看看. 小 ...
java 生成纯色图片_canvas简单实现纯色背景图片抠图(示例代码)
最近在研究html5 canvas的过程中,发现,canvas为前端对图像的处理开辟了一条新的道路,canvas可以做到很多事情,甚至可以做个类似于PhotoShop的东西,曾经本人在一家软件工作就做 ...
HTML5网页设计图片如何,网页设计中优化图片的6个技巧
本文转载自[微信公众号:阿门教你PS,ID:meitian_PS]经微信公众号授权转载,如需转载与原文作者联系平面设计和网页设计是两个截然不同的领域,这两个领域有不同的设计需求.设计实践和设计方法. ...
图片较多的网站，如淘宝京东、美丽说花瓣、QQ空间、百度图片等都采用哪些技术优化图片展示？
作者:秦墨鱼链接:https://www.zhihu.com/question/33309032/answer/95570832 来源:知乎秦墨鱼是我的好基友,今天转他的文章来讲讲前端图片优化前 ...
html5 自动扣图,利用canvas实现一个抠图小工具
本文作者:IMWeb 孙世吉未经同意,禁止转载利用canvas实现一个抠图小工具 0 前言作为新一代的前端开发工程师,PS抠图切图已经不是必备技能了,我们有UI/交互/视觉等更专业的设计同学帮我 ...
web手势库AlloyFinger运用( 控制CANVAS中图片移动、缩放、旋转) - 可编辑图片指定区域位置
注: 苹果手机升级IOS14.1系统后,出现图片写入不了CANVAS画布问题解决方法:alloy_paper.js 文件查找代码: this.img.crossOrigin = "Anon ...
html优化显示器,iPhone 4中HTML5 Canvas优化Retina屏幕
iPhone4中HTML5 Canvas优化retina屏幕是本文要介绍的内容,随着 iPhone4 的推出, retina屏在移动设备中被越来越广泛的应用.虽然 retina屏给画面的展现带来了** ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...