[英]Canvas to base64 does not work when drawing image from file
我正在將圖像從文件繪制到HTML5畫布。 圖像在畫布上繪制良好。 當我將其發送到PHP以將base64字符串保存到服務器時,我總是得到空圖像...空圖像僅是當我將圖像繪制到畫布上時,如果我繪制類似圖像將被保存為繪制的東西。
例如,將其提交到PHP,並將圖像按繪制的方式保存到磁盤...
var canvas = $("canvas")[0];
var context = canvas.getContext("2d"),
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
var dataURL = canvas.toDataURL();
var input = $("<input>").attr("type", "hidden").attr("name", "profile_pic_data").val(dataURL);
$("form").append($(input));
這個不會。 此代碼使用戶可以瀏覽圖像文件並進行裁剪。 然后將裁剪后的圖像繪制到畫布上,效果很好,但是當我將其發送到PHP(與上述方法相同)時,我總是得到空白圖像(無論我選擇並繪制的圖像,base64字符串也總是相同)? 我幾乎嘗試了所有事情,但不知道做錯了什么地方...
function loadImageFile() {
if (document.getElementById("uploadfile").files.length === 0) return;
var e = document.getElementById("uploadfile").files[0];
if (!rFilter.test(e.type)) {
return
}
oFReader.readAsDataURL(e)
}
var one = new CROP;
$("body").on("click", ".newupload", function () {
$(".uploadfile").click()
});
$("body").change(".uploadfile", function () {
loadImageFile();
$(".uploadfile").wrap("<form>").closest("form").get(0).reset();
$(".uploadfile").unwrap()
});
oFReader = new FileReader, rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function (e) {
$(".profile-pic").html('<div class="default"><div class="cropMain"></div><div class="cropSlider"></div></div>');
one = new CROP;
one.init(".default");
one.loadImg(e.target.result);
}
$('#form_profile').submit(function(e) {
var canvas = $("canvas")[0];
var e = canvas.getContext("2d"),
t = new Image,
n = coordinates(one).w,
r = coordinates(one).h,
i = coordinates(one).x,
s = coordinates(one).y,
o = 240,
u = 240;
t.src = coordinates(one).image;
t.onload = function () {
e.drawImage(t, i, s, n, r, 0, 0, o, u);
}
var dataURL = canvas.toDataURL();
var input = $("<input>").attr("type", "hidden").attr("name", "profile_pic_data").val(dataURL);
$(this).append($(input));
});
這是我的PHP,應該可以運行:
$upload_dir = DOCROOT.'assets/img/profile-pics/';
$img = $_POST['profile_pic_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir.$this->current_user->id.'.png';
$success = file_put_contents($file, $data);
根據@Ian的評論回答我自己的解決方案。 表單正在提交空畫布,因為它是在提交之前Image.onload在畫布上繪制完成的。
Image.onload完成后,需要進行更改以提交表單。 這是更新的代碼:
$('#btn-profile-update').click(function(e) {
if($('.crop-img').length)
{
$("canvas").remove();
$('#form_profile').after('<canvas id="profile-pic-canvas" width="240" height="240" id="canvas"/>');
var canvas = $("canvas")[0];
var e = canvas.getContext("2d"),
t = new Image,
n = coordinates(one).w,
r = coordinates(one).h,
i = coordinates(one).x,
s = coordinates(one).y,
o = 240,
u = 240;
t.src = coordinates(one).image;
t.onload = function () {
e.drawImage(t, i, s, n, r, 0, 0, o, u);
var dataURL = canvas.toDataURL();
var input = $("<input>").attr("type", "hidden").attr("name", "profile_pic_data").val(dataURL);
$('#form_profile').append($(input));
$('#form_profile').submit();
}
}
else
{
$('#form_profile').submit();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.