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>

为什么我拖动滑块时图像不会出现模糊效果？我的代码中有任何错误吗？

Answer 1

使用适当的功能模糊图像

＆＃13;

// 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);
                StackBlur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, slider.value);
}, false);

＆＃13;

<canvas id="canvas" width="200" height="200"></canvas>
<div>
    <input type="range" min="0" max="5" value="0" id="slider" />
</div>
<img id="srcimg" src="https://i.stack.imgur.com/Cgm7x.jpg?s=328&g=1" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://www.cssscript.com/demo/fast-gaussian-blur-for-canvas-stackblur-js/dist/stackblur.js"></script>

＆＃13;

Answer 2

@jafarbtech正确指出的第一个错误确实是一个错字：你写了StackBlurImage(，而正确的语法是StackBlur.image(。

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

这里发送的图像是在破坏CORS限制时发送的，这会限制画布，这意味着任何导出方法都将被阻止（包括getImageData）。因此，插件无法在受污染的画布上执行任何操作。

为避免这种情况，只传递与脚本相同的域中的图像_{（注意：file://协议也不起作用）}。

在下面的演示中，我将使用另一个解决方案，该解决方案要求服务器正确设置资源。

＆＃13;

// 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);

＆＃13;

<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>

＆＃13;

使用带有画布的stackblur不会模糊我的图像

2 个答案: