h5长按保存图片海报到本地与IOS 安卓对接

1.ios系统自带长按保存功能，所以主要就是安卓系统的

Html

<div class="index-ct" >
            <div class="content" @touchstart="touchStart()" @touchend="touchEnd()">
                <!-- 页面背景 -->
                <img :src="posterUrl"
                    alt=""
                    class="poster">
                <VueCanvasPoster :widthPixels="375"
                    :painting="painting"
                    @success="success"
                    @fail="fail"></VueCanvasPoster>
            </div>
        </div>

data

data(){
   return{
timer: null,
                  posterUrl: require('@images/xxxx.png'),
            //海报配置
            painting: {
                width: '375px',
                height: '812px',
                background: require('@images/xxxx.png'),
                views: [
                    {
                        type: 'rect',
                        css: {
                            top: '590px',
                            left: '132px',
                            color: '#fff',
                            width: '112px',
                            height: '112px',
                            borderWidth: '1px',
                            borderColor: '#FFBC8E',
                        }
                    },
                    {
                        type: 'qrcode',
                        content: '',
                        css: {
                            top: '603px',
                            left: '144px',
                            color: '#000',
                            width: '88px',
                            height: '88px',
                            background: '#fff',
                            padding: '12px'
                        }
                    },
                    {
                        type: 'text',
                        text: '长按海报保存到相册',
                        css: [
                            {
                                top: '710px',
                                left: '125px',
                                fontSize: '14px',
                                color: '#666',
                            }
                        ]
                    },
                ],
            },
}
}

methods 重点

        touchEnd () {
            //手指离开
            clearTimeout(this.timer);
        },
        touchStart () {
            //手指触摸
            let ran = navigator.userAgent;
            let isAndroid = ran.indexOf('Android') > -1 || ran.indexOf('Adr') > -1;
            console.log(navigator.userAgent);
            if (isAndroid ) {
                console.log('安卓');
                // 安卓代码块
                clearTimeout(this.timer); //再次清空定时器，防止重复注册定时器
                this.timer = setTimeout(() => {
                    this.downloadIamge(this.posterUrl, "pic");
                }, 1000);
            }
            console.log('ios自带保存图片');
        },
        // 下载
        downloadIamge (imgsrc, name) {
  
            //下载图片地址和图片名
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = () => {
                let canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "photo"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgsrc;
        },