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();
  • 相关阅读:
    5.3公理系统
    5.2逻辑语言vs逻辑演算
    Spike-in 对照(Spike-in control)
    R 语言学习笔记(4)—— 数值&字符处理
    R 语言学习笔记(3)—— 基础绘图
    R语言学习笔记(2)——数据结构与数据集
    R 语言学习笔记(1)——R 工作空间与输入输出
    单核苷酸多态性SNP(single nucleotide polymorphism)
    你真的遵守编码规范了吗
    论牧羊犬如何混迹于Scrum圈
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/8798729.html
Copyright © 2011-2022 走看看