探索 |
您所在的位置：网站首页 › 背景图格子黑白 › 探索 |
探索
|
之前用canvas绘制图片的时候，如果图片有格子背景 需要找一张格子背景的图片当作canvas的background-image。 或者使用linear-gradient来画一个格子背景。
才能实现给图片添加格子背景的效果：
所以就在想，能不能不用图片来实现格子背景图，而是使用canvas的强大绘制功能，因为格子背景图也是数据，通过绘制数据来实现格子背景。 绘制格子背景首先 添加一个 canvas 然后使用 createImageData 创建一个新的空白 ImageData 对象。 然后往新的空白 ImageData 对象中设置代表格子背景的数据。 在往 ImageData 对象设置数据之前，我们需要了解一下 ImageData 对象的 data 属性。 data属性的值是一个元素都是数字的数组，而且每个数字的范围在 0-255 例如这样的： console.log(imageData.data) // [255, 255, 255, 255, 78, 78, 78, 96 ....]它们每四个数据合起来表示一个像素点，每个数据的意义按顺序来表述为 red, green, blue, alpha 接下来就往 ImageData 对象中设置代表格子背景的数据。 let canvas = document.getElementById("img-box"); let ctx = canvas.getContext("2d"); function createTransparentData(width, height) { let emptyBox = ctx.createImageData(width, height); let emptyBoxData = emptyBox.data // 通过 canvas宽高 来遍历一下 canvas 上的所有像素点 for (let i = 0; i > 2 相当于 / 4 取整， & 1相当于 % 2 emptyBoxData[point] = rgbData; emptyBoxData[point + 1] = rgbData; emptyBoxData[point + 2] = rgbData; emptyBoxData[point + 3] = 255 } return emptyBox } const transparentData = createTransparentData(canvas.width, canvas.height) ctx.putImageData(transparentData, 0, 0);效果图如下：
拿到背景图的数据数组(transparentData)了，接下来就要把图像的数据和背景图的数据(transparentData)融合了。 首先需要获取图像的数据。所以先往canvas上画一张图片，为了更好的适应各种情况，这里特意选了一张多边形图片。 添加格子背景 let canvas = document.getElementById("img-box"); let ctx = canvas.getContext("2d"); let img = new Image(); img.src = 'https://fathands.github.io/img/articles/canvas-share/pic.png'; img.onload = function() { ctx.drawImage(img, 0, 0, 400, 400); }此时已经在canvas上把图像画上去了：
并且为图片添加格子背景的操作都放在 addTransparent 函数中，并且把 addTransparent 函数绑定到 “添加格子背景” 按钮上 接下来是重点。需要获取： 1.原始图的有效图像数据，就是下图中红色边框框住的部分 2.有效图像的起点，宽和高, 起点是以图像的左上角为原点的。 如下图所示：
在这之前，我们还需要获取原图中所有表示透明度的数据 function getAllAlphaData() { let originImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); let alphaDataLength = new Uint8Array(originImageData.data.length >> 2) let alphaDataList = new Uint8Array(alphaDataLength) let originData = new Uint8Array(originImageData.data) let len = alphaDataList.length for (let i = 0; i |
【本文地址】
今日新闻 |
推荐新闻 |