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

页面：

<!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. pyqt5在textBrowser添加文本并自动滑动到底

    pyqt5在textBrowser添加文本并自动滑动到底 说明: 1.按下按钮pushButton,把单行文本框lineEdit里的内容循环不断的添加到多行文本展示框textBrowser.2.必须要 ...

  2. Java 7 和 Java 8 中的 HashMap原理解析

    HashMap 可能是面试的时候必问的题目了,面试官为什么都偏爱拿这个问应聘者?因为 HashMap 它的设计结构和原理比较有意思,它既可以考初学者对 Java 集合的了解又可以深度的发现应聘者的数据 ...

  3. 《你必须掌握的Entity Framework 6.x与Core 2.0》勘误

    第5章 5.1.1----致谢网友[宪煌] public virtual ICollection Post {get;set;} 修改为 public virtual ICollection<P ...

  4. 周末学习笔记——day02（带参装饰器，wraps修改文档注释，三元表达式，列表字典推导式，迭代器，生成器，枚举对象，递归）

    一,复习 ''' 1.函数的参数:实参与形参 形参:定义函数()中出现的参数 实参:调用函数()中出现的参数 形参拿到实参的值,如果整体赋值(自己改变存放值的地址),实参不会改变,(可变类型)如果修改 ...

  5. Servlet开发笔记（二）

    ServletContext对象 WEB容器在启动时,它会为每个WEB应用程序都创建一个对应的ServletContext对象,它代表当前web应用.        ServletConfig对象中维 ...

  6. [题解]图的m着色问题

    图的m着色问题(color) [题目描述] 给定无向连通图G和m种不同的颜色.用这些颜色为图G的各顶点着色,每个顶点着一种颜色.如果有一种着色法使G中每条边的2个顶点着不同颜色,则称这个图是m可着色的 ...

  7. QQ浏览器、火狐浏览器中页面有点大的问题记录

    做页面时候,发现火狐和腾讯QQ浏览器有个问题,就是会将页面显示的比较大,像点了缩放比例120%似的,事实上缩放比例是100%,很奇怪. 甚至面对这个问题,连腾讯公司主页也会放大,也让我很困惑. 比如: ...

  8. Django（三） ORM 数据库操作

    大纲 一.DjangoORM 创建基本类型及生成数据库表结构 1.简介 2.创建数据库 表结构 二.Django ORM基本增删改查 1.表数据增删改查 2.表结构修改 三.Django ORM 字段 ...

  9. 差分约束 HDU - 1384 HDU - 3592 HDU - 1531 HDU - 3666

    Intervals Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  10. tar.gz，直接解压可用？还是需要编译安装？

    在linux搭建环境,下载的tar.gz安装包,有的直接解压就可以用,有的需要编译安装后才可用 怎么知道该怎么操作呢? 其实,tar -zxvf解压后,进入目录看README.md就知道答案了 另外, ...