img 黑白版与彩色版切换

Posted 绮梦璇玑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了img 黑白版与彩色版切换相关的知识,希望对你有一定的参考价值。

function converttoGS(img) {
img.color = img.src;

img.grayscale = createGSCanvas(img);
img.onmouseover = function () {
this.src = this.color;
}
img.onmouseout = function () {
this.src = this.grayscale;
alert(this.src)
}
}
function createGSCanvas(img) {
var canvas = document.createElement(‘canvas‘);
canvas.width = img.width;
canvas.height = img.height;

var ctx = canvas.getContext(‘2d‘);
ctx.drawImage(img,0,0);

var c = ctx.getImageData(0,0,img.width,img.height);
for(var i = 0; i <c.height;i++){
for(var j = 0; j<c.width; j++){
var x = (i*4)*c.width+(j*4);
var r = c.data[x];
var g = c.data[x+1];
var b = c.data[x+2];
c.data[x] = c.data[x+1] = c.data[x+2]=(r+g+b)/3;
}
}

ctx.putImageData(c,0 ,0,0,0,c.width,c.height)
return canvas.toDataURL();
}

以上是关于img 黑白版与彩色版切换的主要内容,如果未能解决你的问题,请参考以下文章

hp452打印黑白怎么调成打印彩色

如何将 WORD中将彩色图片变成灰度图 或 黑白图 ?

scss 将图像从黑白变为彩色,仅限CSS,仅使用一个彩色图像

Java将彩色PDF转为灰度(黑白)

CSS:如何将彩色图像转换为灰色或黑白图像[重复]

注册日本商标时,该利用彩色?还是黑白?