很可惜，这个鬼东西微信内置浏览器不适用

页面：

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

    <title>节日贺卡</title>

    <link rel="stylesheet" href="../css/common.css" type="text/css" media="screen"/>

    <link rel="stylesheet" href="../css/main.css" type="text/css" media="screen"/>

    <script src="../js/init.js"></script>

    <script src="../js/jquery-3.2.1.min.js"></script>

    <script src="../js/base.js"></script>

    <script src="../js/wxshare.js" ></script>

    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<link rel="icon" type="image/png" href="../img/icon.png">

</head>

<body class="bodybgfff">

<!-- 头部start -->

<header class="trx_header clearfix">

    <h1>节日贺卡</h1>

    <div class="fl trx_return"><a href="../page/personalCenter.html"></a></div>

</header>

<!-- 头部搜索end -->

<!-- 海报start -->

<input type="hidden" id="posterType" value="02"/>

<div class="my_haibao">

    <ul class="haibao-list" id="my_poster_id">

    </ul>

</div>

<img style="display:none" class="qdb_nocotent no_search_data" src="../img/search_no.png" alt="" >

<p style="display:none" class="search_not_text no_search_data">暂时木有海报哦</p>

<!-- 海报end -->

<!-- 弹出层end -->

<div class="mark" ></div>

<div class="haibao-show">

    <span class="btn-close-haibao"></span>

    <img src="img/app-down-bg.jpg" alt="" id="picurl"/>

    <p id="successHint" style="display:none">图片已保存到相册，可分享给好友</p>

    <p id="failHint" style="display:none">图片保存失败</p>

    <a href="#" onclick="javascript:savePic();">保存到相册</a>

</div>

<!-- 分享二维码end -->

<script src="../js/model/myPosterList.js"></script>

</body>

</html>

js:

/**

 * Created by wwj on 2019/03/11.

 */

$(document).ready(function(){

    pageShow = 9;

    nowPage = 1;

    loadDataId="my_poster_id";

    /*var url = window.basePath + "/h5/front/poster/toPoster";

    $.ajax({

        url: url,

        type: 'GET',

        dataType: 'json',

        data: {},

        success: function (rest) {

            $("#salesmanUuid").val(rest.data.salesmanUuid);

        }

    })*/

    pageCallBack()

});

function pageCallBack(){

    loadPosterContent();

}

function loadPosterContent(){

    var storeNo = getSessionStoreNo();

    var posterType = $("#posterType").val();

    var url = window.basePath + "/h5/front/poster/ajaxSearchPoster";

    $.ajax({

        url: url,

        type: 'POST',

        dataType: 'json',

        data: {currentPage: nowPage,pageShow:pageShow,storeNo:storeNo,posterType:posterType},

        success: function (rest) {

            console.log(rest)

            if(rest.result){

                appendPosterResult(rest);

            }else{

                $(".no_search_data").show();

            }

            console.log('start')

        }

    })

}

//拼接加载出来的产品

function appendPosterResult(data){

    var results = data.results;

    if(results!=null&&results.length>0){

        var appendHtml = "";

        for(var i=0;i<results.length;i++){

            var poster = results[i];

            //appendHtml += '<li><a href="javascript:void(0);" onclick="toPosterPage(\''+poster.uuid+'\',\''+poster.posterTitle+'\')"><img src="'+poster.posterImgUrl+'" alt=""/><p>'+poster.posterTitle+'</p></a></li>';

            appendHtml +='<li>'

                        +'<a href="#"><img src="'+poster.posterImgUrl+'" alt=""/><p>'+poster.posterTitle+'</p></a>'

                       +'</li>';

        }

        $("#my_poster_id").append(appendHtml);

        $(".no_search_data").hide();

    }else{

        if(nowPage==1){

            totalPage = data.totalPage;

            $(".no_search_data").show();

        }

    }

    nowPage++;

    initPreviewJs();

}

//初始化图片预览效果js

function initPreviewJs(){

       $(".haibao-list li img").click(function(){

            var imgSrc = $(this)[0].src;

            $(".mark").fadeIn();

            $(".haibao-show").fadeIn().children("img").attr("src",imgSrc);

        })

    $(".btn-close-haibao,.mark").click(function(){

            $(".mark").fadeOut();

            $(".haibao-show").fadeOut();

            $("#successHint").hide();

            $("#failHint").hide();

        })

}

//保存到相册

function savePic(){

    var picurl= $("#picurl").attr("src");

    //alert(picurl);

    savePicture(picurl);

}

var triggerEvent = "touchstart";

function savePicture(Url){

    var blob=new Blob([''], {type:'application/octet-stream'});

    var url = URL.createObjectURL(blob);

    var a = document.createElement('a');

    a.href = Url;

    a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];

    var e = document.createEvent('MouseEvents');

    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

    a.dispatchEvent(e);

    URL.revokeObjectURL(url);

}

参考博客：https://blog.csdn.net/rentian1/article/details/84988590

h5页面使用js实现保存当前图片到手机相册的更多相关文章

  1. Android将view保存为图片并放在相册中

    在Android中,可以将view保存为图片并放在相册中,步骤为 view->bitmap->file,即先将view转化为bitmap,再将bitmap保存到相册中. 需要将红框标注的v ...

  2. js中保存成图片并下载

    1.保存canvas中绘制的内容为图片 HTML代码: <canvas id="canvas" width="400" height="400& ...

  3. h5页面长按保存图片

    由于之前几乎没有使用过canvas:今天遇到了一个很棘手的问题.canvas生成后,然后长按保存到手机. 正常的流程应该是先用canvas进行画图,然后再把canvas转成地址,最后再把转化的地址给i ...

  4. 微信内嵌H5网页 解决js倒计时失效

    项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算 ...

  5. 本地调试H5页面

    摘要 详细讲述微信H5页面调试(安装在安卓或iOS手机上的),钉钉内H5页面的调试,QQ.微博以及各浏览器上H5页面的调试方法 背景 大学毕业快要一年了,用leader的话说我也是有一年开发经验的前端 ...

  6. robotframework_如何用Chrome模拟手机打开H5页面

    由于公司目前的产品大部分都是APP端的H5页面,APP原生页面很少,测试H5页面如果去搭建appium或者macaca这类自动化平台太费时,太重而不能快速落地:与自动化的目标:提高测试效率相悖.但如果 ...

  7. 【小白技术笔记】保存皮皮虾APP无水印视频到手机相册，只需要三步 [技术干货]

    百万段友回皮皮虾,转身一变,都成了皮友.作为当年的资深段友,今天的皮友的我.看到好视频,经典视频,搞笑视频,就想保存一份到手机相册,然后皮皮虾啊皮皮虾,有个让人很讨厌的地方,保存视频的时候就有皮皮虾的 ...

  8. js 将页面保存为图片

    <!DOCTYPE html><html><head><title>保存为images</title><meta charset=&q ...

  9. android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具

    Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面 ...

随机推荐

  1. Python--day12（三元表达式、函数对象、名称空间与作用域、函数嵌套定义）

    今日主要内容 1.  函数默认值细节(*) 2.  数据类型补充:三元表达式.列表推导式.字典推导式 (***) 3.  函数对象:函数名的各种应用场景 (*****) 4.  名称空间与作用域:解释 ...

  2. MySQL操作（备份很重要）

    文档一: --修改用户密码的命令 mysqladmin -uroot -proot123 password mysql123 --登录mysql数据库的命令 mysql -uroot -proot12 ...

  3. Vue — 微信公众号内置h5支付相关

    首先,在公众号后台配置h5页面地址 开发流程 1.通过配置h5地址,获取code.再通过code,获取openid getOpenid(){ let url = 'https://open.weixi ...

  4. 微信支付之01------获取订单微信支付二维码的接口------Java实现

    [ 前言:以前写过一个获取微信二维码支付的接口,发现最近公司新开的项目会经常用到,现在我又翻出代码看了一遍,觉得还是把整个代码流程记下来的好 ] 借鉴博客: 他这篇博客写得不错,挺全的:https:/ ...

  5. 数据分析三剑客之pandas

    Pandas 引入 前面一篇文章我们介绍了numpy,但numpy的特长并不是在于数据处理,而是在它能非常方便地实现科学计算,所以我们日常对数据进行处理时用的numpy情况并不是很多,我们需要处理的数 ...

  6. 《深入理解java虚拟机》学习笔记-----郑雨迪

    一.学习java虚拟机的原因 二.java代码的运行 java -c 编译成.class 文件(java字节码) java字节码(.class文件)无法直接执行,因此,java虚拟机需要将字节码编译成 ...

  7. CENTOS手动安装修复python ,YUM CENTOS手动安装修复YUM

    CENTOS手动安装修复YUM  2019年3月8日  杨宇 Comments 0 Comment 目录 [hide] 一.问题场景 二.手动修复 2.1 下载 rpm 包 2.2 安装 rpm 包 ...

  8. did not finish being created even after we waited 189 seconds or 61 attempts. And its status is downloading

    did not finish being created even after we waited 189 seconds or 61 attempts. And its status is down ...

  9. [SMB share]Create SMB share under powershell / poweshell下创建本机的SMB共享

    New-SmbShare -Name share-name -Path C:\share -FolderEnumerationMode AccessBased -CachingMode Documen ...

  10. Luogu3768简单的数学题

    题目描述 题解 我们在一通化简上面的式子之后得到了这么个东西. 前面的可以除法分块做,后面的∑T2∑dµ(T/d)是积性函数,可以线性筛. 然后这个数据范围好像不太支持线性筛,所以考虑杜教筛. 后面那 ...