zoukankan      html  css  js  c++  java
  • 截图生成图片并保存到相册

        // 保存到相册
        $("#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

  • 相关阅读:
    Python os模块介绍
    (转) JAVA中如何设置图片(图标)自适应Jlable等组件的大小
    (转)统计学习-2 感知机知识准备(模型类型、超平面与梯度下降法)
    详细讲述MySQL中的子查询操作 (来自脚本之家)
    (转)详解数据库的自然连接
    MySQL 数据类型 详解
    MySql详解(四)
    MySql详解(五)
    MySql详解(七)
    MySql详解(一)
  • 原文地址:https://www.cnblogs.com/tylerdonet/p/4681411.html
Copyright © 2011-2022 走看看