解决方案一:将透明的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. 2020.01.19【NOIP提高组】模拟比赛-1.水池,2.数字排序,3.球星,4.钻石交易 总结反思

    水池 比赛时 我最讨厌这种数学类题了,我首先想到了这几种情况,设\(jl[][]\)表示两点之间弧的距离,从F到G可以由 F->G F->B->A->G F->A-> ...

  2. Android studio中为项目添加模块依赖的过程

    https://blog.csdn.net/cheng__lu/article/details/74574582 Android studio中为项目添加模块依赖的过程 1.点击菜单file>p ...

  3. 2020牛客寒假算法基础集训营4-D子段异或

    思路 CODE #include <bits/stdc++.h> #define dbg(x) cout << #x << "=" <&l ...

  4. ubuntu python 安装使用虚拟环境 virtualenv

    1,虚拟环境是干啥用的? 我在电脑上装了cuda,显卡驱动,cudnn等一堆配套文件,然后又依赖于cuda和驱动安装了tensorflow2.0的gpu测试版,不知为何,我每次跑完tf2程序电脑都会卡 ...

  5. python 元组 列表 字典

    type()查看类型 //取整除 **幂 成员运算符: in  x在y序列中,就返回true 反之  not in 身份运算符: is is not 逻辑运算符 and or not 字符编码 问题 ...

  6. Scrum简介

    1. 什么是Scrum Scrum是一种轻量级的框架,适合于小型的.结合紧密的团队开发复杂的产品.Scrum是二十世纪后期一些软件工程师协同努力的脑力劳动的成果,现已成为技术领域最具魅力的方法.但Sc ...

  7. java面试记录二:spring加载流程、springmvc请求流程、spring事务失效、synchronized和volatile、JMM和JVM模型、二分查找的实现、垃圾收集器、控制台顺序打印ABC的三种线程实现

    注:部分答案引用网络文章 简答题 1.Spring项目启动后的加载流程 (1)使用spring框架的web项目,在tomcat下,是根据web.xml来启动的.web.xml中负责配置启动spring ...

  8. Subway POJ - 2502 spfa

    #include<cstdio> #include<cmath> #include<cstring> #include<cstring> #includ ...

  9. 打铁选手的 CDQ分治 刷题记录

    BZOJ3262 模板题,三位偏序. 注意第一维排完序之后再给二三维排序的时候还是要考虑下第一维的:如果二三维都相等的话第一维小的要在前面 代码: #include <bits/stdc++.h ...

  10. Linux之温故知新1

    1.touch命令的使用 2.使用(cd -)可以在上次使用的目录来回切换 3.ls通配符的使用*代表任意字符和任意个字符, ?代表任意一个字符, [12345]中的任意一个字符, [1-5]中的任意 ...