如何追加在「畫布」的形象變成了「IMG」元素

-1

<canvas id="canvas1" width="200" height="200"></canvas>

和JavaScript代碼如下：

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 
var src="https://vignette2.wikia.nocookie.net/mint524/images/d/d7/Sky.jpg/revision/latest?cb=20160706152654.jpg" 

var image = new Image(); 
image.onload = function(){ 
    ctx.drawImage(image,0,0,50,50); 
} 
ctx.fillRect(50,50,50,50); 
image.src = src 

var img = new Image(); 
img.src = can.toDataURL(); 
document.body.appendChild(img);

我想轉換canvas到img元素，但我發現我無法在canvas中將圖像追加到img元素。 Detialed代碼在here。任何人都可以提供一些建議嗎？

來源

2017-09-27 user8627119

的[腐壞畫布不得出口]可能的複製（https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported） – Halim

-2

出於安全原因，您的本地驅動器被聲明爲「其他域」，並會污染畫布。

（這是因爲你最敏感的信息可能在你的本地驅動器！）。

測試時嘗試這些替代方法：

包裝與超時的IMG出口從帆布
把所有頁面相關的文件格式（.html，.jpg和.js文件，的CSS等）上的桌面（不在子文件夾中）。
將您的圖片發佈到支持跨域共享的網站（如 dropbox.com）。確保你把你的圖片在投寄箱的公用文件夾和下載圖像時也設置了跨原點標誌（VAR IMG =新的圖片（）; img.crossOrigin =「匿名」 ......）

setTimeout(
 
    function(){ 
 
    var can = document.getElementById('canvas1'); 
 
    var img = new Image(); 
 
    img.src = can.toDataURL(); 
 
    document.body.appendChild(img); 
 
},2000);

來源

2017-09-27 11:28:13 ShlomyN

記住以信貸[你使用的答案]（https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported）零件關閉。 SO上的所有內容均以[cc by-sa 3.0，需要署名]許可（https://creativecommons.org/licenses/by-sa/3.0/）。除了最後一點，你的答案的其他部分在這方面沒有什麼意義。 – K3N

你是對的，最後一部分只是爲了顯示污染的IMG反應 – ShlomyN

如果你確保你的形象不被污染 - 看到這個問題，回答：Tainted canvases may not be exported，那麼你就可以改變你的代碼，以便您的舊圖像加載後創建的新形象：

var can = document.getElementById('canvas1'); 
 
var ctx = can.getContext('2d'); 
 
var src = "//i.imgur.com/fHyEMsl.jpg"; 
 

 
var image = new Image(); 
 
image.crossOrigin = "anonymous"; 
 

 
image.onload = function() { 
 
    ctx.drawImage(image, 0, 0, 200, 200); 
 

 
    var img = new Image(); // move this into the onload of the image to make sure the canvas has been drawn 
 
    img.src = can.toDataURL("image/png"); 
 
    document.body.appendChild(img); 
 
} 
 
image.src = src;

<p>Canvas:</p> 
 
<canvas id="canvas1" width="200" height="200"></canvas> 
 
<p>Image should appear below:</p>

來源

2017-09-27 12:08:16 Pete

好，它的工作原理。謝謝。 – user8627119

你好，我遇到另一個問題，當我使用高分辨率的圖像，而不是小圖像。它顯示錯誤：「No'Access-Control-Allow-Origin'標題出現在請求的資源上。」如何解決它？看到我的新代碼在這裏：https://jsfiddle.net/AndrewGong/mkx7f8un/9/ – user8627119

畫布作用非常相似的圖像。

當您使用canvas.toDataURL並將其分配給image.src時，您正在浪費大量內存。圖像將從dataURL中解碼，並使用與畫布相同數量的像素RAM，但dataURL也將保留在內存中。

Base64編碼不是爲了緊湊而設計的。每個Base64字符編碼6位，但每個Javascript字符使用16位。這使得dataURL比存儲在磁盤上的數據量大2.667倍，並且在某些極端情況下可以大於原始像素數據。

您可以使用canvas.toBlob()並從blob構建圖像，避免重複數據庫URL的內存開銷。但是，您仍然留下了編織圖像的編織問題。

最簡單的解決方案是將畫布視爲圖像。像將圖像添加到DOM一樣，並且可以節省嘗試編碼和解碼圖像格式的麻煩。你想從畫布不會做的圖像中得到什麼？ src？那麼這就是問題所在。

const canvas = document.createElement("canvas"); 
 
const ctx = canvas.getContext("2d"); 
 
ctx.fillRect(0,0,300,150); 
 
ctx.fillStyle = "white"; 
 
ctx.fillRect(10,10,280,130); 
 
ctx.fillStyle = "Blue"; 
 
ctx.fillRect(15,15,270,120); 
 
ctx.fillStyle = "white"; 
 
ctx.font = "28px arial"; 
 
ctx.fillText("Look like an Image", 20, 40); 
 
ctx.fillText("Acts like an Image", 20, 70); 
 
ctx.font = "20px arial"; 
 
ctx.fillText("Who cares if it's a Canvas", 20, 100); 
 
ctx.textAlign = "right"; 
 
ctx.fillText("", 270, 125); 
 

 

 
function copyCanvas(canvas){ 
 
    const c = canvas.cloneNode(); 
 
    c.getContext("2d").drawImage(canvas,0,0); 
 
    return c; 
 
} 
 
document.body.appendChild(copyCanvas(canvas));

來源

2017-09-27 16:15:54 Blindman67

如何追加在「畫布」的形象變成了「IMG」元素

回答

相關問題