快捷導(dǎo)航

vue使用html2canvas生成圖片實(shí)現(xiàn)方式

更新時間：2026年03月23日 09:10:37 作者：木子靜靜

這篇文章主要介紹了vue使用html2canvas生成圖片實(shí)現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1.安裝html2canvas插件

npm install --save html2canvas

2.在需要用到的.vue文件中引入

import html2canvas from 'html2canvas'

3.代碼片段

說明：

如果要被生成圖片的dom是超出屏幕需要滾動才能查看的話，
需要加上width,height windowWidth,windowHeight 這些屬性才能保證截圖的完整性，
windowHeight的值用document.body.scrollHeight也行，具體看需求如何。

<template>
	<div>
		<button @click="createImg">生成圖片并下載到本地</button>
		<button @click="saveImg">生成圖片并上傳到服務(wù)器</button>
		<div ref="content" style="width:200px;height:200px;border:1px solid #333333;">
			此dom是要被保存成圖片的
		</div>
	</div>
</template>
<script>
	import html2canvas from 'html2canvas'
	export default {
		data(){
			return {
			}
		},
		methods:{
			createImg(){
				let content = this.$refs.content
				let scrollHeight = content.scrollHeight
				let scrollWidth = content.scrollWidth
				html2canvas(content,{
						scale: window.devicePixelRatio*2,
						useCORS: true , //開啟跨域配置，但和allowTaint不能共存
						width:scrollWidth,
						height:scrollHeight,
						windowWidth:scrollWidth,
						windowHeight:scrollHeight,
						x:0,
						y:window.pageYOffset
					}).then((canvas) => {
						this.operType = 'edit'
						let dataURL = canvas.toDataURL("image/jpg");
						let link = document.createElement("a");    
						link.href = dataURL;
						let filename = `${new Date().getTime()}.jpg`;  //文件名稱
						link.setAttribute("download", filename);
						link.style.display = "none"; //a標(biāo)簽隱藏
						document.body.appendChild(link);
						link.click();
					})
			},
			saveImg(){
				html2canvas(this.$refs.content,{
					scale: window.devicePixelRatio*2,
					useCORS: true , //開啟跨域配置，但和allowTaint不能共存
					width:content.scrollWidth,
					height:content.scrollHeight,
					windowWidth:content.scrollWidth,
					windowHeight:content.scrollHeight,
					x:0,
					y:window.pageYOffset
				}).then((canvas) => {
					let dataURL = canvas.toDataURL("image/png");
					this.operType = 'edit'
					let filename = `${new Date().getTime()}.png`;
					let file_url = dataURLtoFile(dataURL, filename,"image/png"); //將文件轉(zhuǎn)換成file的格式，就可以使用file_url傳遞給服務(wù)端了
					
					let formData = new FormData()
					formData.append('file',file_url)
					
					//這個uploadFile 根據(jù)自己上傳接口的名字寫
					uploadFile(formData).then(res=>{
						//此處具體業(yè)務(wù)具體操作
					})
				});
			},
			//將base64格式轉(zhuǎn)換成file的格式
			dataURLtoFile(base64, filename,contentType) { 
				let arr = base64.split(',')  //去掉base64格式圖片的頭部
				let bstr = atob(arr[1])   //atob()方法將數(shù)據(jù)解碼
				let leng = bstr.length
				let u8arr = new Uint8Array(leng)
				while(leng--){
					u8arr[leng] =  bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 編碼
				}
				return new File([u8arr],filename,{type:contentType}) 
			}
		}
	}
</script>

具體的屬性可以參考官方文檔

4.小記

//1. 生成的背景默認(rèn)為白色,可以通過 backgroundColor 屬性修改背景顏色
html2canvas(this.$refs.content, {
  backgroundColor: null // null 表示設(shè)置背景為透明色
}.then(img => {});

//2.截圖有時會錯位，是因?yàn)椴恢С帜承ヽss屬性造成的，調(diào)整css樣式即可，有時margin 也會有影響。

5.補(bǔ)充

在移動端H5使用中，會有ios截圖失效問題，目前的解決方案是修改html2canvas版本為1.0.0

調(diào)用方法如下：

    (window.html2canvas || html2canvas)(content,
    {
      scale: window.devicePixelRatio, //window.devicePixelRatio * 2
      useCORS: true, //開啟跨域配置，但和allowTaint不能共存
      width: scrollWidth,
      height: scrollHeight,
      windowWidth: scrollWidth,
      windowHeight: scrollHeight,
      x: 0,
      y: 0
    }).then(canvas => {
      let url = canvas.toDataURL("image/jpg");
      console.log(url)
      this.picUrl = url
    })
    .catch(err => {
      // do sth
    });