canvas保存为图片,兼容IE9+,chrome,Firefox

  javascript将canvas对象保存为图片示例,兼容IE9+,chrome,Firefox,效果如下

canvas保存为图片,兼容IE9+,chrome,Firefox
firefox将canvas对象保存为图片

canvas保存为图片,兼容IE9+,chrome,Firefox
chrome将canvas对象保存为图片

canvas保存为图片,兼容IE9+,chrome,Firefox
IE11将canvas对象保存为图片

 

  javascript将canvas保存为图片源代码如下

<title>javascript将canvas对象保存为图片示例</title>
<canvas id="c"></canvas><br />
<input type="button" value="保存canvas为图片" onclick="saveImg(c, 'save-canvas-to-image.png')" />
<script>
    var ct = c.getContext('2d');
    ct.fillRect(0, 0, 100, 100);
    var saveImg = function (canvas, filename) {//canvas保存为图片
        if (canvas.msToBlob) {//IE9+浏览器
            var blob = canvas.msToBlob();
            window.navigator.msSaveBlob(blob, filename);
        } else {//firefox,chrome
            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = canvas.toDataURL('image/png');
            save_link.download = filename;
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        }
    };
   
</script>

 


原创文章,转载请注明出处:canvas保存为图片,兼容IE9+,chrome,Firefox

评论(0)Web开发网
阅读(347)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧