php绘制图像黑色的数值,canvas.toDataURL（）通过尝试调整base64的大小而导致黑色图像字符串...

我目前正在尝试调整base64图像的大小，因为图像文件太大而无法在稍后使用php进行处理。我找到了一种通过使用画布调整图像大小来实现这一点的方法。不幸的是，我得到的图像只是一个宽度为300px，高度为150px的黑色领域。也许它与img.onload和canvas.toDataURL()命令有关，或者我只是使用了错误的事件(img.onload)。任何想法的错误可以是？canvas.toDataURL()通过尝试调整base64的大小而导致黑色图像字符串

function exportImg(val){

var imageData = $('#image-cropper').cropit('export', {originalSize: true});

imageData = imageData.replace(/^data:image\/[a-z]+;base64,/, "");

var imageDataRes = resize(imageData);

$.post('php/upload.php', { imageDataRes: imageDataRes });

}

function resize(base64){

// Max size for thumbnail

var maxWidth = 900;

var maxHeight = 900;

// Create and initialize two canvas

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");

var canvasCopy = document.createElement("canvas");

var copyContext = canvasCopy.getContext("2d");

// Create original image

var img = new Image();

img.src = base64;

img.onload = function(){

// Determine new ratio based on max size

var ratio = 1;

if(img.width > maxWidth) {

ratio = maxWidth/img.width;

}

else if(img.height > maxHeight) {

ratio = maxHeight/img.height;

}

// Draw original image in second canvas

canvasCopy.width = img.width;

canvasCopy.height = img.height;

copyContext.drawImage(img, 0, 0);

// Copy and resize second canvas to first canvas

canvas.width = img.width * ratio;

canvas.height = img.height * ratio;

ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);

}

alert(canvas.toDataURL());

return canvas.toDataURL();

}

编辑：

什么是异步在这种情况下，如何解决呢？对不起，但不幸的是，我不明白这可以帮助我进一步。 $.post完美的作品，我得到的图像。我只是不明白img.onload和toDataURL()以及我应该如何将它们从一个功能解析到另一个功能。起初，我得到一个空白的结果，根本没有字符串(只是data,)，但通过添加这个img.onload我终于得到了一些base64字符串......但它只是黑屏。

2017-06-06

PLAYCUBE

+0

是'img.onload'是异步的。你需要将你的'toDataURL'调用包装在这个事件处理程序中。请参阅https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call –

+0

可能的重复[如何从异步调用返回响应？]( https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) –

+0

关于你的编辑，'img.onload'内部的函数将被异步调用。这意味着它将在完整的js当前执行完成后调用。因此，在'resize'中创建canvas，img元素，并返回空画布的dataURL。只有这样，当调用'exportImg'的脚本(即使在'.post'后面)，你才能在画布上绘制图像，太迟了。您需要使用回调才能发布dataURL，它本身只在图像加载完成后才抓取。 'img.onload = function(){ctx.drawImage(img，0,0);回调(canvas.toDataURL())' –