解决方案一:将透明的pixel设成白色

因为png图片的背景都是透明的,所以我们可以寻找透明的pixel,然后将其全部设置成白色,核心代码如下:

JavaScript Code复制内容到剪贴板
// 将canvas的透明背景设置成白色
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
for(var i = 0; i < imageData.data.length; i += 4) {
// 当该像素是透明的,则设置成白色
if(imageData.data[i + 3] == 0) {
imageData.data[i] = 255;
imageData.data[i + 1] = 255;
imageData.data[i + 2] = 255;
imageData.data[i + 3] = 255;
}
}
context.putImageData(imageData, 0, 0);

其他方法见https://m.aliyun.com/jiaocheng/646601.html

设置canvas的背景成白色的更多相关文章

  1. (转载)Recyclerview | Intent与Bundle在传值上的区别 | 设置布局背景为白色的三种方法

    用Recyclerview实现列表分组.下拉刷新以及上拉加载更多  http://www.jianshu.com/p/be62ce21ea57 Intent与Bundle在传值上的区别http://b ...

  2. canvas之背景特效

    需具备js基础知识以及canvas相关方法(可查阅相关文档) 下面是一篇有关js与canvas的背景特效 基于面向过程的思维 <!DOCTYPE html> <html> &l ...

  3. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  4. linux BASH shell设置字体与背景颜色

    linux BASH shell下设置字体及背景颜色的方法. BASH shell下设置字体及背景颜色  echo -e "\e[31mtest\e[41m"  \e[30m 将字 ...

  5. 获取bing图片并自动设置为电脑桌面背景(C++完整开源程序)

    众所周知,bing搜索网站首页每日会更新一张图片,张张漂亮(额,也有一些不合我口味的),特别适合用来做电脑壁纸. 我们想要将bing网站背景图片设置为电脑桌面背景的通常做法是: 上网,搜索bing 找 ...

  6. 【开源程序(C++)】获取bing图片并自动设置为电脑桌面背景

    众所周知,bing搜索网站首页每日会更新一张图片,张张漂亮(额,也有一些不合我口味的),特别适合用来做电脑壁纸. 我们想要将bing网站背景图片设置为电脑桌面背景的通常做法是: 上网,搜索bing 找 ...

  7. linux BASH shell下设置字体及背景颜色

    BASH shell下设置字体及背景颜色 echo -e "\e[31mtest\e[41m" \e[30m 将字符的显示颜色改为黑色 \e[31m 将字符的显示颜色改为红色 \e ...

  8. 获取bing图片并自动设置为电脑桌面背景(使用 URLDownloadToFile API函数)

    众所周知,bing搜索网站首页每日会更新一张图片,张张漂亮(额,也有一些不合我口味的),特别适合用来做电脑壁纸. 我们想要将bing网站背景图片设置为电脑桌面背景的通常做法是: 上网,搜索bing 找 ...

  9. 使用CSS设置边框和背景

    一.设置边框 1.边框样式 属性 说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色 a.border-width属性 自 ...

随机推荐

  1. C#中调用Windows系统服务exe程序的工具类与重启服务的流程

    场景 使用C#编写的Windows服务程序,在Winform中进行调用. 常用工具类方法检测服务是否存在或者安装,获取服务状态,启动服务,停止服务的方法. 以在Winform中重启服务为例. 注: 博 ...

  2. 剑指offer-面试题11-旋转数组的最小数字-二分法

    /* 题目: 把一个数组最开始的若干个元素搬到数组末尾,我们称之为数组的旋转. 输入一个递增排序的数组的旋转,输出旋转数组中的最小元素. */ /* 思路: 采用二分的方法,旋转数组实质上是上左半部分 ...

  3. Tomcat配置绝对路径

    JSP访问项目工程下的地址 <video width="640" height="264" controls src="http://local ...

  4. 【算法】用两个栈来实现一个队列,完成队列的Push和Pop操作。 队列中的元素为int类型。

    public class Solution { Stack<Integer> stack1 = new Stack<Integer>(); Stack<Integer&g ...

  5. layui的跳转链接实现分页low

    layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage ,layer = layui.layer; laypag ...

  6. 原型链污染(Node.js污染,javasrcipt原型链污染的)

    学习链接: https://www.jianshu.com/p/6e623e9debe3 关于NJS  https://xz.aliyun.com/t/7184 相关题是 GYCTF  ez_expr ...

  7. ZOJ 4081 Little Sub and Pascal's Triangle 题解

    ZOJ 4081 Little Sub and Pascal's Triangle 题解 题意 求杨辉三角第n行(从1开始计数)有几个奇数. 考察的其实是杨辉--帕斯卡三角的性质,或者说Gould's ...

  8. 统计redis大key信息(前topN)

    相关包下载链接 https://github.com/sripathikrishnan/redis-rdb-tools/releaseshttps://pypi.org/project/python- ...

  9. css实现梯形样式(含有border)

    类似本文热门评论 效果 .hot-comment-title{ float:right; position:absolute; right: -8px; top: -30px; padding: 0; ...

  10. swagger2使用

    添加依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swag ...