Created by Jerry Wang, last modified on Jul 31, 2014

SE80，创建一个新的BSP application. 上传一副图片，例如map.png.

2. 创建一个新的page ( with flow logic).

html code如下:

<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var image = document.getElementById("imageSource");
// re-size the canvas deminsion
canvas.width = image.width;
canvas.height = image.height;
// get 2D render object
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
alert(canvasData.width.toString());
alert(canvasData.height.toString());
// gray filter
for ( var x = 0; x < canvasData.width; x++) {
for ( var y = 0; y < canvasData.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasData.width) * 4;
var r = canvasData.data[idx + 0];
var g = canvasData.data[idx + 1];
var b = canvasData.data[idx + 2];
// calculate gray scale value
var gray = .299 * r + .587 * g + .114 * b;
// assign gray scale value
canvasData.data[idx + 0] = gray; // Red channel
canvasData.data[idx + 1] = gray; // Green channel
canvasData.data[idx + 2] = gray; // Blue channel
canvasData.data[idx + 3] = 255; // Alpha channel
// add black border
if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
{
canvasData.data[idx + 0] = 0;
canvasData.data[idx + 1] = 0;
canvasData.data[idx + 2] = 0;
}
}
}
context.putImageData(canvasData, 0, 0); // at coords 0,0
};
</script>
</head>
<body>
<h2>Hello World!</h2>
<img id="imageSource" src="map.png" alt="Canvas Source" />
<canvas id="myCanvas" >Gray Filter</canvas>
</body>
</html>

3. 测试效果如下:

用SAP BSP应用实现图片灰度效果相关推荐

html一张图片用两种滤镜,HTML图片CSS滤镜—灰度效果
this.p={ m:2, b:2, loftPermalink:'', id:'fks_082065087087086069087082087095083084084067083083082065' ...
Java中的实现马赛克效果以及灰度效果----整张图片
** Java中的实现马赛克效果以及灰度效果-----整张图片 ** 实现该效果的思路: 我们知道图片是由一个一个的像素组成的,比如一张图片的分辨率为800 * 800,则它是由800个像素 * 80 ...
background-image属性设置图片尺寸_Matlab | 批量修改图片尺寸及图片灰度化
介绍: 在情绪认知的心理学实验中,我们从不同的人脸图片库获取实验所需的实验材料.在正式使用之前往往需要对人脸进行预处理,以控制无关变量对实验结果的影响.常见的预处理有将图片修改为统一尺寸.灰度化.本文 ...
有趣的6种图片灰度转换算法
本文转载自blog 转载请注明出处前言黑白照片的时代虽然已经过去,但现在看到以前的照片,是不是有一种回到过去的感觉,很cool有木有~ 看完这篇文章,就可以把彩色照片变成各种各样的黑白的照片啦. ...
golang实现图片颜色反转、图片灰度、缩放、转为字符画
看到网上很多通过字符形成的画,觉得很好玩,于是网上搜索了下原来叫字符画. 见百度百科:https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E7%94%BB/ ...
搭建Android+QT+OpenCV环境，实现“单色图片着色”效果
OpenCV是我们大家非常熟悉的图像处理开源类库:在其新版本将原本在Contrib分库中的DNN模块融合到了主库中,并且更新了相应文档.这样我们就能够非常方便地利用OpenCV实现一些属于DeepLe ...
Python 利用4行代码实现图片灰度化
背景不论是在进行深度学习时的图片处理,还是在商业用途出版书刊,基本都会用到对图片进行灰度转换,也就是灰度化,本文章利用简单的4行代码来快速实现图片灰度化,仅供参考效果实现代码 from PIL ...
3 - 图片灰度化与转换为八位灰度图片
参考资料:彩色图像灰度化图片灰度化与转换为八位灰度图片 1.灰度化公式 2.24 位真彩图灰度化 3.24 位真彩图转换成 8 位灰度图片 1.灰度化公式彩色图像灰度化的算法公式一般有如下两种:明 ...
python漫画滤镜怎么实现的_OpenCV图片漫画效果的实现示例
我们随手拍摄的照片,很难达到摄影师的水准,因此不管是手机上还是电脑内,都有一些软件可以添加特效让照片更好看,手机拍摄时也有即时的美化效果.不过我比较好奇漫画特效,但是一直在网上看到别人的成品而找不到针 ...

用SAP BSP应用实现图片灰度效果

Created by Jerry Wang, last modified on Jul 31, 2014

用SAP BSP应用实现图片灰度效果相关推荐

最新文章

热门文章