javascript - 将 stackblur 与 Canvas 一起使用不会模糊我的图像

Question

我有这个 JavaScript 代码:

// Canvas
var canvas = document.getElementById("canvas");
var cctx = canvas.getContext("2d");
var buff = document.createElement("canvas");
buff.width = canvas.width;
buff.height = canvas.height;

  var imageObj = new Image();
  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
  imageObj.onload = function() {
    cctx.drawImage(imageObj, 0, 0);
  };
// Slider
var slider = document.getElementById("slider");
slider.addEventListener("change", function() {
    cctx.drawImage(imageObj, 0, 0);
    stackBlurImage(imageObj, canvas, slider.value,false);
}, false);

这里是 HTML:

<canvas id="canvas" width="200" height="200"></canvas>
<div>
    <input type="range" min="0" max="50" value="0" id="slider" />
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="dist/stackblur.js"></script>

为什么当我拖动 slider 时我的图像没有获得模糊效果？我的代码中有错误吗？

Answer 1

@jafarbtech 正确指出的你的第一个错误确实是一个拼写错误:您编写了 StackBlurImage()，而正确的语法是 StackBlur.image(。

然后，如果您遇到与 @jafarbtech 的答案相同的错误，那是因为 StackBlur 在应用模糊算法之前使用 getImageData 读取图像的像素数据。

此处发送的图像违反了 CORS 限制，这确实会污染 Canvas ，这意味着任何导出方法都将被阻止(包括 getImageData)。因此，该插件无法在受污染的 Canvas 上执行任何操作。

要避免此问题，请仅传递来自与脚本相同域的图像_{(注意:file:// 协议(protocol)也不起作用)}。

在下面的演示中，我将使用其他解决方案，该解决方案需要服务器提供正确设置的资源。

// Canvas
var canvas = document.getElementById("canvas");
var cctx = canvas.getContext("2d");
var buff = document.createElement("canvas");
buff.width = canvas.width;
buff.height = canvas.height;

  var imageObj = new Image();
  // this will make CORS happy because the server is well configured
  imageObj.crossOrigin = 'anonymous';
  // Easiest is to always host your images on your own server
  imageObj.src = 'https://dl.dropboxusercontent.com/s/8q8sjnqmmto13h5/lionCMYK.jpg';
  imageObj.onload = function() {
    canvas.width = imageObj.height;
    canvas.height = imageObj.height;
    cctx.drawImage(imageObj, 0, 0);
  };
// Slider
var slider = document.getElementById("slider");
slider.addEventListener("change", function() {
    StackBlur.image(imageObj, canvas, slider.value,false);
}, false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.0/stackblur.min.js"></script>

<canvas id="canvas" width="200" height="200"></canvas>
<div>
    <input type="range" min="0" max="50" value="0" id="slider" />
</div>