I'm using the function below to resize and image using canvas

var img = new Image(); img.src = reader.result; img.onload = function() { var max_width = 800; var max_height = 800; var tempW = img.width; var tempH = img.height; var aspect_ratio = 1; if (tempW > tempH) { if (tempH > max_height){ var aspect_ratio = tempH / max_height } } else { if (tempW > max_width){ var aspect_ratio = tempW / max_width } } tempH = tempH / aspect_ratio; tempW = tempW / aspect_ratio; var canvas = document.createElement('canvas') canvas.id = "uploadedcanvas"; canvas.width = tempW; canvas.height = tempH; var ctx = canvas.getContext("2d"); ctx.fillStyle="#FFFFFF"; ctx.fillRect(0,0,tempW,tempH); ctx.drawImage(this, 0, 0, tempW, tempH); var dataURL = canvas.toDataURL("image/jpeg"); createsecondimage(dataURL,tempW,tempH,max_width,max_height,canvas) }

This is able to resize an image from taken from file reader. I would like to create a second image in the same canvas using the dataURL as the image source but this it does not seem to work this is what I'm doing

function createsecondimage(dataURL,tempW,tempH,max_width,max_height,canvas){ var copy = document.createElement('canvas'); copy.width = max_width; copy.height = max_height; var copyctx = copy.getContext("2d"); var sx = (tempW - max_width) / 2 var sy = (tempH - max_height) /2 copyctx.fillStyle="#FFFFFF"; copyctx.fillRect(0,0,max_width,max_height); var imgcopy = new Image(); imgcopy.src = dataURL; imgcopy.onload = function() { copyctx.drawImage(imgcopy, sx, sy, 800, 800,0, 0, 800, 800); var dataURL_ = copy.toDataURL("image/jpeg"); }

However datURL_ appears to be empty. I'm not sure why this is the case. Ideally I would want to create a new image using the image that was just resized.

我使用下面的函数来调整图像的画布

var img = new Image(); img.src = reader.result; img.onload = function() { var max_width = 800; var max_height = 800; var tempW = img.width; var tempH = img.height; var aspect_ratio = 1; if (tempW > tempH) { if (tempH > max_height){ var aspect_ratio = tempH / max_height } } else { if (tempW > max_width){ var aspect_ratio = tempW / max_width } } tempH = tempH / aspect_ratio; tempW = tempW / aspect_ratio; var canvas = document.createElement('canvas') canvas.id = "uploadedcanvas"; canvas.width = tempW; canvas.height = tempH; var ctx = canvas.getContext("2d"); ctx.fillStyle="#FFFFFF"; ctx.fillRect(0,0,tempW,tempH); ctx.drawImage(this, 0, 0, tempW, tempH); var dataURL = canvas.toDataURL("image/jpeg"); createsecondimage(dataURL,tempW,tempH,max_width,max_height,canvas) }

这是能够调整图像从文件阅读器。然而daturl_似乎是空的。

function createsecondimage(dataURL,tempW,tempH,max_width,max_height,canvas){ var copy = document.createElement('canvas'); copy.width = max_width; copy.height = max_height; var copyctx = copy.getContext("2d"); var sx = (tempW - max_width) / 2 var sy = (tempH - max_height) /2 copyctx.fillStyle="#FFFFFF"; copyctx.fillRect(0,0,max_width,max_height); var imgcopy = new Image(); imgcopy.src = dataURL; imgcopy.onload = function() { copyctx.drawImage(imgcopy, sx, sy, 800, 800,0, 0, 800, 800); var dataURL_ = copy.toDataURL("image/jpeg"); }

我不知道为什么会这样。我想使用图像，只是大小创建一个新的形象。我想使用图像，只是大小创建一个新的形象。