在網頁設計中，使用灰度是一種常見的技巧，能夠使網頁更加美觀。然而，在微信小程序中，我們會發現使用CSS灰度屬性會出現無效的情況。

img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
}

以上代碼是使用CSS的灰度屬性來將圖片轉化為黑白的代碼。然而，在微信小程序中，這個代碼是無效的。在微信開發者工具中，控制臺會提示“Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The source width and height dimensions are not valid.”。

造成這個問題的原因是微信小程序中Canvas的限制。微信小程序內置的Canvas是一個與瀏覽器Canvas不完全相同的對象，它只支持圖片上傳并進行縮放、旋轉等簡單的操作，并不支持灰度濾鏡等圖像操作。

所以，在微信小程序中想要實現灰度效果的圖片，我們需要使用其他的方法，比如JavaScript的灰度算法。

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// Draw original image to canvas
var image = new Image();
image.onload = function () {
canvas.width = image.width;
canvas.height = image.height;
// Draw image to canvas
ctx.drawImage(image, 0, 0);
// Get image data
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
// Apply grayscale algorithm
for (var i = 0; i< data.length; i += 4) {
var grayscale = 0.3 * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];
data[i] = grayscale;
data[i + 1] = grayscale;
data[i + 2] = grayscale;
}
// Set modified data back to canvas
imageData.data = data;
ctx.putImageData(imageData, 0, 0);
// Get data URL of modified image
var dataURL = canvas.toDataURL();
// Set image source to modified image
img.src = dataURL;
}
// Load image
image.src = 'image.jpg';

以上代碼是使用JavaScript的灰度算法來將圖片轉化為黑白的代碼。這個代碼可以在微信小程序中正常使用。在這個算法中，我們先將原始圖片繪制到Canvas對象中，再從Canvas對象中獲取圖片的像素數據，并在像素數據上運行灰度算法，最后將修改后的像素數據繪制到Canvas對象中，并獲取繪制后的圖片的數據URL，用于顯示修改后的圖片。

總之，雖然在微信小程序中使用CSS的灰度屬性是無效的，但是我們可以使用JavaScript的灰度算法來實現相同的效果。