我正在使用这个js：http://www.jqueryscript.net/other/jQuery-Image-Processing-Plugin-With-Canvas-Tancolor.html
这个插件正在做什么，它将我的画布转换为黑白并将其保存在我的网页上的IMG标签中。
以下是此插件使用的javascript：
(function ($) {
$.fn.tancolor = function(options) {
var settings = $.extend({
mode: 'grayscale',
r_weight: 0.34,
g_weight: 0.5,
b_weight: 0.16,
r_intensity: 1,
g_intensity: 1,
b_intensity: 1,
load: null
}, options );
var r_weight;
var g_weight;
var b_weight;
var r_intensity;
var g_intensity;
var b_intensity;
// settings value
switch(settings.mode){
case 'grayscale':
r_weight = 0.34;
g_weight = 0.5;
b_weight = 0.16;
r_intensity = 1;
g_intensity = 1;
b_intensity = 1;
break;
case 'red':
r_weight = 0.34;
g_weight = 0.5;
b_weight = 0.16;
r_intensity = 255;
g_intensity = 1;
b_intensity = 1;
break;
case 'green':
r_weight = 0.34;
g_weight = 0.5;
b_weight = 0.16;
r_intensity = 1;
g_intensity = 255;
b_intensity = 1;
break;
case 'blue':
r_weight = 0.34;
g_weight = 0.5;
b_weight = 0.16;
r_intensity = 1;
g_intensity = 1;
b_intensity = 255;
break;
default:
r_weight = settings.r_weight;
g_weight = settings.g_weight;
b_weight = settings.b_weight;
r_intensity = settings.r_intensity;
g_intensity = settings.g_intensity;
b_intensity = settings.b_intensity;
break;
}
// convert image to canvas
var img = document.getElementById($(this).attr("id"));
if(settings.load){
img.src = settings.load;
return;
}
var canvas = convertImageToCanvas(img);
var ctx = canvas.getContext("2d");
var imageData = ctx.getImageData(0, 0, img.width, img.height)
$(this).replaceWith(canvas);
// Processing image data
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
var brightness = r_weight * data[i] + g_weight * data[i + 1] + b_weight * data[i + 2];
// red
data[i] = r_intensity * brightness;
// green
data[i + 1] = g_intensity * brightness;
// blue
data[i + 2] = b_intensity * brightness;
}
ctx.putImageData(imageData, 0, 0);
$('#'+$(this).attr("id")).each(function(i,e){
var img = e.toDataURL("image/png");
$(e).replaceWith( $('<img src="' + img + '"/>').attr({width: $(e).attr("width"), height: $(e).attr("height"), style: $(e).attr("style") }) ) });
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
if(image.id) {
canvas.id = image.id;
}
if(image.className) {
canvas.className = image.className;
}
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
};
}(jQuery));
我真正想要的只是将我的画布转换为黑白，但仅在网页上将其保存在canvas标签中而不是像我一样将IMG标签保存为下载与应用程序中的另一个画布合并的灰度画布。
任何帮助将不胜感激。
由于
答案 0 :(得分：0)
要在兼容的浏览器上灰度显示不透明的图像，你可以简单地 [如果Safari没有这个奇怪的错误，你应该是能够] 使用context.globalCompositeOperation属性并在您绘制纯色后将其设置为'luminosity'，然后再转到getImageData解决方案：
var img = new Image();
var ctx = canvas.getContext('2d');
img.onload = function() {
// set the canvas' size
canvas.width = this.width;
canvas.height = this.height;
// first fill a rect
ctx.fillStyle = 'white'
ctx.fillRect(0, 0, canvas.width, canvas.height);
// set the gCO
ctx.globalCompositeOperation = 'luminosity';
// if the browser doesn't support Blend Modes
console.log(ctx.globalCompositeOperation)
if (ctx.globalCompositeOperation !== 'luminosity')
fallback(this);
else {
// draw the image
ctx.drawImage(this, 0, 0);
// reset the gCO
ctx.globalCompositeOperation = 'source-over';
}
}
img.crossOrigin = "anonymous";
img.src = "https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png";
function fallback(img) {
// first remove our black rectangle
ctx.clearRect(0, 0, canvas.width, canvas.height);
//draw the image
ctx.drawImage(img, 0, 0);
// get the image data
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var d = imgData.data;
// loop through all pixels
// each pixel is decomposed in its 4 rgba values
for (var i = 0; i < d.length; i += 4) {
// get the medium of the 3 first values
var med = (d[i] + d[i + 1] + d[i + 2]) / 3;
// set it to each value
d[i] = d[i + 1] = d[i + 2] = med;
}
// redraw the new computed image
ctx.putImageData(imgData, 0, 0);
}<canvas id="canvas"></canvas>
但是因为Safari有一个bug而且gCO解决方案（速度更快，但我认为它对你很重要）删除了透明像素，这里只是前面的后备，这是比你得到的代码更简单的代码。我希望你能阅读它。
var img = new Image();
var ctx = canvas.getContext('2d');
img.onload = function() {
// set the canvas' size
canvas.width = this.width;
canvas.height = this.height;
//draw the image
ctx.drawImage(this, 0, 0);
// get the image data
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var d = imgData.data;
// loop through all pixels
// each pixel is decomposed in its 4 rgba values
for (var i = 0; i < d.length; i += 4) {
// get the medium of the 3 first values ( (r+g+b)/3 )
var med = (d[i] + d[i + 1] + d[i + 2]) / 3;
// set it to each value (r = g = b = med)
d[i] = d[i + 1] = d[i + 2] = med;
// we don't touch the alpha
}
// redraw the new computed image
ctx.putImageData(imgData, 0, 0);
}
img.crossOrigin = "anonymous";
img.src = "https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png";<canvas id="canvas"></canvas>