使用canvas生成图片，js自动下载图片

前几应APP运营的妹子要求，做一个奥运机票生成小工具，最后需要保存图片分享。PC直接保存canvas合成的图片，但在移动端就没法用了。SO只能想别的方法，canvas提供一个toDataURL将其输出为base64的图片，可以直接访问。但问题又来了，微信浏览器中它不支持啊，怎么办，加一个图片，toDataURL的值给图片src，这样就OK了。这里说是另一种方法，让现代浏览器直接输出”image/octet-stream”实现图片自动弹出下载功能，下面附简单代码。

html:

<canvas id="canvas" width="320" height="480"></canvas>

javascript:

(function(){
	drawing();//调用
})()

function drawing() {
	var _canvas = document.getElementById('canvas'),
		_context = _canvas.getContext('2d');
	_image.src = 'https://lady.tuterm.com/wp-content/uploads/2016/07/1393316689ca.jpg';
	_image.onload = function(e) {
		_context.clearRect(0, 0, _canvas.width, _canvas.height);
		_context.drawImage(_image, 0, 0, _canvas.width, _canvas.height); //填充
		var _imgSrc = _canvas.toDataURL("image/jpeg");
		saveFile(_imgSrc);
	};
}

function saveFile(strData) {
	setTimeout(function() {
		var filename = 'tuterm_' + (new Date()).getTime() + '.jpg';
		strData = strData.replace('image/jpeg', 'image/octet-stream');		
		downLoadFile(strData, filename);
	}, 1000);
}

function downLoadFile(data, filename) {
	var _saveLink = document.createElementNS('https://www.w3.org/1999/xhtml', 'a'),
		_event = document.createEvent('MouseEvents');
	_saveLink.href = data;
	_saveLink.download = filename;
	_event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	_saveLink.dispatchEvent(_event);
};

在线生成奥运机票链接 https://m.imscv.com/jipiao/index.html

转载请注明：TUTERM.COM » 使用canvas生成图片，js自动下载图片