當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

利用HTML5 canvas合并图片并解决Filaed to execute 'toDataURL' on 'HTMLCanvasElement'异常

發布時間：2023/12/31 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了利用HTML5 canvas合并图片并解决Filaed to execute 'toDataURL' on 'HTMLCanvasElement'异常小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

有兩張圖片，如下圖所示，如何將兩張圖片合并成一張？

使用HTML5的canvas相關知識可以簡單快捷地解決此需求。

目錄結構：

源碼使用原生js，不需要引入第三方庫：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas</title><style>.hide {display: none;}.image1 {width: 500px;height: 300px;}.image2{width:300px;height: 200;}#newImgContainer {width: 500px;height: 300px;}</style> </head> <body><canvas id="canvas" width="500" height="300">Your browser does not support the HTML5 canvas tag.</canvas><img id="image1" src="images/1.png" alt="" class="image2" src="images/2.png" alt="" class="image2 hide"><div id="newImgContainer"></div> </body> <script>function draw() {// 獲取canvasvar canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');// 獲取圖片var image1 = document.getElementById('image1');var image2 = document.getElementById('image2');// 將兩張圖片畫在canvas上ctx.drawImage(image1, 0, 0, 500, 300)ctx.drawImage(image2, 100, 50, 300, 200)// 將canvas轉成圖片var img = document.createElement('img');img.src = canvas.toDataURL('image/png');// 將圖片掛在newImgContainer上document.getElementById('newImgContainer').appendChild(img)}window.onload = function() {draw();} </script> </html>

在服務器中運行的結果：

注：如果不放在服務器中運行，會報以下錯誤：

解決辦法：將demo放到服務器環境下運行即可解決，可以考慮自己寫一個nodejs服務器，用于測試本地網頁項目，nodejs服務器的創建可以參考本人另外一篇文章：http://blog.csdn.net/fabulous1111/article/details/78423626

總結

以上是生活随笔為你收集整理的利用HTML5 canvas合并图片并解决Filaed to execute 'toDataURL' on 'HTMLCanvasElement'异常的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：快手极速版如何退出账号(上的快手极速版)
下一篇：吃鸡套装怎么免费领取