利用JS本地生成图片,并保存多个图片至本地

发表于 2020-06-10 09:29:05   |   下载附件   |   字体:
html2canvascanvas2imagejszipFileSaver浏览器生成图片方案浏览器保存文件方案

HTML2canvas 生成图片:(下面使用方式源码)

http://html2canvas.hertzen.com/

https://github.com/niklasvh/html2canvas

JSzip 依赖 下载图片文件包:(下载压缩包源码)

https://stuk.github.io/jszip/

https://stuk.github.io/jszip/documentation/examples/download-zip-file.html


/*
        根据DIV布局将HTML生成图片
        依赖插件在页面中引用:
        wap/global/js/html2canvas.min.js
        wap/global/js/canvas2image.js
        注意:
        所有HTML中的 img 需要添加 tobase64 样式名,如 <img class="tobase64" src="">
    */
    var getShareCanvas = {
        /**
         * @method 开始截图的方法
         * @param htmlNode { String className | 页面中的HTML容器 }
         * @param imgNode { String className | 由canvas生成的最终图片容器 } 
         * @return null { Object }
         * Created by arttanzl on 2020/05/28
         */
        init: function(htmlNode, imgNode, isIe, endcall) {
            var self = this;
            if(isIe){
                // IE 不需要转 base64 ,因为后台转好了,IE不支持跨域读取 base64数据
                // console.info('init IE -------------> ',endcall)
                self.htmlToCanvas(htmlNode, imgNode, endcall);
            }else{
                self.getAllimg($(htmlNode), function() {
                    // console.info('init -------------> ',endcall)
                    self.htmlToCanvas(htmlNode, imgNode, endcall);
                    // console.info(htmlNode + '开始截图的方法')
                });    
            }
        },
        // html转canvas
        htmlToCanvas: function(htmlNode, imgNode, endcall) {
            var _shareContent = $(htmlNode).get(0);
            // console.info('_shareContent', _shareContent)
            var rect = _shareContent.getBoundingClientRect();
            // console.info('rect---->',rect)
            var canvas = document.createElement("canvas"); //创建canvas 对象
            var context = canvas.getContext("2d");
            var scaleBy = 1; // 自定义缩放比例
            // var scaleBy = window.devicePixelRatio;
            canvas.width = rect.width * scaleBy;
            canvas.height = rect.height * scaleBy;
            // console.info('canvas', canvas)
            // 关闭抗锯齿
            // context.mozImageSmoothingEnabled = false;
            // context.webkitImageSmoothingEnabled = false;
            // context.msImageSmoothingEnabled = false;
            // context.imageSmoothingEnabled = false;
            context.scale(scaleBy, scaleBy);
            context.translate(-rect.left, -rect.top);
            var opts = {
                // dpi: window.devicePixelRatio,
                allowTaint: true, //允许加载跨域的图片
                proxy: true, // 用于加载跨域图像。如果留空,则不会加载跨跨域图像
                tainttest: true, //检测每张图片都已经加载完成
                scale: scaleBy, // 添加的scale 参数
                canvas: canvas, //自定义 canvas
                logging: false, //日志开关
                width: rect.width, //dom原始宽度
                height: rect.height, //dom原始高度
                useCORS: true
            };
            html2canvas(_shareContent, opts).then(function(canvas) {
                // var data = canvas.toDataURL('image/png', 1 );
                // var _data = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                // console.log('data',11111111111);
                // var body = document.getElementsByTagName("body");
                // body[0].appendChild(canvas);
                // canvas转化为图片
                // var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height);
                // body[0].appendChild(img);
                // $('#shareContent').hide();
                // $(img).appendTo($('.shareContainer'));
                var _url = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height).getAttribute("src");
                // t.hideLoading();
                // console.info('create -> ok',_url)
                // console.info('htmlToCanvas--------------->',endcall)
                // $(_shareContent).hide();
                if(endcall){
                    // 第二张图片处理完
                    $(imgNode).attr("src", _url).hide();
                    endcall();
                }else{
                    // 第一张处理完
                    $(imgNode).attr("src", _url).show(); 
                }
            });
        },
        // 获取图片的base64
        getBase64: function (url, cb) {
            //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
            var Img = new Image(),
                dataURL = '';
            // Img.setAttribute('crossOrigin', 'anonymous');
            Img.crossOrigin = "anonymous"
            Img.src = url + '?v=20200517';
            Img.onload = function() { //要先确保图片完整获取到,这是个异步事件
                var canvas = document.createElement("canvas"), //创建canvas元素
                    width = Img.width, //确保canvas的尺寸和图片一样
                    height = Img.height;
                canvas.width = width;
                canvas.height = height;
                canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
                dataURL = canvas.toDataURL('image/jpeg'); //转换图片为dataURL
                //  console.log('dataURL',dataURL);
                if (cb && typeof cb === 'function') {
                    // console.info('url', url, '完成了')
                    cb(dataURL);
                }
            };
        },
        // 替换所有的img 地址为base64
        getAllimg: function (htmlNode, cb) {
            // console.info('htmlNode', htmlNode)
            var self = this;
            var node = $(htmlNode);
            var NUM = 0
            var allImgs = node.find('img.tobase64').size();
            // console.info('allImgs', allImgs)
            if(allImgs){
                node.find('img.tobase64').each(function(idx, ele) {
                    var imgSrc = $(ele).attr('src');
                    self.getBase64(imgSrc, function(_baseUrl) {
                        $(ele).attr('src', _baseUrl);
                        ++NUM
                        // console.info('完成了1->', NUM)
                        if (NUM == allImgs && cb && typeof cb === 'function') {
                            // console.info('完成了2 执行回调', cb)
                            cb();
                        }
                    });
                })
            }else{
                if (cb && typeof cb === 'function') {
                    // console.info('没有图片 执行回调', cb)
                    cb();
                }
            }
        }
    }


调用代码

// 生成本地图片
getShareCanvas.init('.theme1','.share1', res.data.is_ie);
getShareCanvas.init('.theme2','.share2', res.data.is_ie, function(){
    // console.info('关闭请求')
    $('.fn-haibao-share').addClass('loaded')
});