javascript - 图像未出现在 Canvas 上

Question

我是第一次使用 Canvas ，我正在练习从图像获取数据以更改其属性。问题是我正在使用这段代码:

       <script type="text/javascript" src="jquery-3.3.1.min.js">
       </script>
       <script type="text/javascript">
        $(document).ready(inicio);
        function inicio() {
        setTimeout(drawing(),100000);
        }
        function drawing() {
        var canvas = document.getElementById("cnv1");
        var context = canvas.getContext("2d");

        var img = new Image();
        img.src = "tomatoes.jpg"
        context.drawImage(img, 10, 10);

        var imageData = context.getImageData(0, 0, 500, 500);
        var data = imageData.data;

        /*for (var i=0; i<data.length; i+= 4) {
            data[i]   = 255-data[i];
            data[i+1] = 255-data[i+1];
            data[i+2] = 255-data[i+2];

        }*/

        /*for (var i=0; i<data.length; i+= 4) {
            data[i]   = data[i]+100;
            data[i+1] = data[i+1]+100;
            data[i+2] = data[i+2]+100;

    }*/

        for (var i=0; i<data.length; i+= 4) {
            data[i]   = data[i]-100;
            data[i+1] = data[i+1]-100;
            data[i+2] = data[i+2]-100;

        }

         context.putImageData(imageData,0,0)

    }
</script>
<style type="text/css">
    canvas {
        border: 1px solid black;
    }
</style>

我得到了 For 方法的正确结果，我的问题是大多数时候图像根本不加载，它只出现在一页刷新上，下一次刷新就消失了，它没有好好工作。有什么想法吗？

Answer 1

接下来是我的代码，但它在 Stack Overflow 上不起作用。您必须复制代码并在计算机中进行测试。您可以在 Codepen project 中看到它的工作原理。

重要提示:您必须使用您网站上的图像。否则，您将收到如下错误:Uncaught DOMException: Failed toexecute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 是的，有一些方法可以规避这个问题。并不总是工作

对代码的观察:请不要这样做:data[i]-100 因为 data[i] 可能小于 100。

function drawing() {
  var data;
  var canvas = document.getElementById("cnv1");
  var cw = (canvas.width = 270);
  var ch = (canvas.height = 250);
  var context = canvas.getContext("2d");

    var img=new Image();
                    img.src = "image.jpg";
                    img.onload = function() {
                    context.drawImage(this, 10, 10);

    var imageData = context.getImageData(0, 0, 270, 250);
    data = imageData.data;

    console.log(imageData.data)


    for (var i = 0; i < data.length; i += 4) {
      data[i] = 255 - data[i];
      data[i + 1] = 255 - data[i + 1];
      data[i + 2] = 255 - data[i + 2];
    }

    context.putImageData(imageData, 0, 0);
  }
}
drawing()

<canvas id="cnv1"></canvas>