์๋ ๋ชจ๋,
์ฌ๊ธฐ ๋ด ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ์ฌ์ฉ์๊ฐ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํ ๋ค์ html2canvas๋ฅผ ํตํด ์ด๋ฏธ์ง๋ก ์์ฑํ๋ฉด ์ด์ ์ ์ ๋ก๋ํ ์ด๋ฏธ์ง๊ฐ ํ์ ๋ฉ๋๋ค. ์ ๋ก๋๋ ์ด๋ฏธ์ง๋ง ํ์ ์ค์ ๋๋ค. ์ด๋ฏธ ํ์๋ ์์๊ฐ ์๋ ๊ฒฝ์ฐ ํ์ ํ์ง ์์ต๋๋ค.
(iOS์์๋ง ๋ฐ์)
์ด์ ๋ํ ํด๊ฒฐ์ฑ ์ด ์์ต๋๊น?
์๊ฐ ๋ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค !
๋ด ๊ฒฝํ์ ๋ฐ๋ฅด๋ฉด iOS ์ฅ์น๋ก ์ฐ์ ์ฌ์ง์ ๋ชจ๋ ๊ฐ๋ก ๋ชจ๋๋ก exif ํ๊ทธ Orientation
๋ก ์ ์ฅ๋ฉ๋๋ค. ์ด ํ๊ทธ๋ฅผ ์ฝ๊ณ ์ด๋ฏธ์ง๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ํ์ /ํ์ํ๋ ๋ฐฉ๋ฒ์ ์ฐพ์์ผ ํฉ๋๋ค.
์ธํฐ๋ท ์ ์๋ฅผ ์ํด:
๊ฐ์ ๋ฌธ์ ๊ฐ ์์๊ณ https://github.com/blueimp/JavaScript-Load-Image ๋ฅผ ์ฌ์ฉํ์ฌ ๋๋ฌ์ต๋๋ค.
function readURL(input){
loadImage( input.files[0],
function (img) {
img.id = "uploaded_image";
$('#uploaded_image').replaceWith(img);
var $panzoom = $('#uploaded_image').panzoom({
$zoomIn: $(".zoom-in"),
$zoomOut: $(".zoom-out"),
$zoomRange: $(".zoom-range"),
minScale: 0.1
//$reset: $(".reset")
});
},
{canvas: true,orientation:true} // Options
);
$("#submission_upload_image").hide()
$("#submission_upload_image").remove()
}
์ด๊ฒ์ ์ค๋๋์์ง๋ง์ด ๊ธฐ๋ฅ์ ์ด๋ป๊ฒ ์ฌ์ฉํฉ๋๊น?
@davidmann4 ์๋ ํ์ธ์ David ๋ง์ํ์ ๊ฒ๊ณผ ๊ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ์์ ์ฌํญ์ด ์๋ํ๋๋ก ํ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผ ํฉ๋๊น?
$('#file_output').attr('src', URL.createObjectURL(event.target.files[0]));
๋ด ์บ๋ฒ์ค์์ ๋ด ์ด๋ฏธ์ง์ src๋ฅผ ๋ณ๊ฒฝํ๊ธฐ ์ํด html2canvas์์ ์ด๊ฒ์ ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ์ฌ๊ธฐ์ ์ฝ๋๋ฅผ ์ด๋ป๊ฒ ์ถ๊ฐํ ์ ์์ต๋๊น?
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ธํฐ๋ท ์ ์๋ฅผ ์ํด:
๊ฐ์ ๋ฌธ์ ๊ฐ ์์๊ณ https://github.com/blueimp/JavaScript-Load-Image ๋ฅผ ์ฌ์ฉํ์ฌ ๋๋ฌ์ต๋๋ค.