Question

我将制作一个关于上传图像的简单应用程序，然后可以通过一些过滤器编辑图像。（在这种情况下我使用SVG过滤器）

＆＃13;

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#pic').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$("#uploadedPic").change(function() {
  readURL(this);
});

function function1() {
  document.getElementById('pic').style.cssText = "-webkit-filter: url('#normal')";
}

function function2() {
  document.getElementById('pic').style.cssText = "-webkit-filter: url('#f1')";
}

function function3() {
  document.getElementById('pic').style.cssText = "-webkit-filter: url('#f2')";
}

function function4() {
  document.getElementById('pic').style.cssText = "-webkit-filter: url('#f3')";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all">
  <input type='file' id="uploadedPic" />
  <img id="pic" src="#" alt="your image" data-type="editable" />
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="normal" x="0" y="0">
      </filter>
      <filter id="f1" x="0" y="0">
        <feGaussianBlur in="A" stdDeviation="5"></feGaussianBlur>
      </filter>
      <filter id="f2" x="0" y="0">
        <feColorMatrix values="0.3333 0.3333 0.3333 0 0
    		    	0.3333 0.3333 0.3333 0 0
    		    	0.3333 0.3333 0.3333 0 0
    		    	0      0      0      1 0" /></feColorMatrix>
      </filter>
      <filter id="f3" x="0" y="0">
        <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" order="3" kernelMatrix="0 -1 0    -1 4 -1   0 -1 0" preserveAlpha="true" /></feConvolveMatrix>
      </filter>
    </defs>
  </svg>
  <div id="btn">
    <button id="normal" onclick="function1()">normal</button>
    <button id="blur" onclick="function2()">blur</button>
    <button id="matrix" onclick="function3()">color matrix</button>
    <button id="cmatrix" onclick="function4()">convolve matrix</button>
  </div>
</div>

＆＃13;

问题是代码不能正常工作，我可以编辑图像但不预览图像。（注意：我使用chrome，在firefox上未经测试）。并且我在小提琴中测试它，图像上传但按钮过滤器无法正常工作。问题是什么？所以，请帮我修复一下代码并告诉我哪里的代码不正确？

抱歉英语不好。谢谢。希望有人帮助我。

如何在我上传的图像上使用svg过滤器预览和编辑图像？

0 个答案: