圖像導入在Firefox中不起作用在Firefox上工作

我是一個真正的JavaScript或jQuery文盲，只是試圖排除以前創建的功能。這適用於Firefox，但在Chrome上失敗。我導入一張圖片，然後裁剪所需的數據，但有時圖片不清晰，而且很小，所以我需要放大縮小功能，然後因爲縮放集中在中心的圖像我需要給一個移動選項，左右移動圖像，移動和縮放單獨img標籤是可能的，所以我使用它，它在Firefox上運行良好，沒有任何錯誤，但圖像並沒有顯示在鉻，下面是與導入圖像和創建畫布相關的代碼塊。之前的開發人員使用div標籤來創建畫布，但縮放和移動對我來說並不適用於div標籤。請詢問是否需要其他細節。圖像導入在Firefox中不起作用在Firefox上工作

$("#movingImage").empty(); 
//$("#movingImage").attr("src", image.src); 
$("#movingImage").append("<canvas id=\"canvas\">"); 
canvas = $("#canvas")[0]; 
context = canvas.getContext("2d"); 
canvas.width = image.width; 
canvas.height = image.height; 
context.drawImage(image, 0, 0);

的HTML如下：

<div id="views" > 
<img src="" id="movingImage" alt="" /> 
</div>

來源

2017-07-17 Vijay R

你好維傑更換你img節點，歡迎SO！請看看[如何提出一個好問題]的文檔（https://stackoverflow.com/help/how-to-ask）。我邀請你展示一個關於chrome中發生的錯誤的更詳細的描述。 –

「在firefox上工作但在Chrome上失敗」不提供合適的細節。請更詳細地描述問題幷包含任何相關的錯誤消息（檢查控制檯是否有錯誤）。 – Marvin

@ Marvin：編輯 –

的append()方法插入給定元素作爲目標的子項。然而，img標籤不能有孩子。也許嘗試after而不是？

出於同樣的原因，不知道，如果empty()方法在這裏工作......

您也可以嘗試replaceWith()方法與創建帆布

來源

2017-07-17 09:28:56 Tibo

它如何在Firefox中完美工作呢？ –

這是一些很好的信息，你給了我Tibo，現在功能可以工作，但整個頁面是一團糟，因爲該函數總共運行5次，每次顯示一個新的圖像，現在因爲「空」的方法不起作用，第一個圖像顯示了5次，第二個4，第三個3等...有什麼辦法可以實現，是否有替代空方法？ –

你嘗試過'replaceWith（）'嗎？而不是'empty'，也許你可以使用['remove（）']（https://api.jquery.com/remove/）方法 – Tibo

圖像導入在Firefox中不起作用在Firefox上工作

回答

相關問題