图片合成一个画布，进行浏览器下载

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();