中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html5中svg canvas和圖片之間相互轉化的方式

發布時間:2021-09-17 12:49:43 來源:億速云 閱讀:206 作者:chen 欄目:web開發

本篇內容介紹了“html5中svg canvas和圖片之間相互轉化的方式”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!

最近有個需求,需要把網頁部分內容做正文,并把原網頁轉成pdf作為附件,發送郵件給boss。由于我們這是報表類型的網站,在html5中控件開發無非就是canvas或者是svg,這里我們有幾個控件是用svg,而svg在FoxMail郵件正文中無法正常顯示,于是考慮將svg轉成canvas顯示,但是后來發現canvas也無法正常顯示,最后不得已,只能將canvas標簽再一次轉成圖片格式,終于解決了這個問題。下面就簡單介紹一下實現過程。如下是一個svg標簽

代碼如下:


<div id="svgContainer">
<svg id="svg"></svg>
</div>


首先需要獲取svg標簽以及內容:

var svgHtml = svgContainer.innerHTML();

將svg轉成canvas需要用到google的一個插件canvg,可以上官網下載,也可以直接遠程引用進來

接下來就是調用該插件的canvg(canvasId,svgHtml)方法來轉成canvas,這個方法第一個參數就是canvas標簽的id,第二個自然就是svg標簽內容了,就這樣,svg轉成了canvas

然后就是將canvas轉成圖片了,這個更加簡單了

var imgSrc = document.getElementById(canvasId).toDataUrl("image/png");//這其實是將canvas轉成了圖片,并返回圖片的所有內容數據,如下即可顯示圖片:

代碼如下:


<img src=imgSrc />


這就是從svg->canvas->image的實現方法了,這個還是很有用的,因為不同的瀏覽器對svg和canvas的支持不同,這樣的話,至少我們的控件總有方式能夠正確顯示,即使我們最后只能使用圖片。

“html5中svg canvas和圖片之間相互轉化的方式”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

汝阳县| 香河县| 深水埗区| 栾川县| 神农架林区| 内丘县| 遵义县| 措勤县| 三门峡市| 威信县| 西昌市| 隆德县| 静宁县| 集贤县| 安庆市| 博白县| 浑源县| 扶沟县| 涞源县| 光山县| 岗巴县| 全南县| 北碚区| 大同市| 阿城市| 巴彦淖尔市| 元氏县| 彰武县| 丰顺县| 长武县| 宜昌市| 宝丰县| 阳原县| 霍林郭勒市| 建平县| 安阳县| 通城县| 东阳市| 娱乐| 宕昌县| 淮安市|