纯javaScript div保存图片并下载 js+Canvas+Svg

最精简的原生js开发，更方便扩展开发需要的业务

技术逻辑：

1.将div转为svg网络图片

2.将创建Canvas画布

3.将画布大小和div大小设置一样大

4.将svg img 画到Canvas的画布中用方法 context.drawImage(img, 0, 0);

5.将Canvas画布保存为png图像

示例程序截图：

CODE:

<html>
<body>
   <h2>Input Div:</h2>
   <div id="div">
       <p>Just have a <span style='color: white; text-shadow: 0 0 2px blue;'>TRY</span></p>
       <p><b>By Dion</b></p>
       <div style="width:600px;height:500px;background-color:#000;color:#fff;">
           <div style="width:500px;height:500px;background-color:#111111;color:#fff;">
               <div style="width:400px;height:500px;background-color:#222222;color:#fff;">
                   <div style="width:300px;height:500px;background-color:#333333;color:#fff;">
                       <div style="width:200px;height:500px;background-color:#666666;color:#fff;">

                           这是图片5</div>
                       这是图片4
                   </div>
                   这是图片3
               </div>
               这是图片2
           </div>
           这是图片1
       </div>
   </div>
   <h2>Output Image:</h2>
   <input type="button" value="生成图片" onClick="printMap()">
   <input type="button" value="下载图片" onClick="saveMap()">
   <div id="ssssssssssss" style="position: fixed;right:0px;top:0px;width:600px;background-color:#333333;"></div>
   <script>
       var imgObj;

       function printMap() {
           //1.将div转成svg
           var divContent = document.getElementById("div").innerHTML;
           var newData = "";
           for ( var i = 0; i < divContent.length; i++) {
               if (divContent.substr(i, 1) == "#") {
                   newData += '%23';
               } else {
                   newData += divContent.substr(i, 1);
               }
           }
           var data = "data:image/svg+xml,"
                   + "<svg id='abcdddd' xmlns='http://www.w3.org/2000/svg' width='600' height='500'>"
                   + "<foreignObject width='100%' height='100%'>"
                   + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>"
                   + newData + "</div>" + "</foreignObject>" + "</svg>";

           var img = new Image();
           img.src = data;
           // document.getElementsByTagName('body')[0].appendChild(img);
           document.getElementById("ssssssssssss").appendChild(img);
           imgObj = img;

       }

       function saveMap() {
           var img = imgObj;//document.getElementById("ssssssssssss").getElementsByTagName("img");
           //2.svg转成canvas
           var canvas = document.createElement('canvas'); //准备空画布
           canvas.width = img.width;
           canvas.height = img.height;

var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
context.drawImage(img, 0, 0);

var type = 'png';
var imgData = canvas.toDataURL(type);

           // 加工image data，替换mime type
           imgData = imgData.replace(_fixType(type), 'image/octet-stream');
           // 下载后的图片名
           var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
           // download
           saveFile(imgData, filename);
       }

       var _fixType = function(type) {
           type = type.toLowerCase().replace(/jpg/i, 'jpeg');
           var r = type.match(/png|jpeg|bmp|gif/)[0];
           return 'image/' + r;
       };

       var saveFile = function(data, filename) {
           var save_link = document.createElementNS(
                   'http://www.w3.org/1999/xhtml', 'a');
           save_link.href = data;
           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>
</body>
</html>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_42749765/article/details/81452480
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-07 15:19:19
阅读 ( 821 )
分类：前端