文章/答案/技术大牛

发布

问倒置颜色HTML5画布教程
EN

Stack Overflow用户

提问于 2014-06-05 10:32:35

回答 1查看 761关注 0票数 0

因此，这个网站http://www.html5canvastutorials.com/advanced/html5-canvas-invert-image-colors-tutorial/有一个反向颜色教程。我一直在尝试做一些类似的事情，虽然我没有错误，但它不起作用。另外，我在本地服务器上运行它，因为我最初遇到了安全错误，它停止了正常运行，现在Chrome在代码中运行没有问题。我只是没看到屏幕上有任何变化。我决定将他们的代码转换到JSFiddle中，只是为了看它是否正常工作，然后通过改变值来学习，但是当我点击run时，darth图像并没有倒置。这是否意味着他们的示例代码遗漏了一些东西，并解释了为什么我没有看到我正在做的事情有任何变化？

谢谢你的帮助。

应请求http://jsfiddle.net/user69247/fMwp5/1/

(很抱歉，它希望代码也能发布，因为我有jsfiddle链接)

<html>
  <head>
   <style>
     body {
     margin: 0px;
     padding: 0px;
  }
</style>
 </head>
 <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
      function drawImage(imageObj) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 69;
    var y = 50;

    context.drawImage(imageObj, x, y);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

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

    // overwrite original image
    context.putImageData(imageData, x, y);
  }

  var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };
  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>

javascript

html

canvas

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-06-05 11:14:57

问题是您需要使用本地托管的映像-或数据url。我所犯的错误是有一个跨浏览器的问题。下面的修改小提琴工作正常。

image.src = 'data:image/png;base64,iVBOR....seefiddle'

http://jsfiddle.net/fMwp5/2/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24057839

复制

相似问题

问倒置颜色HTML5画布教程
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问倒置颜色HTML5画布教程EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问倒置颜色HTML5画布教程
EN