html网页生成图片，长按保存

html网页上有多张图片，点击长按的话只能保存被按的那张，需要将整个html生成一张图片，这样保存的时候就是整个网页了。
使用html2canvas.js，vue.js

 <div class="generatePicture">
        <div data-html2canvas-ignore @click="generateImage" v-show="afterCanvasImageHide">
            <p id="generaPic" class="optText"></p>
        </div>
  </div>

以下是生成图片和长按保存的js

var vm = new Vue({
        el: '#app',
        data: function() {
            return {
                afterCanvasImageHide: true,
                showToast: false,
                avatar: ''
            };
        },
        mounted: function() {
            this.$nextTick(function() {
                var _this = this;

                // 用base64展示html中要显示的图片（如果这个图片地址是服务端链接，图片链接需要服务端允许跨域，本地图片可以不用转base64）
                // 因为直接使用服务端地址链接，canvas.toDataUrl API抛出异常：
                // Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. ==> 受污染的画布不能导出
                var imgUrl1 = 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKVkoe7Viae4lreoZBybEywysxHlnlqplGTbaJLQI7pV8W5KMFK1DqBrNntO5O9wT0YYP9cgP6m4dA/132';
                _this.img2base64(imgUrl1, 'Anonymous').then(function(res) {
                    _this.avatar = res;
                });
            });
        },
        methods: {
            /**
             * 根据 window.devicePixelRatio 获取像素比
             * @returns {number}
             * @constructor
             */
            getDpr: function() {
                if (window.devicePixelRatio && window.devicePixelRatio > 1) {
                    return window.devicePixelRatio;
                }
                return 1;
            },

            /**
             * 将传入值转为整数
             * @param value
             * @returns {number}
             */
            parseValue: function(value) {
                return parseInt(value, 10);
            },

            // 将图片转为base64格式
            img2base64: function(url, crossOrigin) {
                return new Promise(resolve => {
                    const img = new Image();

                img.onload = () => {
                    const c = document.createElement('canvas');

                    c.width = img.naturalWidth;
                    c.height = img.naturalHeight;

                    const cxt = c.getContext('2d');

                    cxt.drawImage(img, 0, 0);

                    // 得到图片的base64编码数据
                    resolve(c.toDataURL('image/png'));
                };

                // 结合合适的CORS响应头，实现在画布中使用跨域<img>元素的图像
                crossOrigin && img.setAttribute('crossOrigin', crossOrigin);
                img.src = url;
            });
            },

            /**
             * 生成图片
             */
            generateImage: function() {
                var _this = this;

                var scanTextElem = document.getElementById('scanText');
                scanTextElem.style.opacity = '1';

                // 获取想要转换的dom节点
                // var dom = document.querySelector('body');
                var dom = document.getElementById('app');
                var box = window.getComputedStyle(dom);

                // dom节点计算后宽高
                var width = _this.parseValue(box.width);
                var height = _this.parseValue(box.height);

                // 获取像素比
                var scaleBy = _this.getDpr();

                // 创建自定义的canvas元素
                var canvas = document.createElement('canvas');

                // 设置canvas元素属性宽高为 DOM 节点宽高 * 像素比
                canvas.width = width * scaleBy;
                canvas.height = height * scaleBy;

                // 设置canvas css 宽高为DOM节点宽高
                canvas.style.width = width + 'px';
                canvas.style.height = height + 'px';

                // 获取画笔
                var context = canvas.getContext('2d');

                // 将所有绘制内容放大像素比倍
                context.scale(scaleBy, scaleBy);

                // 设置需要生成的图片的大小，不限于可视区域（即可保存长图）
                var w = document.getElementById('app').style.width;
                var h = document.getElementById('app').style.height;

                html2canvas(dom, {
                    allowTaint: true,
                    width: w,
                    height: h,
                    useCORS: true
                }).then(function(canvas) {
                    // 将canvas转换成图片渲染到页面上
                    var url = canvas.toDataURL('image/png');// base64数据
                    var image = new Image();
                    image.src = url;
                    document.getElementById('shareImg').appendChild(image);

                    _this.afterCanvasImageHide = false;
                    scanTextElem.style.opacity = '0';

                    _this.showToast = true;
                    setTimeout(function() {
                        _this.showToast = false;
                    }, 1000);
                });
            }
        }
    });

h5上可以直接使用，ios嵌套h5需要ios打包的时候支持长按。