python 将图片转换成像素画_Canvas 实现位图转像素画

2016 年快结束了，最后一天总要留下点什么。

前段时间迷上像素画，折腾了好一段时间，后来思考了下，能不能用程序或者有什么图像处理软件能把一张图片直接转成像素风格？

于是先谷歌一下，在豆瓣发现了这个很棒的小站，教你画像素画，其中有朋友分享一个PS处理的方法：位图快速转像素，这个方法处理对比度强的图片效果是不错的，于是我按照同样的思路，尝试用Canvas来完成同样的效果，纯粹只是不想打开PS。

看最终效果 or 不想折腾PS的快戳这里：图像转换像素图

思路

将一张图片缩小到一定的百分比，比如25%，这时候截图，图片将丢失一些像素信息，对的就是要这种效果。

使用PS的阈值功能，将此时的图片处理，在设置合适的阈值下，让图片达到最佳显示效果。

最后将图片放大至看到像素点，就能看到我们要的像素化效果。

那么，用Canvas怎么实现呢？

首先应该理解阈值的概念，阈值可以理解为临界值，大于临界值呈现一种状态，小于临界值又呈现另一种状态。PS中阈值可以将图片变成黑白图像，阈值的范围是0~255，假设阈值是192，则PS会将亮度小于192的像素点转成黑色，将亮度大于192的转成白色。

getImageData

Canvas的ImageData对象可以得到图像的所有信息，imageData.data是一个保存着图片像素信息的数组，数组中每个值的范围是0~255，每四个值表示一个像素点的颜色信息，格式是这样的：imageData.data = [像素点1的R, 像素点1的G, 像素点1的B, 像素点1的A, 像素点2的R, 像素点2的G, 像素点2的B, 像素点2的A, ... , 像素点n的A]。

var pixel = ctx.getImageData(x, y, width, height);

putImageData

对imageData.data数组做修改后，可以通过putImageData写入修改后的像素数据。

ctx.putImageData(imageData, x, y);

实现

缩小图像

var scale = 0.25;

ctx.drawImage(image, 0, 0, image.width * scale, image.height * scale);

灰度化并阈值处理

为了实现最终效果，我这里是将图片的所有像素信息先灰度化，替代亮度信息，然后每个像素点的灰度值与设定的阈值相比较，大于阈值的显示为白色，小于阈值的显示为黑色。

// 灰度值的计算公式，由rgb值计算

var gray = 0.299 * r + 0.587 * g + 0.114 * b;

阈值处理的方法实现：

/**

* [convert description]

* @param {[type]} ctx [description]

* @param {[type]} imageData [description]

* @param {[type]} threshold [阈值]

* @return {[type]} [description]

function convert(ctx, imageData, threshold) {

var data = imageData.data;

for (var i = 0; i < data.length; i += 4) {

// 灰度计算公式

var gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 *data[i + 2];

var color = gray >= threshold ? 255 : 0;

var alpha = data[i + 3];

data[i] = color; // red

data[i + 1] = color; // green

data[i + 2] = color; // blue

data[i + 3] = alpha >= threshold ? 255 : 0; // alpha, 去掉png图透明

}

ctx.putImageData(imageData, 0, 0);

}

将图像还原大小

ctx.drawImage(image, 0, 0, image.width / scale, image.height / scale);

反锯齿处理

小图经过放大默认是模糊的，将imageSmoothingEnabled置为false才能清晰显示像素点。

ctx.imageSmoothingEnabled = false;

ctx.mozImageSmoothingEnabled = false;

ctx.webkitImageSmoothingEnabled = false;

ctx.msImageSmoothingEnabled = false;

来，看效果（左图为原图）：

对于对比度强的图片，不进行阈值处理也可以有不错的效果

最终效果还是可以，但是这个方法本身存在一定局限性，对于对比度不高的图片效果很差，几乎不适用。所以玩的时候是比较挑图片的。

在线版仅支持高版本浏览器，欢迎试玩，快戳这里

python 将图片转换成像素画_Canvas 实现位图转像素画相关推荐

python将图片转换成动漫,python实现图片转换成素描和漫画格式
本文实例为大家分享了python实现图片转换成素描和漫画格式的具体代码,供大家参考,具体内容如下原图图片转换后的成果源码 # -*- coding: utf-8 -*- import cv2 f ...
python图片转成素描_巧用python实现图片转换成素描和漫画格式
[相关学习推荐:python教程] 本文实例为大家分享了python实现图片转换成素描和漫画格式的具体代码,供大家参考,具体内容如下原图图片转换后的成果源码# -*- coding: utf-8 ...
python风格变换图片_巧用python实现图片转换成素描和漫画格式
[相关学习推荐:python视频教程] 本文实例为大家分享了python实现图片转换成素描和漫画格式的具体代码,供大家参考,具体内容如下原图图片转换后的成果源码# -*- coding: utf ...
python照片转化为漫画_巧用python实现图片转换成素描和漫画格式
[] 本文实例为大家分享了python实现图片转换成素描和漫画格式的具体代码,供大家参考,具体内容如下原图图片转换后的成果源码# -*- coding: utf-8 -*- import cv2 ...
python将图片转换成动漫_python实现图片转换成素描和漫画格式
本文实例为大家共享了python实现图片转换成素描和漫画格式的详细代码,供大家参考,详细内容如下原图图片转换后的成果源码 # -*- coding: utf-8 -*- import cv2 f ...
pythonmat文件转excel,利用python将图片转换成excel文档格式
前言本文主要介绍了关于利用python将图片转换成excel文档的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现步骤读取图像,获取图像每个像素点的RGB值: 根据 ...
pythonmat文件转excel_利用python将图片转换成excel文档格式详解
本文主要介绍了关于利用python将图片转换成excel文档的相关内容,编写了一小段Python代码,将图片转为了Excel,纯属娱乐,下面这篇文章主要给大家介绍了关于利用python将图片转换成ex ...
python读取图片文字为表格_利用python将图片转换成excel文档格式
前言本文主要介绍了关于利用python将图片转换成excel文档的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现步骤读取图像,获取图像每个像素点的RGB值: 根据 ...
python将excel转换成图片格式_利用python将图片转换成excel文档格式
前言本文主要介绍了关于利用python将图片转换成excel文档的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现步骤读取图像,获取图像每个像素点的RGB值: 根据 ...
python日常实用技能：利用python将图片转换成excel文档格式
@本文来源于公众号:csdn2299,喜欢可以关注公众号程序员学府前言本文主要介绍了关于利用python将图片转换成excel文档的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详 ...

python 将图片转换成像素画_Canvas 实现位图转像素画

python 将图片转换成像素画_Canvas 实现位图转像素画相关推荐

最新文章

热门文章