当鼠标悬停时,如何让普通图像变为黑白,当鼠标悬空时恢复正常?使用HTML5画布的jQuery - BW效果
-1
A
回答
1
从http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html:
(评论我自己的)
// create canvas element
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
// assuming imgObj is a DOM representation of your image, get the width
var imgW = imgObj.width;
// ... and the height
var imgH = imgObj.height;
// set the canvas to the image dimensions
canvas.width = imgW;
canvas.height = imgH;
// draw the image on the canvas
canvasContext.drawImage(imgObj, 0, 0);
// get every pixel in the image
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
// cycle through the pixels vertically
for(>var y = 0; y < imgPixels.height; y++){
// cycle through the pixels horizontally
for(>var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
// create an average grayscale color for the pixel
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3;
// set the pixel to the newly created average color
imgPixels.data[i] = avg;
// do the same for the next two pixels
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
// overwrite the canvas image with the newly created array of pixels
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
// get a data URL which is to be used in the SRC attribute of the image
return canvas.toDataURL();
此外,如果你想有一个 '插件和播放' jQuery插件为你做到这一点,需要看看this jQuery plugin that desaturates the image for you。
+0
嵌套fors有点难看,如果你使用imgPixels.length – 2011-05-01 11:05:06
0
这里将是功能,因为我看到它:
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
这里将是CSS:
div.fadehover {
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
我得到这个从这里:http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
相关问题
- 1. 淡出文字效果在HTML5画布
- 2. 使用HTML5画布文本 - SEO后果
- 3. 用jQuery启动纸屑效果(画布)
- 4. 基本动画效果 - 我应该使用jQuery还是HTML5 Canvas?
- 5. Android的等效HTML5画布CompositeOperation
- 6. 动画选项HTML5画布/ CSS3/jQuery
- 7. 从HTML5画布
- 8. 关于android画布效果的效率
- 9. 的drawImage使用HTML5画布的toDataURL
- 10. 如何为每个切片添加悬停效果(html5画布)
- 11. HTML5使用画布旋转图像
- 12. 画布绘制效果
- 13. HTML画布效果 - 图像
- 14. jQuery数组语法中的html5画布
- 15. HTML5画布,smoothZoom
- 16. HTML5画布getPixel
- 17. 在HTML5画布
- 18. HTML5画布,GUI
- 19. HTML5画布时使用的ID选择
- 20. Firefox和的RadialGradient(使用HTML5画布)
- 21. 使用html5画布的径向文本
- 22. 使得HTML5画布互动
- 23. Html5,JavaScript,画布动画?
- 24. 画布专业绘画效果
- 25. HTML5画布,使用jspdf.js将画布转换为PDF
- 26. HTML5画布线条画
- 27. HTML5画布鼠标
- 28. html5画布问题
- 29. 使用HTML5画布绘制方程
- 30. 小工具使用HTML5画布或Javascript
你想要做手工或者你想要一个可以做到这一点的图书馆? – 2011-05-01 11:02:04