下載按鈕未在 javascript 中下載圖像

Question

我有一個 html 畫布，其中正在顯示數據庫中的圖像，用戶可以向圖像添加動態文本並使用輸入的文本下載該圖像。 以下是我的代碼：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="style.css"> <div class="container"> <div style="margin-top: 5%;" class="row"> <?php require('db_config.php'); $id=$_GET['editid']; $sql = "SELECT * FROM image_gallery where id='$id'"; $images = $mysqli->query($sql); while($image = $images->fetch_assoc()){ ?> <div class="col-md-5"><canvas id="imageCanvas"></canvas></div> <div class="col-md-1"></div> <div style="margin-left: 2%;" class="col-md-5"> <div class="modal-content"> <div class="modal-header"> <h4 class="something"> <?php echo $image['title']; ?> </h4> <div class="modal-body"> <form method="post" action="" id="form_name"> <div class="row"> <div class="col-md-12"> <input class="lolan" type="text" id="name" placeholder="Full Name" required /> <!-- <label for="name" class="form__label">Full Name</label> --> </div> <div id="chumma" class="col-md-12"> <button id="download" type="submit" onclick="download_image()" name="button" value="Download" class="btn btn-primary">Download</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> var text_title = "Heading"; var canvas = document.getElementById('imageCanvas'); var ctx = canvas.getContext('2d'); var img = new Image(); // img.crossOrigin = "anonymous"; window.addEventListener('load', DrawPlaceholder) function DrawPlaceholder() { img.onload = function() { DrawOverlay(img); DrawText(text_title); DynamicText(img) }; img.src = 'uploads/<?php echo $image[' image '] ?>'; } var canvas = document.getElementsByTagName('canvas')[0]; canvas.width = 500; canvas.height = 500; function DrawOverlay(img) { ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height); ctx.fillStyle = 'rgba(230, 14, 14, 0)'; ctx.fillRect(0, 0, canvas.width, canvas.height); } function DrawText(text) { ctx.fillStyle = "black"; ctx.textBaseline = 'middle'; ctx.font = "50px 'Montserrat'"; ctx.fillText(text, 50, 50); } function DynamicText(img) { document.getElementById('name').addEventListener('keyup', function() { ctx.clearRect(0, 0, canvas.width, canvas.height); DrawOverlay(img); text_title = this.value; DrawText(text_title); }); } function download_image() { var canvas = document.getElementById("mcanvas"); image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); var link = document.createElement('a'); link.download = "my-image.png"; link.href = image; link.click(); } </script> <?php } ?>

現在當我點擊下載按鈕時，它沒有下載圖像。 誰能告訴我這里有什么問題，提前致謝

Answer 1

默認情況下，當您在表單中放置按鈕時，按鈕上的單擊事件將使表單提交。 你必須防止它發生。

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

 document.getElementById('download').addEventListener('click', function(e){
      e.preventDefault();
      download_image()
 });

使用這個而不是使用onclick=download_image()用戶這個方法。

另一個解決方案如何防止 onclick 方法中的默認事件處理？