html 이미지로 만들어서 저장하기

html페이지를 이미지로 만들어서 카카오톡에 공유하려고 했는데

다른 방식으로 진행하게 되어서 일단 작성해둔다..

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

//html페이지는 css가 안먹힐 경우 
//하나씩 개별 작성해야 한다.


//1. html 페이지를 캡쳐한다. base64
//2. base64를 blob으로 변환하여
//3. 폼을 만들고 ajax로 서버에 저장하고 
//4. 받아온 이미지 파일명을 카카오 공유할 때 사용한다.
//* 화면이 100%여야 이미지가 그나마 정확하게 캡쳐됨.
function fn_ImageSave(){
		
	//1. html 캡쳐하기
	$('html').scrollTop(0);
	
	var imgBase64 = "";
	var base64ImageContent = "";
	var blob = "";
	html2canvas(document.querySelector("#element-to-print")).then(canvas =>{
		//#element-to-print = html에서 출력할 부분 id
		imgBase64 = canvas.toDataURL('image/jpg');
		base64ImageContent = imgBase64.replace(/^data:image\/(png|jpg);base64,/,"");
		blob = base64ToBlob(base64ImageContent,'image/png');
			
		var formData = new FormData();
		formData.append('imgFile',blob);
		
        //form데이터 확인용
		//for(let value of formData.values()){
		//	console.log(value);
		//}
		
		$.ajax({
			//enctype: "multipart/form-data",
			url : 'upload',
			type : 'POST',
			cache : false,
			processData:false, //formdata를 string으로 변환하지 않음
			contentType:false, //content-type헤더가 multipart/form-data로 전송
			data : formData,
			success : function(Data){
				alert("성공 : "+ Data);
				fn_kakao(Data); //나의 경우 이미지를 저장하고 이미지 파일명을 return받음
			},
			error : function(request,status,error){
				console.log("request : "+ request.status);
				console.log("message : "+ request.responseText);
				console.log("status : "+ status)
				console.log("error : "+ error);
			}
			
		});
		
	});
	
}

function base64ToBlob(base64,mime){

	mime = mime || '';
	var sliceSize = 1024;
	var byteChars = window.atob(base64);
	var byteArrays = [];
	
	for(var offset=0, len = byteChars.length; offset < len; offset += sliceSize){
		var slice = byteChars.slice(offset,offset+sliceSize);
		
		var byteNumbers = new Array(slice.length);
		for(var i = 0; i < slice.length; i++){
			byteNumbers[i] = slice.charCodeAt(i);
		}
		var byteArray = new Uint8Array(byteNumbers);
		byteArrays.push(byteArray);
	}
	
	var blob = new Blob(byteArrays,{type:mime});
	return blob;
}

 function fn_kakao(fileName){
	 var imageURL = "http://~.com/이미지파일경로/"+fileName;
	 
	Kakao.Share.sendDefault({
		objectType:'feed',
		content:{
			title:'타이틀',
			description : '설명',
			imageUrl : imageURL,
			link:{
				mobileWebUrl : imageURL,
				webUrl : imageURL,
			},
		},
		buttons:[
			{
				title:'타이틀',
				link:{
					mobileWebUrl:'링크',
					webUrl:'링크',
				},
			},
		],
		
	});
}

 

https://ekoopmans.github.io/html2pdf.js/

html2pdf.js

 

https://2-jissun.tistory.com/8

[파일업로드 에러 500/MultipartException]Could not parse multipart servlet request; nested exception is java.lang.IllegalS

 

https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript/16245768#16245768

Creating a BLOB from a Base64 string in JavaScript

https://stackoverflow.com/questions/23979842/convert-base64-string-to-image

Convert base64 string to image

https://stackoverflow.com/questions/35479290/multipart-file-to-file-inputstream

Multipart File to File InputStream

https://stackoverflow.com/questions/18077072/how-to-convert-multipartfile-into-byte-stream

How to convert MultipartFile into byte stream

https://www.youtube.com/watch?v=igd3kAJOxUU 

https://stackoverflow.com/questions/50427495/java-blob-to-image-file

Java BLOB to image file

https://webisfree.com/2020-08-05/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-canvas-%EC%9A%94%EC%86%8C%EB%A5%BC-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A1%9C-%EC%A0%80%EC%9E%A5-%ED%9B%84-%EC%84%9C%EB%B2%84%EC%97%90-ajax%EB%A1%9C-%EC%A0%80%EC%9E%A5%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

자바스크립트 Canvas 요소를 이미지로 저장 후 서버에 ajax로 저장하는 방법

https://caileb.tistory.com/152

MultipartFile을 사용한 File 업로드 (multipart/form-data)

https://dorongdogfoot.tistory.com/144

ajax로 파일(multipart/form-data) 전송하기

https://byul91oh.tistory.com/377

base64인코딩한 이미지를 디코딩하여 저장