html2canvas.min.js生成图片

最新推荐文章于 2024-04-29 00:33:25 发布

kilito_01

最新推荐文章于 2024-04-29 00:33:25 发布

阅读量656

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/kilito_01/article/details/125999677

版权

js 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

// 生成海报图片
						var htmlDom = $('.poster')[0];
						html2canvas(htmlDom, {
							backgroundColor: '#ffffff00',
							scale:2
						}).then(function(canvas) {
							$('#prev_img').attr('src', canvas.toDataURL("image/png"));
							 $(".loading-page").hide()
							// 隐藏排版页面
							$(".poster").hide()
							// 显示海报页面
							$("#showPoster").show()
						});

将页面的html生成海报一样的图片
scale太大可能生成图片的时间会比较久
一般都是2
生成图片后的操作就是给一个空链接的img附上生成好的图片地址
将html排版页面隐藏将海报的图片页显示出来

getBase64(url, callback) {
						var Img = new Image(),
							dataURL = '';
						Img.setAttribute('crossOrigin', 'Anonymous'); // 需要在src前设置允许跨域，否则部分浏览器会报异常
						Img.src = url + '?v=' + Math.random();
						Img.onload = function() {
							var canvas = document.createElement('canvas'),
								width = Img.width,
								height = Img.height;
							canvas.width = width;
							canvas.height = height;
							canvas.getContext('2d').drawImage(Img, 0, 0, width, height);
							dataURL = canvas.toDataURL('image/jpeg');
							return callback ? callback(dataURL) : null;
						};
					}