新手上路，请多包涵

基本上，单击按钮时，它会告诉移动设备转到相机。相机拍照后，它会给我图像数据（它叫做数据 URL 吗？）。这是我处理它的代码：

 var imagesrc = "data:image/jpeg;base64," + imageData;

var myimage = new Image(500, 500);
myimage.src = imagesrc;            <---- to populate the object with the colored image
myimage.src = grayscale(myimage);  <---- here I set it to the grayscale image

我想调用一个名为 grayscale() 的方法并让它返回已经变成灰度的图像。我试过这个：

 function grayscale(image){
    var canvasContext = canvas.getContext('2d');
    var imgW = image.width;
    var imgH = image.height;
    canvas.width = imgW;
    canvas.height = imgH;

    canvasContext.drawImage(image, 0, 0);

    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

    for(>var y = 0; y < imgPixels.height; y++){
        for(>var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          imgPixels.data[i] = avg;
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
        }
    }

    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

    dataurl = canvas.toDataURL();
    var newimg = "data:image/jpeg;base64," + dataurl;
    return newimg;
}

但由于某种原因，它不起作用。它只是不显示灰度图像。我在线获取了 for 循环代码并对其进行了调整。

原文由 Mingle Li 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript 图片 data-url

阅读 1.3k

2 个回答

得票最新

社区维基

发布于
2022-12-15

✓ 已被采纳

这不起作用有几个原因。开始检查控制台输出以跟踪错误对您来说是一件好事。例如，Firefox“F12”会告诉您 for(>var ...) 是一个问题。 ;)

您是否在您与我们共享的代码之外的某处声明了 canvas ？ dataurl 声明了吗？不需要 toDataUrl 的前缀…

这是我围绕您的 for 循环键入的基本 html 文件，它确实将“test.png”变为灰色。也许您想将其保存在某个地方，将 png 放入同一个文件夹，然后开始逐步编辑内容，而不是复制代码。如果您愿意接受挑战，请尝试让它通过 http://jslint.com/ ！（我猜你必须用 while 循环替换 for 循环）。 :)

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Canvas/ImgData Test</title>
</head>

<body>
    <canvas id="output"></canvas>
    <script>
        var cnv = document.getElementById('output');
        var cnx = cnv.getContext('2d');

        function grey(input) {
            cnx.drawImage(myimage, 0 , 0);
            var width = input.width;
            var height = input.height;
            var imgPixels = cnx.getImageData(0, 0, width, height);

            for(var y = 0; y < height; y++){
                for(var x = 0; x < width; x++){
                    var i = (y * 4) * width + x * 4;
                    var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                    imgPixels.data[i] = avg;
                    imgPixels.data[i + 1] = avg;
                    imgPixels.data[i + 2] = avg;
                }
            }

            cnx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        }

        var myimage = new Image();
        myimage.onload = function() {
            grey(myimage);
        }
        myimage.src = "test.png";
    </script>
</body>
</html>

原文由 Jonas M. Schlatter 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-15

我知道您正在寻找 将 dataURI 转换为灰度但是，如果您想将视频反馈本身转换为灰度或将任何图像转换为灰度，您可以使用此代码。

 .gray {
  filter: grayscale();
}

  <!--hey use this style to show in gray scale. can even use to convert image to grayscale-->
 <video id="camera-stream" class="gray" ></video>

原文由 ATUL ANAND 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

JS - 如何将Image对象变成灰度并显示

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译