解决方案一:将透明的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. MySQL 8 mysql system schema

    在大的分类上:mysql schema包括存储数据库对象元数据的数据字典表和用于其他操作目的的系统表 数据字典表和系统表一般使用InnoDB存储引擎 与之前的版本不同,数据字典表和系统表存储在数据目录 ...

  2. openlayers按坐标点播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. wfuzz的使用

    用于模糊测试,测试过滤字符 转载:https://www.secpulse.com/archives/81560.html https://www.freebuf.com/sectool/173746 ...

  4. java中生成任意之间数的随机数

    public static int cssjs(int a,int b) { Random rand=new Random(); int zhi; zhi=rand.nextInt(b)%(b-a+1 ...

  5. LeetCode 852. 山脉数组的峰顶索引 (二分)

    题目链接:https://leetcode-cn.com/problems/peak-index-in-a-mountain-array/ 我们把符合下列属性的数组 A 称作山脉: A.length ...

  6. 自定义React-redux

    实现mini版react-redux 1. 理解react-redux模块 1). react-redux模块整体是一个对象模块 2). 包含2个重要属性: Provider和connect 3). ...

  7. (1)-Android学习笔记之:初识Android系统架构和项目结构

    Android系统架构 Android程序结构 创建一个Android项目,为初学便于理解,将程序项目结构切换为Project模式,项目结构如下 .gradle和.idea:这两个目录下放的都是And ...

  8. 微信小程序中如何上传图片

    本篇文章给大家带来的内容是关于微信小程序中如何上传图片(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.wxml文件 <text>上传图片</text ...

  9. ubantu安装apache

    1.命令安装: sudo apt install apache2 2.检查是否启动了Apache服务 systemctl status apache2 3.开启.关闭和重启服务器 /etc/init. ...

  10. 启动Hive时报错(com.mysql.jdbc.Driver") was not found in the CLASSPATH)

    这是因为没有mysql-connector的jar包.需要把jar包复制到hive目录lib文件夹中. 参考博客:https://blog.csdn.net/Realoyou/article/deta ...