照片《龙王变》丨 春节创意投稿

721 阅读2分钟

路子来源

  • 一开始,想到画真龙下一百层...

image.png

  • 但是,过程中遭受到了接二

image.png

  • 连三的鼓励

image.png

最终决定做个《龙王变》(一如既往的水平稳定)

效果图

由于只有画面构思,不知道怎么实现思路,简单掘金一下,找到有一篇文章作为参考...
(参考文章:产品经理:你能不能用div给我画条龙?

dragon.gif

思路和要点

  1. 先获取图片的 ImageData 对象,主要为了获取该图片的像素数据。
  2. 再通过点阵信息遍历该图片的像素数据,匹配对应颜色的进行替换想要的效果。
  3. 封装了两个部分,一个部分是画点;一个是画图片;
  4. 画点部分增加不同透明效果,并加上定时器,每秒变换一次,达到色差实现变化;

画点部分

    // 画点部分
    function drawCircle(x, y, radius, color = '#f00') {
        ctx.fillStyle = color
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI); 
        ctx.fill();
    };

画图部分

    // 画图部分
    function drawImage(url, x, y, w = 20, h = 20) {
        const img = new Image();
        img.crossOrigin = "anonymous";
        img.src = url;
        img.onload = () => {
            ctx.drawImage(img, x - w / 2, y - h / 2, w, h);
        };
    };

主要部分,遍历图片的像素数据,进行匹配和替换想要的效果。

function drawLattice(status) {
        var imageData = ctx.getImageData(0, 0, image.width, image.height).data;
        // console.log("图片信息获取", imageData)
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, image.width, image.height);
        var gap = 6;
        const colorCounter = {}
        let targetColorCount = 0
        for (var h = 0; h < image.height; h += gap) {
            for (var w = 0; w < image.width; w += gap) {
                var position = (image.width * h + w) * 4;
                const r = imageData[position];
                const g = imageData[position + 1];
                const b = imageData[position + 2];
                const colorKey = `${r},${g},${b}`
                // console.log(colorKey);
                colorCounter[colorKey] = colorCounter[colorKey] ? colorCounter[colorKey] + 1 : 1;
                if (marginName === "红闪闪") {
                    if (colorKey === '31,26,23' || (!isFirst && colorKey !== '255,255,255')) {
                        targetColorCount++
                        drawCircle(w, h, 4, `rgba(255,0,0,${Math.random()})`)
                    }
                } else if (marginName === "头像变") {
                    if (colorKey === "31,26,23") {
                        targetColorCount++;
                        const random = Math.round(Math.random() * 10000);
                        const imageUrl =
                            `https://p6-passport.byteacctimg.com/img/user-avatar/db3b09f9ca107d8843cee3fe8f4f0cd4~150x150.awebp`;
                        drawImage(imageUrl, w, h, 15, 15);
                    }
                }
            }

        }
        isFirst = false;
    }

仓库地址与体验地址

大家可以直接来笔者的网站来体验
在线体验(pc端):体验传送门
仓库地址:暂无(想要的可以直接去扒笔者的网站传送门 )

感谢

大帅老猿文章【产品经理:你能不能用div给我画条龙?】

文章小尾巴

文章小尾巴(点击展开)

文章写作、模板、文章小尾巴可参考:《写作“小心思”》
  感谢你看到最后,最后再说两点~
  ①如果你持有不同的看法,欢迎你在文章下方进行留言、评论。
  ②如果对你有帮助,或者你认可的话,欢迎给个小点赞,支持一下~
   我是南方者,一个热爱计算机更热爱祖国的南方人。
  (文章内容仅供学习参考,如有侵权,非常抱歉,请立即联系作者删除。)