zoukankan      html  css  js  c++  java
  • 图片合成一个画布,进行浏览器下载

    var objCoupon = {
    init: function () {
    var _this = this;
    $(".qr").on('touchstart', function () {
    setTimeout(function () {
    _this.createCavas();
    }, 500);
    // _this.createCavas();
    });
    },
    // 设置画布的大小、高宽
    createCavas: function () {
    var _this = this;
    var temple = document.querySelector('.temple');//页面的img标签
    var qrcode = document.querySelector('.qrcode');
    var type = 'png';
    var canvas = document.createElement('canvas');//创建画布
    var context = canvas.getContext('2d');
    canvas.width = 472;
    canvas.height = 754;
    context.fillStyle = '#fff';
    context.fillRect(0, 0, 472, 754);
    context.drawImage(temple, 0, 0, 472, 432);
    context.drawImage(qrcode, 128, 482, 184, 184);
    var imgdata = canvas.toDataURL('image/png');
    //2.0 将mime-type改为image/octet-stream,强制让浏览器下载
    imgdata = imgdata.replace(_this.fixtype(type), 'image/octet-stream');
    // var filename = '' + new Date().getDate() + '.' + type;
    var filename = '助力砍价.' + type;
    //注意咯 由于图片下载的比较少 就直接用当前几号做的图片名字
    _this.savaFile(imgdata, filename);
    },
    // 固定type类型
    fixtype: function (type) {
    type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return 'image/' + r;
    },
    //3.0 将图片保存到本地
    savaFile: function (data, filename) {
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
    }


    }
    objCoupon.init();
  • 相关阅读:
    C#综合揭秘——细说多线程(上)
    Tinyxml2学习
    GNSS数据下载网站整理,包括gamit、bernese更新文件地址[2020.04更新]
    c#中xml增删查改
    C#比较两个对象中的指定字段值是否相等
    C#数据导出帮助类
    ajax文件下载
    C#中使用NPOI进行DataTable和Excel互转
    使用 ICSharpCode.SharpZipLib.Zip压缩解压文件
    C#DataTable转List<T>互转
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/8798729.html
Copyright © 2011-2022 走看看