我如何知道HTML5 Canvas何时完成绘图？

Question

我是javascript的初学者。 我正在尝试在客户端调整图像大小，然后将它们上传到我的服务器进行存储我已经找到了使用HTML5 Canvas的方法： http ： //hacks.mozilla.org/2011/01/how-to-develop-一个-HTML5的图像上载/

我的问题 ：它继续上传空白图片。 我认为空白图像的原因是当我从画布抓取图像时画布没有完成绘图。 当我从画布抓取图像之前设置3秒windows.timeout一切正常。 有没有比超时更可靠的方法？ 或者还有其他方法来进行客户端图像大小调整吗？

我正在进行客户端图像大小调整的原因是因为我正在处理上传不必要的大文件的人，我认为最有效的是调整客户端图像大小。

谢谢你的任何提示/答案！

 //resize image Resizeimage.resize(file); //***if i wrap this part with timeout it works var canvas = document.getElementById('canvas'); var data = canvas.toDataURL(file.type); // convert base64/URLEncoded data component to raw binary data held in a string var bytestring; if (data.split(',')[0].indexOf('base64') >= 0) bytestring = atob(data.split(',')[1]); else bytestring = escape(data.split(',')[1]); //get imagetype var mimeString = data.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to a typed array var ia = new Uint8Array(bytestring.length); for (var i = 0; i < bytestring.length; i++) { ia[i] = bytestring.charCodeAt(i); } // create a blob from array var blob = new Blob([ia], { type: mimeString }); //upload files $scope.upload = $upload.upload({ url: 'articles/imageUpload', method: 'POST', file: blob //update progress bar }).progress(function(event) { $scope.uploadInProgress = true; $scope.uploadProgress = Math.floor(event.loaded / event.total * 100); //file upload success }).success(function(data, status, headers, config) { $scope.uploadInProgress = false; $scope.uploadedImage = JSON.parse(data); $scope.isDisabled = false; //file upload fail }).error(function(err) { $scope.uploadInProgress = false; console.log('Error uploading file: ' + err.message || err); }); //*** 

 angular.module('articles').factory('Resizeimage', [ function() { var imgSelectorStr = null; // Resizeimage service logic function render(src) { var image = new Image(); image.onload = function() { var canvas = document.getElementById('canvas'); //check the greater out of width and height if (image.height > image.width) { image.width *= 945 / image.height; image.height = 945; } else { image.height *= 945 / image.width; image.width = 945; } //draw (&resize) image to canvas var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0, image.width, image.height); }; image.src = src; } function loadImage(src) { // Create fileReader and run the result through the render var reader = new FileReader(); reader.onload = function(e) { render(e.target.result); }; reader.readAsDataURL(src); } // Public API return { resize: function(src) { loadImage(src); return true; } }; } ]); 

Answer 1

你的问题很简单。

只要你没有附加到任何事件，JavaScript就会一个接一个地运行一个语句（并且你需要这个，因为你想要在抓取图像时执行所有语句）。

如果将代码附加到事件（例如image.onload ），则代码的这一部分将等待事件，其余代码将继续异步。

所以你是对的 - 当你试图抓住它时，不会绘制图像。

通过超时（最低效/不安全）来解决它的糟糕风格通过将图像抓取代码包装在函数中并在完成图像重新调整大小后运行此函数来更好地解决这个问题。 它就像您用来同步异步事件的回调。

例

 /* setTimeout will behave like an event */ setTimeout( function(){ $('console').append("<div>SetTimeout</div>"); SynchCodeAfterTimeout(); }, 1000); AsynchCodeAfterTimeout(); function AsynchCodeAfterTimeout(){ $('console').append("<div>AsynchCodeAfterTimeout</div>"); } function SynchCodeAfterTimeout(){ $('console').append("<div>SynchCodeAfterTimeout</div>"); } 

 console{ font-family: Consolas, monaco, monospace; } 

 <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <console></console> 

代码示例

 render(); // Resizeimage service logic function render() { var image = new Image(); image.onload = function() { var canvas = document.getElementById('canvas'); //check the greater out of width and height if (image.height > image.width) { image.width *= 945 / image.height; image.height = 945; } else { image.height *= 945 / image.width; image.width = 945; } //draw (&resize) image to canvas var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0, image.width, image.height); /*timeout not needed its just there so the browser renders the canvas contents so you can see them when the alert pops up*/ setTimeout(function() { alert('yey all the drawing is done (this is synchronous)'); }); }; image.src = 'https://loremflickr.com/320/240'; } 

 <canvas id="canvas"></canvas> 

Answer 2

<script type="text/javascript">
     window.onload = function(){
         //Whatever you want to do when it has finished loading here
     }
</script>

您可以将这段代码放在HTML中或JavaScript文件中的某个位置，然后不使用脚本标记;）

希望这适合你：D

Answer 3

我有一个问题，图像画布总是空白。

然后我拖延了，现在工作正常。

setTimeout(function () {
    var da = document.getElementById("canvasFabric").toDataURL("png", "1");
    $('#FInalImage').attr("src", canvasFabric.toDataURL("png", "1"));
    window.open(da);
}, 100);