canvas将图片转成点阵

前言

最近在掘金里看到了这篇文章：产品经理：你能不能用div给我画条龙？，很有意思，通过canvas提取图片的像素，然后将图片转成点阵图。

按照文章，尝试了好多次，都没有成功。最后只能研究一下原理，自己写一个demo。

参考文章： canvas小练习-图片点阵化demo

需要了解的知识点：

canvas drawImage() 方法：在画布上绘制图像、画布或视频。

canvas getImageData() 方法：复制画布上指定矩形的像素数据

canvas putImageData() 方法：将图像数据放回画布

示例

以下示例基于vue

效果

代码

<template><div style="height:2000px;"><canvasid="myCanvas"style="border: 1px solid #d3d3d3"></canvas><el-button type="primary" @click="copy">复制</el-button></div>
</template><script>
export default {data() {return {// 上下文对象ctx: undefined,// 要绘制图片的大小w: 200,h: 200};},mounted() {// 获取canvas对象let c = document.getElementById('myCanvas');// 获取canvas上下文this.ctx = c.getContext('2d');// 加载图片，不要直接写字符串let src = require('./imgs/a.png');// 创建image对象let image = new Image();image.src = src;let that = this;// 图片加载image.onload = function() {// 设置canvas对象的宽高（不一定要等于图像大小）c.width = image.width;c.height = image.height;// 绘制图像，图像，偏移量，宽高（可以跟图片一样大，也可以自定义）that.ctx.drawImage(image,0,0,that.w,that.h);};},methods: {copy() {// 获取图片的像素值var imageData = this.ctx.getImageData(0, 0, this.w, this.h);// 计算有多少个rgb值let sum = this.w * this.h * 4 ;for(let i = 0;i < sum;i += 4) {if(imageData.data[i] != 255 && imageData.data[i + 1] != 255 && imageData.data[i + 2] != 255) {if(i % 12 != 0) {// 黑imageData.data[i] = 255;imageData.data[i + 1] = 255;imageData.data[i + 2] = 255;}else{// 白imageData.data[i] = 0;imageData.data[i + 1] = 0;imageData.data[i + 2] = 0;}}}// 对象，偏移量this.ctx.putImageData(imageData, 0,200);}}
};
</script><style scoped lang="scss">
</style>

注意点

注意点，或者说某些地方为什么要这么做

// 加载图片，不要直接写字符串。否则在vue中不能显示出图片
let src = require('./imgs/a.png');

// 获取图片的像素值
var imageData = this.ctx.getImageData(0, 0, this.w, this.h);

getImageData：这个函数会返回一个对象，里面有一个data属性，是一个数组。数组中的元素，4个一组，表示该像素点的rgba

// 计算有多少个rgb值
let sum = this.w * this.h * 4 ;

像素点就是宽乘以高，例如宽高都是10px的矩形，像素点就是100，但是一个像素点由4个值组成（rgba），所以要乘以4，否则会丢失一些东西。

核心

核心其实就是如何处理像素点。要想点阵显示的内容多，关键在于如何处理。
以当前这个例子来说：

 for(let i = 0;i < sum;i += 4) {

因为一个像素点是4个值，所以要加4，4个数一组进行处理。

if(imageData.data[i] != 255 && imageData.data[i + 1] != 255 && imageData.data[i + 2] != 255) {if(i % 12 != 0) {// 黑imageData.data[i] = 255;imageData.data[i + 1] = 255;imageData.data[i + 2] = 255;}else{// 白imageData.data[i] = 0;imageData.data[i + 1] = 0;imageData.data[i + 2] = 0;}
}

这个福字图片，字是红色的，周围是白色的。我们要显示的点阵是这个字，是让这个字以点的形式显示；不能让周围的白色也变成点。所以如果是白色就不处理，而白色的rgb是（255，255，255）

为啥要取余12呢？因为必须黑色和白色间隔显示才能显示点阵，不能所有颜色一样。一个像素是4个值，所以必须是4的倍数。值越小，越密集。值越大越松缓，这里取12是显示的效果比较好。

局限

局限还是如何处理像素点。比如福字周围不是白色，而是有多种颜色，那就要想办法不处理这些颜色。

canvas将图片转成点阵相关推荐

文字图片转成点阵的小工具
无聊,写了一个小工具. 将汉字转成点阵,图片转成点阵,看下效果图: [img]http://dl.iteye.com/upload/attachment/611624/4189635f-f9e2-30 ...
教你用Canvas将图片截成圆图
超能的Canvas又来啦不知道大家会不会碰到要把一张方方正正的图截取成Cute的圆图呢今天来告诉你,怎么化茧成蝶实现加载一张可访问的图片,使用Canvas绘制一个圆形画布,将图片在画布范围内进 ...
c语言将一幅画转换为字符画,C#将图片转换成字符画
先看一下效果图在Main方法中调用(首先要添加程序集System.Drawing,然后引入命名空间System.Drawing) ConvertToChar(new Bitmap(@"D: ...
基于Canvas 实现图片转点阵图
要实现什么同事想做一张世界地图的背景图,但是网上找的图片都太low了.他想用那种密集的点阵组成的世界地图.作为程序员,想法当然是通过图片处理,识别像素点,然后生成新的图片. 目标是这样的: 实现思路 ...
canvas全局合成画月牙_教你用Python将自己喜欢的图片转成字符画，居然还有动态的 - 松鼠爱吃饼干...
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理以下文章一级Python技术 ,作者派森酱前言字符画是一种由字母,标点或其他字 ...
微信小程序在一张canvas上把正方形图片绘制成圆形
因为最近在做分享功能,需要用户的头像在微信小程序中,然后写下其他文字,如何在把正方形图片放到canvas,导成圆角.找了两个参考资料,分别是用.clip()和.clearRect()两种方法微信小程 ...
uniapp中canvas将矩形图片绘制成圆形图片以及保存canvas到手机
废话不多说直接上代码本次是在uniapp中操作的但是canvas都一样前提是你已经赋予了canvas宽高了 //先获取你的canvas let ctx = uni.createCanvasCon ...
前端转换图片格式前端将png格式图片转成jpg格式前端用使用canvas转换图片格式
在开发中,遇到这样一个需求.由于我们的照片是要下发到设备上,而我们的设备只支持jpg格式的图片.那么我们不能限制用户只选择jpg图片进行上传,这样用户体验极差. 解决方案:用canvas转换图片的格式 ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

canvas将图片转成点阵

前言

示例

注意点

核心

局限

canvas将图片转成点阵相关推荐

最新文章

热门文章