HTML5 canvas像素化效果

最新推荐文章于 2024-09-02 07:00:00 发布
最新推荐文章于 2024-09-02 07:00:00 发布
阅读量395 收藏
点赞数
文章标签： html5 js css javascript html ViewUI
原文链接：https://www.script-tutorials.com/html5-canvas-pixelate-effect/
版权
HTML5 canvas pixelate effect
HTML5 canvas pixelate effect

HTML5 canvas pixelate effect. New great HTML5 tutorial – I going to tell you about creating pixelate photo effect with html5 (at canvas). More, this is not static effect, but it will be pixelating all time.

HTML5 canvas像素化效果。 新的很棒HTML5教程–我将告诉您有关使用html5(在画布上)创建像素化照片效果的信息。 而且，这不是静态效果，但是会一直像素化。

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the source files and lets start coding !

好的，下载源文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual – very small HTML code

和往常一样–非常小HTML代码

index.html (index.html)

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 pixelate effect | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 pixelate effect</h2>
            <a href="https://www.script-tutorials.com/html5-canvas-pixelate-effect/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="contr">
                <input type="radio" name="mode" onchange="changeMode(0)" checked /><label>Original image</label>
                <input type="radio" name="mode" onchange="changeMode(1)" /><label>Opacity channel</label>
                <input type="radio" name="mode" onchange="changeMode(2)" /><label>White channel</label>
                <input type="radio" name="mode" onchange="changeMode(3)" /><label>Color channel</label>
            </div>
            <canvas id="panel" width="800" height="600"></canvas>
        </div>
    </body>
</html>


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 pixelate effect | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 pixelate effect</h2>
            <a href="https://www.script-tutorials.com/html5-canvas-pixelate-effect/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="contr">
                <input type="radio" name="mode" onchange="changeMode(0)" checked /><label>Original image</label>
                <input type="radio" name="mode" onchange="changeMode(1)" /><label>Opacity channel</label>
                <input type="radio" name="mode" onchange="changeMode(2)" /><label>White channel</label>
                <input type="radio" name="mode" onchange="changeMode(3)" /><label>Color channel</label>
            </div>
            <canvas id="panel" width="800" height="600"></canvas>
        </div>
    </body>
</html>

步骤2. CSS (Step 2. CSS)

css / main.css (css/main.css)

I am not sure if this is necessary to publish layout page styles today, lets keep it in package today, ok?

我不确定今天是否需要发布布局页面样式，今天就将其保存在包装中，好吗？

步骤3. JS (Step 3. JS)

js / script.js (js/script.js)

// variables
var canvas, ctx;
var imgObj;
var imgd;
var iOpSize = 40;
var iMode = 0;
var iCDif = 80;
var r0, r1, r2, r3, r4, r5, r6 = 0;
// util functions
function changeMode(i) {
    iMode = i;
}
function getRand(x, y) {
    return Math.floor(Math.random()*y)+x;
}
// drawing functions
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
    clear(); // clear canvas
    // draw original image
    ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height);
    if (iMode) {
        // .. and get its data
        imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var data = imgd.data;
        for (var y = 0; y < canvas.height; y+=iOpSize){
            for (var x = 0; x < canvas.width; x+=iOpSize){
                // different modes
                if (iMode == 1) {
                    r0 = 55 + Math.random() * 200;
                    r1 = r2 = r3 = r4 = r5 = r6 = 0;
                } else if (iMode == 2) {
                    r0 = 255;
                    r1 = r3 = r5 = getRand(-iCDif, iCDif * 2);
                    r2 = r4 = r6 = getRand(0, iCDif);
                } else if (iMode == 3) {
                    r0 = 255;
                    r1 = getRand(-iCDif, iCDif * 2);
                    r2 = getRand(0, iCDif);
                    r3 = getRand(-iCDif, iCDif * 2);
                    r4 = getRand(0, iCDif);
                    r5 = getRand(-iCDif, iCDif * 2);
                    r6 = getRand(0, iCDif);
                }
                for (var y2 = 0; y2 < iOpSize; y2++){
                    for (var x2 = 0; x2 < iOpSize; x2++){
                        var i = ((y + y2) * canvas.width + x + x2) * 4;
                        data[i+0] = data[i+0] - r1 + r2;
                        data[i+1] = data[i+1] - r3 + r4;
                        data[i+2] = data[i+2] - r5 + r6;
                        data[i+3] = r0;
                    }
                }
            }
        }
        ctx.putImageData(imgd, 0, 0);
    }
}
// binding onload event
if (window.attachEvent) {
    window.attachEvent('onload', main_init);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            main_init();
        };
        window.onload = newonload;
    } else {
        window.onload = main_init;
    }
}
function main_init() {
    // creating canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');
    // loading source image
    imgObj = new Image();
    imgObj.onload = function () {
        ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height); // Draw the image on the canvas
        imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
    }
    imgObj.src = 'images/01.jpg';
    setInterval(drawScene, 150); // loop drawScene // 30
}


// variables
var canvas, ctx;
var imgObj;
var imgd;
var iOpSize = 40;
var iMode = 0;
var iCDif = 80;
var r0, r1, r2, r3, r4, r5, r6 = 0;
// util functions
function changeMode(i) {
    iMode = i;
}
function getRand(x, y) {
    return Math.floor(Math.random()*y)+x;
}
// drawing functions
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
    clear(); // clear canvas
    // draw original image
    ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height);
    if (iMode) {
        // .. and get its data
        imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var data = imgd.data;
        for (var y = 0; y < canvas.height; y+=iOpSize){
            for (var x = 0; x < canvas.width; x+=iOpSize){
                // different modes
                if (iMode == 1) {
                    r0 = 55 + Math.random() * 200;
                    r1 = r2 = r3 = r4 = r5 = r6 = 0;
                } else if (iMode == 2) {
                    r0 = 255;
                    r1 = r3 = r5 = getRand(-iCDif, iCDif * 2);
                    r2 = r4 = r6 = getRand(0, iCDif);
                } else if (iMode == 3) {
                    r0 = 255;
                    r1 = getRand(-iCDif, iCDif * 2);
                    r2 = getRand(0, iCDif);
                    r3 = getRand(-iCDif, iCDif * 2);
                    r4 = getRand(0, iCDif);
                    r5 = getRand(-iCDif, iCDif * 2);
                    r6 = getRand(0, iCDif);
                }
                for (var y2 = 0; y2 < iOpSize; y2++){
                    for (var x2 = 0; x2 < iOpSize; x2++){
                        var i = ((y + y2) * canvas.width + x + x2) * 4;
                        data[i+0] = data[i+0] - r1 + r2;
                        data[i+1] = data[i+1] - r3 + r4;
                        data[i+2] = data[i+2] - r5 + r6;
                        data[i+3] = r0;
                    }
                }
            }
        }
        ctx.putImageData(imgd, 0, 0);
    }
}
// binding onload event
if (window.attachEvent) {
    window.attachEvent('onload', main_init);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            main_init();
        };
        window.onload = newonload;
    } else {
        window.onload = main_init;
    }
}
function main_init() {
    // creating canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');
    // loading source image
    imgObj = new Image();
    imgObj.onload = function () {
        ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height); // Draw the image on the canvas
        imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
    }
    imgObj.src = 'images/01.jpg';
    setInterval(drawScene, 150); // loop drawScene // 30
}

How to pixelate? I have thinking for some time, and understood that this is not so difficult. We will split our image to sub-regions, and then, we will change colors (or opacity) of each region separately.

如何像素化？ 我已经思考了一段时间，并且了解到这并不困难。 我们将图像划分为多个子区域，然后分别更改每个区域的颜色(或不透明度)。

现场演示

结论 (Conclusion)

Today’s lesson has turned a simple and interesting, isn’t it? Welcome back to read something new and interesting. Good luck in your projects.

今天的课程变得简单而有趣，不是吗？ 欢迎回来阅读一些有趣的新东西。 在您的项目中祝您好运。

翻译自: https://www.script-tutorials.com/html5-canvas-pixelate-effect/

cukengwei3786
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas-像素操作
nicecode
07-27 428
在canvas中的像素操作 ​ 到目前为止，我们尚未深入了解Canvas画布真实像素的原理，事实上， ​ 你可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中 ​ 得到场景像素数据 ​ getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据 ​ ctx.getImageData(sx, sy, sw, sh) sx:将要被提取的图像数据矩形区域的左上角 x 坐标。 sy:将要被提取的图像数据矩形区域的左上角 y 坐标
html5 canvas
yushuai12345的专栏
03-17 476
HTML5 Canvas 部分线条事件,JQuery 部分鼠标事件,然后利用这些知识制作一个“在线画板”的小应用 画板的基本原理 Canvas 部分线条事件 1 2 3 4 5 6 7 8 var canvas = document.getElementById('mycanvas'); var p100=
html格子像素画,HTML_纯手工打造CSS像素画，在cssplay网站看到有一组CSS像素 - phpStudy...
weixin_36436373的博客
06-03 413
纯手工打造CSS像素画在cssplay网站看到有一组CSS像素画，于是也想摩仿一下，于是在网络上找到一组头像图标，看其结构比较简单，就拿它开刀吧！先看看预览图图一基本原理：没有什么技术含量，主要是利用背景色和边框色来渲染每一个像素点，加上绝对定位，就可以变换出不同的风格。在制作一幅图片之前最好是将图片黑白风格化，然后用PS放大图片，将各个点的位置计算精确。剩下的事情就是无穷的耐心和细心了。a hr...
canvas像素化处理
包磊磊的博客
09-01 935
var myCanvas = document.getElementById("myCanvas"); var ctx =myCanvas.getContext('2d'); var imgObj = new Image(); imgObj.src = 'img/1.jpg'; imgObj.onload = function(){ ctx.drawImage(this,0,0,my
html5 操作canvas像素,htmlCanvas 像素级操作
weixin_39827304的博客
06-03 143
function showSprite(){Laya.loader.load("../src/img/testImg.png",Laya.Handler.create(this,graphicsImg));}function graphicsImg(){//临时spritevar img = new Laya.Sprite();//img.graphics.drawTexture(Laya.loa...
html格子像素画,有趣的CSS像素
weixin_39908070的博客
06-03 807
如今很多艺术被超清，高像素图片掩盖了光芒，像素艺术就是其中之一。我在逛CodePen的时候被一些像素作品惊呆了，它们又一次告诉了我像素艺术多么的了不起。很酷不是吗？像素图案是在高清和高分辨率的图片或插画上加一层简单柔和的蒙层合成的。这也是个教我们用HTML和CSS来创做像素艺术的好例子。让我们打破这个概念，建立一个可以在其他地方可用的模式。创建栅格首先，我们需要一个画布来绘制这个杰作。我们要创建一...
HTML5之canvas
Always_Love的博客
03-19 218
canvas 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 一、canvas api var canvas=document.querySelector("#canvas"); canvas.width=700; canvas.h...
HTML5 Canvas彩色渐变背景动画效果
06-11
这款基于HTML5 Canvas的彩色渐变背景动画效果，是利用Canvas API来实现的一种互动性极强的视觉特效。当鼠标在画布上移动时，背景颜色会随着鼠标的移动而产生渐变变化，为用户提供了生动且引人入胜的交互体验。 首先...
HTML5 canvas实现的像素化星云脉冲图动画效果源码.zip
11-03
在Canvas中，可以通过设置绘图上下文（`canvas.getContext('2d')`）的 `filter` 属性来应用像素化效果。例如，`context.filter = 'pixelate(10px)'` 将使画布上的所有内容看起来像是由10像素大小的方块组成的。 ...
HTML5 Canvas像素波浪动画特效特效代码
03-20
在这个场景中，我们关注的是"HTML5 Canvas像素波浪动画特效"，这是一种利用Canvas API创建的正弦波弧度波浪动画，通过像素块的动态变化来模拟水面波动的效果。 首先，要实现这样的动画，我们需要理解Canvas的基本...
像素艺术制作者：Udacity项目-JavaScript
02-11
像素艺术制作者计划 该项目适用于Udacity项目。 这个概念 提供了HTML和CSS文件。 目标是仅使用JavaScript创建供用户绘制的具有可自定义颜色的可自定义像素画布。
HTML5Canvas像素处理常用接口
03-02
内容概要：本文通过简单的代码实例，以及略猥琐的图片demo，展示了canvas在图像像素数据操作方面的常用接口。至于如何利用这几个接口实现更复杂的效果，则会在后续章节里继续讲述。一、canvas图片填充；2、设置/获取...
HTML5 Canvas像素处理使用接口介绍
09-28
HTML5 Canvas 提供了强大的像素级操作能力，使得开发者能够对图像进行深入处理。这篇文章主要介绍了如何使用 Canvas API 进行像素处理，包括填充图片、获取与设置像素数据，以及创建和操作 ImageData 对象。 首先，...
web前端：canvas像素化-马赛克mosaic案例，原生js实现图片马赛克复制、覆盖
cevent的博客
01-26 1351
1.canvas图片马赛克原理及区间解析 *每一个mosaic马赛克矩形坐标(i,j) * x=i y=j * mosaic马赛克(0,0)–>纵代表:(0,0) (4,4) -->随机生成像素点区间[0-4] [0-4] * mosaic马赛克(1,0)–>纵向代表：(5,0) (9,4) -->随机生成像素点区间[5-9] [0-4] * mosaic马赛克(0,0
用 canvas 操作图片像素
qq_42062727的博客
05-02 2425
canvas 像素操作 在 canvas 中可以使用 context.drawImage(image,dx,dy) 方法将图片绘制在 canvas 上。将图片绘制上去后，还可以使用 context.getImageData(sx, sy, sw, sh) 方法获取 canvas 区域隐含的像素数据，该方法返回一个 ImageData 对象，里面包含的是 canvas 像素信息。 getImageD...
canvas实现图片像素化（可调整像素大小、替换图片）
stay hungry, stay foolish
08-15 461
通过调整像素大小实现图片像素化效果，也可以对图片进行替换。通过 Canvas 的 getImageData方法获取图片的像素数据。
html5像素处理,HTML5 Canvas像素操作
weixin_29027305的博客
06-03 422
本文介绍Canvas中强大的像素操作功能。这是非常有价值的一个功能，有了这一功能，就可以直接访问Canvas底层像素数据。注意 由于人们可以直接操纵像素数据，因此出现了某些人利用从Canvas直接获取并且修改数据的能力做出一些恶意和非法的行为。浏览器限制了人们用Canvas跨域获取图片数据的能力，非同域图片禁止读取和修改，在像素操作的过程中，ImageData 对象保存了图像像素值。每个对象有3个...
canvas 像素操作（图片像素操作）
qq_17627195的博客
08-01 2410
ImageData对象中的每个像素都保存了rgba色值的四个值，这四个值以数组形式存在，并存储于ImageData对象的data属性中，并且是将所有的像素的rgba信息存到了一个一维数组里面。getImageData()方法返回ImageData对象，该对象拷贝了画布指定矩形的像素数据。ImageData对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息。方法将图像数据（从指定的ImageData对象）放回画布上。方法直接看下面的教程就可以，一看就明白了。......
中秋之美——html5+css+js制作中秋网页
最新发布
Timi2019的博客
09-02 1324
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
HTML5 Canvas像素处理实战与常用接口详解
本文主要介绍了HTML5 Canvas在像素处理方面的常用接口，这些接口使得开发者能够直接操作网页中的像素数据，从而实现各种动态和定制化的图像效果。首先，我们来详细探讨以下几个关键点： 1. **canvas图片填充**: `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值