웹의 URL 이미지에서 Cropper.js를 사용하려고합니다.
https://github.com/fengyuanchen/cropperjs
내 장치에서 이미지를 업로드 할 때 잘 작동하지만 온라인 사진에 관해서는 .. 다음과 같은 많은 오류가 있습니다.
출처 'null'이 CORS 정책에 의해 차단되었습니다. 요청 된 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다.
자르기가 이미지에 나타나지 않고 Cors 오류가 발생했습니다.
내 코드는 다음과 같습니다.
$(function($) {
$("#submit").click(function() {
var selectedFile = $("#imglink").val();
$("#photo").attr("src", selectedFile);
var image = document.getElementById("photo");
console.log(image);
const cropper = new Cropper(image, {
aspectRatio: 16 / 9,
cropBoxResizable: false
});
cropper.crop();
$("#crop-button").on("click", function() {
cropper.getCroppedCanvas().toBlob(function(blob) {
const formData = new FormData();
formData.append("croppedImage", blob);
$.ajax({
type: "POST",
url: "img/index.php",
data: formData,
processData: false,
contentType: false,
success: function(data) {},
error: function(err) {}
});
});
});
});
});
toDataURL캔버스의 기능을 사용 하여 이미지를 base64로 변환 한 다음 image.src.
var canvas = cropper.getCroppedCanvas()
//replacing the image url with base64 data
image.src = canvas.toDataURL();
canvas.toBlob(function(blob) {
const formData = new FormData();
formData.append("croppedImage", blob);
$.ajax({
type: "POST",
url: "img/index.php",
data: formData,
processData: false,
contentType: false,
success: function(data) {},
error: function(err) {}
});
}
그것이 효과가 있기를 바랍니다!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다