随笔 - 89  文章 - 0  评论 - 2  阅读 - 11万 

需要下载的效果图:

 

 

 

HTML

需要引用js:html2canvas.js

复制代码
<div class="back" id="qrCode">
                        <div class="blu">
                            <div style="color:white;font-size:24px;text-align:center;padding-top:60px;">
                                <span>取号二维码</span>
                            </div>
                            <img id="srurl" width="260" height="260"style="margin-top:65px;margin-left:73px;" />
                            <div style="color:white;font-size:24px;text-align:center;padding-top:30px;">
                                <span>请使用微信扫一扫</span>
                            </div>
                        </div>
                        <div style="padding-top:20px;color:#01348b;font-size:26px;text-align:center">
                            <img src="~/Content/images/qh.png" width="50" height="50" />
                            <span>扫码取号</span>
                        </div>
                    </div>
复制代码

 

 CSS

复制代码
<style>
    .back {
        width: 410px;
        height: 605px;
        background-color: white;
        border-radius: 20px;
        border: 1px solid #ccc;
        box-shadow: 6px 6px 6px #ccc;
        /*考虑浏览器兼容性*/
        -moz-box-shadow: 6px 6px 6px #ccc;
        -webkit-box-shadow: 6px 6px 6px #ccc;
    }

    .blu {
        width: 410px;
        height: 520px;
        background-color: #0751d9;
        border-radius: 20px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .zf {
        width: 410px;
        height: 80px;
        margin-top: 80px;
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
</style>
复制代码

 JS

复制代码
$('#lr_save_btn').on('click', function () {
//将网页保存为本地图片
//html2canvas(document.querySelector("#qrCode")).then(canvas => { // //将canvas内容保存为文件并下载 // canvas.toBlob(function(blob) { // saveAs(blob, "~/Resource/aaa.png"); // }); //});
//将网页保存为base64格式
                html2canvas($("#qrCode"), {
                    onrendered: function (canvas) {
                    var dataUrl = canvas.toDataURL();
                   }
                });
 });
复制代码

完整代码块:

JS

复制代码
//此处二维码为动态赋值,所以调用此方法[GetQrcodeSave]获取动态二维码并将其保存到本地,返回图片保存地址
$('#lr_save_btn').on('click', function () { $.lrSetForm(top.$.rootUrl + '/Coller/GetQrcodeSave', function (data) { if (data.code != null) {//为二维码动态赋值var imgobj1 = document.getElementById("srurl"); imgobj1.src = data.code;
//获取要保存成图片的代码块 html2canvas($(
"#qrCode"), {
onrendered: function (canvas) {
//将网页保存为base64
var dataUrl = canvas.toDataURL();
//调用保存文件方法, $.ajax({ url:
'/HM_PCClient/Device/ImgTest', data: { "img": dataUrl }, dataType: "json", type: 'POST', success: function (data) { learun.alert.success("文件保存成功"); } }); } }); } }); });
复制代码

 

  C#

复制代码
using System.Threading;
using System.Windows.Forms;

#region
对文件进行选择保存文件窗口 public ActionResult ImgTest(string img) { ShowSaveFileDialog(img); return Content(new ResParameter { code = ResponseCode.success, info = "1", data = "" }.ToJson()); } public string ShowSaveFileDialog(string img) { string localFilePath = ""; SaveFileDialog sfd = new SaveFileDialog(); //设置文件类型 //sfd.Filter = "Excel表格(*.xls)|*.xls"; sfd.Filter = "JPG图片文件(*.jpg)|*.jpg"; //设置文件默认名称 sfd.FileName = DateTime.Now.ToString("yyMMddhhmmss"); //设置默认文件类型显示顺序 sfd.FilterIndex = 1; //保存对话框是否记忆上次打开的目录 sfd.RestoreDirectory = true; //点了保存按钮进入 Thread t = new Thread((ThreadStart)(() => { if (sfd.ShowDialog() == DialogResult.OK) { //获得文件路径 localFilePath = sfd.FileName.ToString(); //获取文件名,不带路径 string fileNameExt = localFilePath.Substring(localFilePath.LastIndexOf("\\") + 1) + ".jpg"; string strbase64 = img.Substring(img.IndexOf(',') + 1); strbase64 = strbase64.Trim('\0'); byte[] imageBytes = Convert.FromBase64String(strbase64);//保存图片 System.IO.File.WriteAllBytes(localFilePath, imageBytes); } })); t.SetApartmentState(ApartmentState.STA); t.Start(); t.Join(); return localFilePath; } #endregion


复制代码

 

posted on   我的梦想是开个小店  阅读(1422)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示