js保存图片--html2canvas

在线小白www

已于 2022-05-19 18:27:39 修改

阅读量434

点赞数

分类专栏： JavaScript 文章标签： javascript css 开发语言

于 2022-05-10 17:05:57 首次发布

原文链接：https://blog.csdn.net/weixin_42215897/article/details/115380437

版权

JavaScript 专栏收录该内容

128 篇文章 7 订阅

订阅专栏

工作原理

html2canvas库的工作原理并不是真正的“截图”，而是读取网页上的目标DOM节点的信息来绘制canvas，所以它并不支持所有的css属性（参考地址）

下载地址

Releases · niklasvh/html2canvas · GitHubScreenshots with JavaScript. Contribute to niklasvh/html2canvas development by creating an account on GitHub.https://github.com/niklasvh/html2canvas/releases

使用

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<title>保存图片</title>
</head>

<body>
	<div id="app">
		<img src="" id="image" alt="">
		<a onclick="getImage()">toImage</a>
		<div id="test">test</div>
	</div>
	<script src="./html2canvas.js"></script>
	<script>
		function getImage() {
			html2canvas(document.getElementById('test'), {
				allowTaint: true, //是否允许跨域
				useCORS: true, //是否尝试加载跨源图像作为CORS服务，在返回到代理（用来解决图片跨域加载问题）
				scale: window.devicePixelRatio,
				// width:1200,
				// height:500,
				onrendered: function (canvas) {
					var url = canvas.toDataURL()
					var triggerDownload = document.getElementById('image')
					triggerDownload.setAttribute('src', url)
					// triggerDownload.setAttribute('href', url)
					triggerDownload.style.display = 'block'
					setTimeout(() => {
						triggerDownload.style.display = 'none'
					}, 30000)
				},
			})
		}
	</script>

</body>

</html>

问题：

1.背景图片模糊
解决方案：使用img标签来实现background-image的效果

2.图片无法渲染
在img标签内加入crossorigin=‘anonymous’（crossorigin='anonymous’可以触发带跨域请求头Origin的HTTP请求）并给html2canvas设置allowTaint: true配置

3.跨域加载的图片会污染canvas，进而导致canvas无法导出数据

解决方案一、
给html2canvas设置useCORS:true加载跨域图像的配置，并且保证给每个图片添加添加crossOrigin="anonymous"属性
解决方案二、

将文件读入到blob文件对象，然后用URL.createObjectURL()方法转换成img src可用的地址，然后再转canvas
注意：读入blob文件时保证要设置的img标签内的src为空，在读入文件完成后在调用生成图片函数。

//将文件读入到blob文件在转img的方法
function getImage (url,imgId) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.responseType = 'blob';
    xhr.onload = function () {
        if (this.status == 200) {
            document.getElementById(imgId).src =  URL.createObjectURL(this.response);
        }
    };
    xhr.send();
    
}
let urltest = 'https://img.alicdn.com/imgextra/i4/1043899953/O1CN01aqVriA2NOWgJofVfU_!!0-item_pic.jpg'
getImage(urltest,'test-img')

//html2canvas生成图片的方法
function createdcvs(params) {
    html2canvas(document.querySelector("#cvs-box"),{width:1200,height:500,allowTaint: true,useCORS:true}).then(canvas => {
      document.querySelector("#box1").appendChild(canvas)
      //将canvas生成的地址放到图片内
      document.getElementById("test").src= canvas.toDataURL();
    });
  }

// setTimeout(()=>{
//   createdcvs()
// },3000)

在线小白www

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js保存图片--html2canvas

工作原理html2canvas库的工作原理并不是真正的“截图”，而是读取网页上的目标DOM节点的信息来绘制canvas，所以它并不支持所有的css属性（参考地址）下载地址Releases · niklasvh/html2canvas · GitHubScreenshots with JavaScript. Contribute to niklasvh/html2canvas development by creating an account on GitHub.https://github..
复制链接

扫一扫

专栏目录