截图生成图片并保存到相册

简介: // 保存到相册 $("#content").on("click", "#savepic", function () { $("#waitingupload").
    // 保存到相册
    $("#content").on("click", "#savepic", function () {
        $("#waitingupload").removeClass("heisebghid").addClass("heisebg");
        // 调用html2canvas生成截图
        html2canvas($("#orderInfo")[0], {
            allowTaint: true,
            taintTest: false,
            onrendered: function (canvas) {
                canvas.id = "mycanvas";
                //var newImg = document.createElement("img");
                //newImg.crossOrigin = "*";
                //var ctx = canvas.getContext("2d");
                //ctx.drawImage(newImg, 0, 0);

                ////生成base64图片数据
                //var dataUrl = canvas.toDataURL();
                //newImg.src = dataUrl;
                //document.body.appendChild(newImg);

                var dataUrl = canvas.toDataURL("image/png", 1);
                // 调用接口解码,获取图片
                getimgByBase64(dataUrl);
            }
        });

    });
// Base64生成图片
function getimgByBase64(base64code) {
    console.log(base64code);
    $.ajax({
        type: "POST",
        url: configManager.RequstUrl + "api/common/base64decode",
        async: true,
        data: { "base64code": base64code }
    }).done(function (data) {
        if ("success" != data.state) { console.log(data.message); plus.nativeUI.alert("保存失败!"); return; }
        // 保存到相册
        saveGallery(data.url);
    });
}
function saveGallery(url) {
    var dtask = plus.downloader.createDownload(url, {}, function (d, status) {
        // 下载完成
        if (status == 200) {
            console.log(d.filename);
            var filepath = plus.io.convertLocalFileSystemURL(d.filename);
            console.log(filepath);
            // 保存相册
            plus.gallery.save(filepath);
            plus.nativeUI.alert("保存成功");
            // 删除
            plus.io.resolveLocalFileSystemURL(filepath, function (entry) {
                entry.remove(function (e) { }, function (e) { });
            }, function (e) { });

        } else {
            plus.nativeUI.alert("Download failed: " + status);
        }

        $("#waitingupload").removeClass("heisebg").addClass("heisebghid");
    });
    //dtask.addEventListener( "statechanged", onStateChanged, false );
    dtask.start();
}

html2canvas截图js的介绍及下载地址如下:http://www.oschina.net/p/html2canvas

作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址williamningdong@gmail.com  联系我,非常感谢。

目录
相关文章
|
数据采集 分布式计算 搜索推荐
使用Python实现网页中图片的批量下载和水印添加保存
使用Python实现网页中图片的批量下载和水印添加保存
|
6月前
|
存储 Python
python实现图片与视频转换:将视频保存为图片,将批量图片保存为视频
python实现图片与视频转换:将视频保存为图片,将批量图片保存为视频
如何在电脑上保存微信公众号文章封面图片?
如何在电脑上保存微信公众号文章封面图片?
107 0
|
iOS开发
iOS开发 - 保存图片到相册和保存屏幕截图到相册
iOS开发 - 保存图片到相册和保存屏幕截图到相册
695 0
|
数据采集 JavaScript 开发者
批量下载一些图片
学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您:
221 0
|
JavaScript
打印二维码和图片pdf
打印二维码和图片pdf
168 0
|
存储 小程序 API
小程序实现图片上传,预览以及图片base64位处理
小程序实现图片上传,预览以及图片base64位处理
537 0
小程序实现图片上传,预览以及图片base64位处理
|
API
小程序 — 保存图片到手机相册①
讲一下在微信小程序中,怎么把网络图片保存到本机相册中;这个功能其实在小程序开发中还是很常见的,比如保存海报之类的等等。 GitHub:https://github.com/Ewall1106/miniProgramDemo 1、保存图片 (1)要保存图片到手机相册中,所以首先我们来看看保存图片的api方法是什么? 我们使用的是wx.saveImageToPhotosAlbum(OBJECT)这个api方法,其中OBJECT的参数可以是: 图片来源自小程序官网 请注意我红框标记的部分, 不支持网络图片路径。
1554 0
|
前端开发 JavaScript HTML5
使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览。  在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。
1912 0