在画布上使用stackblur不会模糊我的图像(Using stackblur with canvas do not blur my image)

我有这个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>

为什么当我拖动滑块时，我的图像不能获得模糊效果？ 我的代码中有没有错误？

I have this javascript code:

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

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

Why my image do not get blur effect when i drag the slider please ? is there any false in my code ?

最满意答案

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

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

在这里你的图像被发送，同时打破CORS限制，这会影响画布，这意味着任何导出方法都将被阻止（包括getImageData）。 因此，插件无法对您的污染画布进行任何操作。

为了规避这种情况，只传递来自同一个域的图像作为脚本（注意： file://协议也不起作用） 。

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

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

Your first mistake as correctly pointed out by @jafarbtech is indeed a typo : you wrote StackBlurImage(, while the correct syntax is StackBlur.image(.
 

Then, if you've got the same error as in @jafarbtech's answer, it is because StackBlur uses getImageData to read the pixel data of your images before applying the blurring algo. 
 

Here your image is sent while breaking the CORS restriction, which does taint the canvas, meaning that any export methods will be blocked (including getImageData). Hence the plugin can't do anything on your tainted canvas.
 

To circumvent this, pass only images from the same domain as your script (beware : file:// protocol doesn't work either). 
 

In the following demo, I will use an other solution which requires the server providing the resource to be correctly set-up.
 

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

在画布上使用stackblur不会模糊我的图像(Using stackblur with canvas do not blur my image)

                
 我有这个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>
 

 为什么当我拖动滑块时，我的图像不能获得模糊效果？ 我的代码中有没有错误？ 
I have this javascript code:
 
// 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);
 

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

Why my image do not get blur effect when i drag the slider please ? is there any false in my code ?

                
最满意答案

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

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

 在这里你的图像被发送，同时打破CORS限制，这会影响画布，这意味着任何导出方法都将被阻止（包括getImageData）。 因此，插件无法对您的污染画布进行任何操作。 
 

 为了规避这种情况，只传递来自同一个域的图像作为脚本（注意： file://协议也不起作用） 。 
 

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

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

Your first mistake as correctly pointed out by @jafarbtech is indeed a typo : you wrote StackBlurImage(, while the correct syntax is StackBlur.image(.
 

Then, if you've got the same error as in @jafarbtech's answer, it is because StackBlur uses getImageData to read the pixel data of your images before applying the blurring algo. 
 

Here your image is sent while breaking the CORS restriction, which does taint the canvas, meaning that any export methods will be blocked (including getImageData). Hence the plugin can't do anything on your tainted canvas.
 

To circumvent this, pass only images from the same domain as your script (beware : file:// protocol doesn't work either). 
 

In the following demo, I will use an other solution which requires the server providing the resource to be correctly set-up.
 

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