在Wordpress中自动将用户上传转换为灰度

Question

你好,

我目前正在为一个客户端开发一个Wordpress站点，它使用和WooCommerce相结合来销售定制的刻字记忆体。石头是黑色的，雕刻是激光蚀刻，产生美丽的灰阶文字和图像。

客户端希望上传给设计人员的图像是灰度的，这样客户就不会对彩色打印产生不切实际的期望，而这是客户无法提供的。

是我们大多数问题的解决方案，但是CSS无法访问设计器中的各个元素，因为它们是通过插件的HTML5 JQuery绘制在JQuery上的。我们最初的解决方案是将灰度CSS覆盖应用于整个画布元素，但这会混淆设计器原生的红色错误消息。

我认为解决方案是找到一个插件或方法，在将它们作为元素应用到画布上之前，自动将用户上传转换为灰度。

请帮帮我！

Answer 1

事实证明，使用Fabric.js来控制其<canvas>标记。只需要几行代码：

var d = $("div.outermost"); //Outermost <div> containing the <canvas>.
var canvas = new fabric.Canvas('id');
var filter = new fabric.Image.filters.Grayscale();
d.on('elementAdded', function(evt, element){
    element.filters.push(filter);
    element.applyFilters(canvas.renderAll.bind(canvas));
});

这只是将灰度过滤器应用于元素，因为元素包含在画布中，而不必使用复杂的插件或进程。到这里来了解关于Fabric.js画布法的更多信息。

Answer 2

我不能评论，因为我缺乏代表，但有一个教程，允许在画布中的图像灰度缩放。这可以通过使用图像过滤器，单独读取图像的每个像素，然后去强调颜色，使它们是灰色的。看看这里