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
Client-side HTML-to-PDF rendering using pure JS.
ekoopmans.github.io
https://2-jissun.tistory.com/8
[파일업로드 에러 500/MultipartException]Could not parse multipart servlet request; nested exception is java.lang.IllegalS
스프링에서 파일업로드와 관련된 코드를 넣을때 다음과 같은 에러가 뜰때가 있다. Could not parse multipart servlet request; nested exception is java.lang.IllegalStateException: Unable to process parts as no multi-part configura
2-jissun.tistory.com
Creating a BLOB from a Base64 string in JavaScript
I have Base64-encoded binary data in a string: const contentType = 'image/png'; const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/
stackoverflow.com
https://stackoverflow.com/questions/23979842/convert-base64-string-to-image
Convert base64 string to image
I am trying to crop/resize user profile image using jquery plugin namely crop.js which sends user image as base64 via ajax to my controller as $.ajax({ type: "post", dataType: "...
stackoverflow.com
https://stackoverflow.com/questions/35479290/multipart-file-to-file-inputstream
Multipart File to File InputStream
How can I convert a MultipartFile to FileInputStream in memory? I have tried to below , but i am facing the error as org.springframework.web.multipart.commons.CommonsMultipartFile cannot be c...
stackoverflow.com
https://stackoverflow.com/questions/18077072/how-to-convert-multipartfile-into-byte-stream
How to convert MultipartFile into byte stream
//Or any other solution to saving multipartfile into DB. I tried with this way but getting error. File fileOne = new File("file.getOrignalFileName");//what should be kept inside this method byte[]
stackoverflow.com
https://www.youtube.com/watch?v=igd3kAJOxUU
https://stackoverflow.com/questions/50427495/java-blob-to-image-file
Java BLOB to image file
I have a Blob object retrieved from a MySQL database by calling ResultSet.getBlob. Blob imageBlob; while (rs.next()) { imageBlob= rs.getBlob("face"); } after that my imageBlob is som...
stackoverflow.com
자바스크립트 Canvas 요소를 이미지로 저장 후 서버에 ajax로 저장하는 방법
자바스크립트를 사용하여 캔버스 요소를 이미지로 변환하여 서버에 비동기식 ajax로 전송하는 방법을 알아봅니다.
webisfree.com
https://caileb.tistory.com/152
MultipartFile을 사용한 File 업로드 (multipart/form-data)
MultipartFile을 사용한 File 업로드 (multipart/form-data) SpringFramework환경의 서버라면 SpringFramework에서 제공하고 있는 MultipartFile 클래스와 MultipartHttpServletRequest 클래스를 사용해서 File 업로드 기능을 구현
caileb.tistory.com
https://dorongdogfoot.tistory.com/144
ajax로 파일(multipart/form-data) 전송하기
AS-IS 소스에서는 사용자가 선택한 파일을 업로드하는 소스를 1 2 3 4 Save Colored by Color Scripter cs 이런 식으로 구현했으나 TO-BE로 전환하면서는 파일 업로드 후 자바스크립트 단에서 콜백함수를 호출
dorongdogfoot.tistory.com
https://byul91oh.tistory.com/377
base64인코딩한 이미지를 디코딩하여 저장
public class Base64ToImgDecoder { public static boolean decoder(String base64, String target){ String data = base64.split(",")[1]; byte[] imageBytes = DatatypeConverter.parseBase64Binary(data); try { BufferedImage bufImg = ImageIO.read(new ByteArrayInputSt
byul91oh.tistory.com
'차근차근 > JAVA Script' 카테고리의 다른 글
ajax뒤로가기 시 이전 데이터 유지 (0) | 2023.09.05 |
---|---|
마우스 오버 모바일에서 한번 더 터치해야 사라짐..해결중.. (0) | 2023.08.25 |
form 안에 데이터 전체 확인하기 (0) | 2023.01.30 |
swiper , tap (0) | 2023.01.20 |
js 3분 카운트 다운 (0) | 2022.12.07 |