1、概述

需求

div元素下载为图片

兼容性

pc:ie10、ie11、chrome、firefox;

mobile:android、ios

实现思路

html=>canvas=>base64

2、pc：

第三方插件：polyfill.js（兼容ie）、html2canvas.js

代码：

html2canvas(document.querySelector("#htmlElement")).then(function (canvas) {
                var imgUrl = canvas.toDataURL();               
                图片下载
                // ie
                if (window.navigator.msSaveOrOpenBlob) {
                        var bstr = atob(imgUrl.split(',')[1])
                        var n = bstr.length
                        var u8arr = new Uint8Array(n)
                        while (n--) {
                                u8arr[n] = bstr.charCodeAt(n)
                        }
                        var blob = new Blob([u8arr])
                        window.navigator.msSaveOrOpenBlob(blob, 'kanyang' + '.' + 'png')
                } else {
                        //chrome等浏览器
                        var a = document.createElement('a')
                        a.href = imgUrl
                        a.setAttribute('download', 'kanyangdan')
                        a.click()
                }
            });

3、mobile

第三方插件：previewImage.min.js （显示为大图 利用手机图片长按保存图片）、html2canvas.js

代码：

 html2canvas(document.querySelector("#htmlElement")).then(function (canvas) {
                    var base64 = canvas.toDataURL("image/png");
                    var imgs=[];
                    imgs.push(base64);

                     var obj = {
                            urls: imgs,
                            current: base64
                    };
                    previewImage.start(obj);

                });