我可以從canvas元素中獲取圖像並將其用於img src標籤嗎？

是否有可能將當前畫布元素中的圖像轉換爲img src表示的圖像？我可以從canvas元素中獲取圖像並將其用於img src標籤嗎？

我需要在一些轉換後裁剪圖像並保存。我在互聯網上找到的功能有：或ToBlop(),toDataURL(), getImageData()，但我不知道如何在JavaScript中正確實現和使用它們。

這是我的html：

<img src="http://picture.jpg" id="picture" style="display:none"/> 
<tr> 
    <td> 
     <canvas id="transform_image"></canvas> 
    </td> 
</tr> 
<tr> 
    <td> 
     <div id="image_for_crop">image from canvas</div> 
    </td> 
</tr>

在JavaScript中應該是這個樣子：

$(document).ready(function() { 
    img = document.getElementById('picture'); 
    canvas = document.getElementById('transform_image'); 

    if(!canvas || !canvas.getContext){ 
     canvas.parentNode.removeChild(canvas); 
    } else { 
     img.style.position = 'absolute'; 
    } 
    transformImg(90); 
    ShowImg(imgFile); 
} 

function transformImg(degree) { 
    if (document.getElementById('transform_image')) { 
     var Context = canvas.getContext('2d'); 
     var cx = 0, cy = 0; 
     var picture = $('#picture'); 
     var displayedImg = { 
      width: picture.width(), 
      height: picture.height() 
     }; 
     var cw = displayedImg.width, ch = displayedImg.height 
     Context.rotate(degree * Math.PI/180); 
     Context.drawImage(img, cx, cy, cw, ch); 
    } 
} 

function showImg(imgFile) { 
    if (!imgFile.type.match(/image.*/)) 
    return; 

    var img = document.createElement("img"); // creat img object 
    img.id = "pic"; //I need set some id 
    img.src = imgFile; // my picture representing by src 
    document.getElementById('image_for_crop').appendChild(img); //my image for crop 
}

我怎樣才能改變canvas元素爲img src圖像在這個腳本？（有可能在這個腳本的一些錯誤。）

來源

2012-04-21 kassprek

canvas.toDataURL()將爲您提供可以用來作爲源data url：

var image = new Image(); 
image.id = "pic" 
image.src = canvas.toDataURL(); 
document.getElementById('image_for_crop').appendChild(image);

參見：

MDN: canvas.toDataURL() documentation

來源

2012-04-21 09:38:48 Zeta

東西是錯誤的，腳本不適合我，我不知道爲什麼。我將它實現爲showImg（）函數，參見我的小提琴http://jsfiddle.net/kacprek/gfyWK/8/ – kassprek 2012-04-21 13:05:17

應該是'canvas.toDataURL（）'，注意大小寫。 – 2013-06-25 16:29:54

我發現你的小提琴有兩個問題，其中一個問題首先出現在Zeta的答案中。

該方法不是toDataUrl();是toDataURL();並且您忘記將畫布存儲在變量中。

所以現在撥弄工作正常http://jsfiddle.net/gfyWK/12/

我希望這有助於！

來源

2012-11-14 18:25:25 limoragni

canvas.toDataURL如果原始圖像URL（相對或絕對）不屬於與網頁相同的域，則不起作用。從包含圖像的網頁中的小書籤和簡單的JavaScript進行測試。看看David Walsh的工作example。把html和圖像放在你自己的web服務器上，將原始圖像切換到相對或絕對URL，轉換到外部圖像URL。只有前兩種情況在起作用。

來源

2012-11-22 23:33:28 skyrail

這樣做。在關閉身體標記之前將其添加到文檔的底部。

<script> 
    function canvasToImg() { 
     var canvas = document.getElementById("yourCanvasID"); 
     var ctx=canvas.getContext("2d"); 
     //draw a red box 
     ctx.fillStyle="#FF0000"; 
     ctx.fillRect(10,10,30,30); 

     var url = canvas.toDataURL(); 

     var newImg = document.createElement("img"); // create img tag 
     newImg.src = url; 
     document.body.appendChild(newImg); // add to end of your document 
    } 

    canvasToImg(); //execute the function 
</script>

當然，在您的文檔中的某處您需要它將抓取的畫布標籤。

<canvas id="yourCanvasID" />

來源

2013-10-30 01:11:26 honkskillet

我做了一些修改以傳遞id或canvas元素： canvasToImg = function =（id）{ var canvas = document.getElementById（id）|| id; ... – ESL 2015-05-08 22:36:05

更正的小提琴 - 更新顯示覆制到畫布上圖片...

，然後右鍵單擊可以保存爲.png

http://jsfiddle.net/gfyWK/67/

<div style="text-align:center"> 
<img src="http://imgon.net/di-M7Z9.jpg" id="picture" style="display:none;" /> 
<br /> 
<div id="for_jcrop">here the image should apear</div> 
<canvas id="rotate" style="border:5px double black; margin-top:5px; "></canvas> 
</div>

加上JS在小提琴頁面上...

乾杯硅

目前正在研究保存這文件的服務器--- ASP.net C＃（的.aspx Web窗體頁）任何意見將是很酷....在

來源

2014-11-14 14:56:56

我可以從canvas元素中獲取圖像並將其用於img src標籤嗎？

回答

相關問題