最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

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

移动端开发 AZ 2751浏览 0评论

前几应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自动下载图片

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!