Javascript - 关闭Pixelate脚本 - 如何添加右键单击以保存JPG?

时间:2014-03-23 15:15:19

标签: javascript html image canvas

该剧本来自David De Sandro http://close-pixelate.desandro.com/

这是我的HTML

<body>
<article>
 <figure>
  <img id="image" id="circles" class="portrait" src="img/original.jpg" alt="none" />
  <figcaption>Caption Here</figcaption>
 </figure>
</article>

这就是对IMG的关闭像素效应

<script>

    var pixelations = {
      'circles' : [
    { shape: 'diamond', resolution: 30, size: 31 },
    { shape: 'diamond', resolution: 30, offset: 15 },
    { resolution: 30, alpha: 0.5 }
      ],
        var docReady = function() {

      for ( var key in pixelations ) {
        var img = document.getElementById( key ),
            options = pixelations[key];
        if ( img ) { 
          img.closePixelate( options )
        }
      }
    };

    window.addEventListener( 'DOMContentLoaded', docReady, false);  

</script>

这给了我对图像的效果,但是我需要添加一个右键并保存JPG(应用了效果)?

--- ---编辑

如果我使用这个

var canvas = document.getElementById("circles");
if (canvas.getContext) {
    var ctx = canvas.getContext("2d");                // Get the context for the canvas.
    var myImage = canvas.toDataURL("image/png");      // Get the data as an image.
}

var image = document.getElementById("image");  // Get the image object.
image.src = myImage; 

我有这个问题: 未捕获的TypeError:无法设置属性&#39; src&#39;为null

0 个答案:

没有答案