<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PaoPaoGame</title>
<!-- <script type="text/javascript" src="src/Main.js"></script> -->
<script type="text/javascript">
var context = null;
var image = null;
function loadImage() {
var main = document.getElementById("maincanvas");
if(main == null)
return false;
context = main.getContext("2d");
drawImage();
}
function drawImage() {
//反色效果
var imgSrc = document.getElementById("image");
context.drawImage(imgSrc, 0, 0);
var imgd = context.getImageData(0, 0, 398, 552);
var pix = imgd.data;
for(var i = 0, n = pix.length; i < n; i += 4) {
pix[i] = 255 - pix[i];
pix[i + 1] = 255 - pix[i + 1];
pix[i + 2] = 255 - pix[i + 2];
}
context.putImageData(imgd, 0, 0, 398, 552);
//透明度效果
var imgSrc_alpha = document.getElementById("image_alpha");
context.drawImage(imgSrc_alpha, 400, 0, 398, 552);
var imgd_alpha = context.getImageData(400, 0, 398, 552);
var pix_alpha = imgd_alpha.data;
for(var j = 3, n = pix_alpha.length; j < n; j += 4) {
pix_alpha[j] = pix_alpha[j] * 0.2;
}
context.putImageData(imgd_alpha, 400, 0, 398);
}
</script>
</head>
<body onLoad="loadImage()">
<canvas id="maincanvas" width ="800" height ="600" >
<img src="images/other/1.png" width="398" height="552" id="image" />
<img src="images/other/2.png" width="398" height="552" id="image_alpha"/>
Sorry, your browser doesn't support canvas, please use Firefox3.6+, Safari5+, Chrome, IE9 etc.
</canvas>
</body>
</html>
也可以外部调用JS
// JavaScript Document
Main.js
var main ;
var context = null;
function loadImage() {
main = document.getElementById("maincanvas");
if(main == null)
return false;
context = main.getContext("2d");
drawImage();
}
function drawImage() {
var image = new Image();
image.src = "images/other/kboom.png";
image.onload = function() {
context.drawImage(image, 0, 0);
var imgd_alpha = context.getImageData(0, 0, 398, 552);
var pix_alpha = imgd_alpha.data;
for(var j = 3, n = pix_alpha.length; j < n; j += 4) {
pix_alpha[j] = pix_alpha[j] * 0.2;
}
context.putImageData(imgd_alpha, 0, 0);
};
}
分享到：
相关推荐
在Java编程语言中，实现视频反色效果是一项挑战性的任务，涉及到图像处理和色彩理论的知识。反色，也称为负片效果，是将图像或视频中的颜色反转的过程，通常通过取颜色的补色来实现。在本文中，我们将深入探讨如何在...
在VB（Visual Basic）编程环境中，我们可以利用图像处理技术来实现图像的各种效果，如锐化、浮雕和反色。这些效果的实现基于图像处理的基本原理，涉及到像素操作和颜色模型的理解。 首先，图像的锐化是通过增强图像...
这个压缩包"几种效果(模糊,鹰眼,镜头,反色,黑白)的代码.rar"包含了实现特定图像处理效果的代码，让我们逐一探讨这些效果及其背后的原理。 1. **模糊效果**： 模糊效果通常用于降低图像细节，使得图像整体显得柔和...
反色算法主要用于将图像中的每个像素的颜色值进行反转，从而产生一种与原图颜色相反的效果。这种技术在多种应用场景中都有所应用，比如图像调试、艺术效果创建以及一些视觉辅助工具。 在本科阶段学习图像处理时，...
"Bmp图像反色处理"是指对BMP图像中的像素颜色进行反转，形成与原图色彩相反的效果。256位的Bmp图像指的是每个像素有256种可能的颜色，这通常对应于8位深度的彩色图像，因为2^8=256。这种图像的每个像素由8个二进制位...
在艺术创作中，反色可以带来独特的视觉效果；在打印和复制过程中，反色可以确保颜色在不同媒介上的正确呈现。 此外，理解反色还需要了解位运算的概念。在二进制系统中，图像的像素值可以被视为二进制位的组合，反色...
这个函数执行按位非操作，将每个像素值与255（对于8位图像）进行异或操作，从而得到反色效果。 下面是一个简单的Python脚本示例，展示了如何批量处理一个名为"picture"的文件夹中的所有图片： ```python import os...
根据给定的信息，本文将详细解释几种图像处理效果（模糊、鹰眼、镜头、反色、黑白）在J2ME平台上的实现原理及代码逻辑。这些效果广泛应用于移动设备的应用程序开发中，尤其是在游戏和多媒体应用领域。 ### 模糊效果...
5. **环境贴图（Environment Map）**: 对于高级的镜面反色效果，可以使用环境贴图来模拟周围环境对物体的反射。这通常是通过立方体贴图（Cubemap）实现，它记录了六个面的环境图像，可以提供一个全方位的反射效果。 ...
在计算机视觉和图像处理领域，反色处理是一种常见的图像操作，它通过反转图像中的像素颜色来达到特定的效果。在VC++环境下，我们可以利用MFC（Microsoft Foundation Classes）库或者直接操作位图数据来实现这一功能...
在"IP101_VideoReverse"这个文件中，可能包含了一个视频素材，用于演示或练习图像反色的效果。视频处理通常涉及帧级别的操作，因此每帧图像都会经过反色处理，生成反色后的视频流，从而直观地展示图像反色的过程。 ...
下面将详细介绍图片反色处理及其相关的技术。 一、图片反色原理 图片反色，也称为图像反转或负片效果，是通过改变图像像素的色彩值来实现的。在传统的胶片摄影中，负片的每个颜色像素对应于实际场景中相反的颜色。...
在这个“易语言实现桌面反色(用了精易模块)------可以下载研究”的项目中，开发者使用易语言及其配套的精易模块来实现了桌面反色的功能。这个功能在视觉效果上会将用户的桌面背景颜色反转，可以作为一种趣味性的...
Alpha通道反色涉及透明度，可能会改变图像的透明度级别。局部反色则是仅对图像的一部分进行反色，常常用于图像特效或者特定区域的处理。 在设计和艺术领域，反色效果常用于创意设计，如海报、广告、电影海报等，以...
// 使用Graphics对象的DrawImage方法，应用反色效果 graphics.DrawImage(originalImage, new Rectangle(0, 0, originalImage.Width, originalImage.Height), 0, 0, originalImage.Width, originalImage.Height, ...
在数字图像处理领域，"反色...总的来说，通过VC++和MFC库，我们可以便捷地实现数字图像的反色处理，从而在各种应用场景中调整和增强图像的视觉效果。这是一个基础但实用的技术，对于学习图像处理和编程都具有重要意义。
在MFC中，你可以选择只对红色通道进行反色操作，保留绿色和蓝色通道不变，以达到特定效果。这可以通过调整上述代码中的反色部分实现： ```cpp r = 255 - r; g = g; // 保持绿色不变 b = b; // 保持蓝色不变 ``` 在...
在计算机图形学中，"图像反色"是一种常见的图像处理技术，它将图像中的颜色反转，使得黑色变为白色，白色变为黑色，以及其他颜色也相应地进行互补变换。这个过程通常用于增强图像的对比度或者在某些情况下进行图像的...
在艺术创作中，反色可以产生独特的视觉效果。此外，图像反色也是图像二值化的一个预处理步骤，二值化是将图像转化为黑白两色，便于后续的文本识别或边缘检测等任务。 总的来说，"图像反色"是数字图像处理中的基础...
本示例将详细介绍如何使用VC++编写一个程序，实现图片的反色效果。图片反色，又称为色彩反转或色彩倒置，是一种常见的图像处理技术，它将图像中的每个像素的颜色取其补色，从而达到一种视觉上的对比效果。 首先，...