js實現(xiàn)截圖保存圖片功能的代碼示例
前幾天公司項目里有這樣一個需求,把網(wǎng)頁的某一部分能夠一鍵截圖。這個功能其實就是對人力的一個優(yōu)化,如果是人為做的話,相信大家都知道怎么做(用截圖工具在指定區(qū)域截圖,然后保存到本地,再上傳的服務(wù)器上去)。我這個主要就解決這個批量的人力的優(yōu)化。好,廢話不多說了。直接上邏輯和代碼。'
這個問題的解決方案:html to canvas to png. 目前有一個這樣的插件: html2canvas,
html2canvas($targetElem, { useCORS: true, onrendered: function(canvas) { } });
這個'$targetElem'就是那個要轉(zhuǎn)換的html, useCORS 用來設(shè)置圖片是否跨域(如html圖片域名和當前網(wǎng)站不是同一個域名,需要設(shè)置這個屬性), onrendered 是轉(zhuǎn)換完成后執(zhí)行的方法。
里面有一種情況需要考慮:如果html標簽里有svg標簽, 目前htm2canvas不支持svg標簽。
這個情況下就需要先把svg處理成html2canvas能處理標簽。
我這策略是 svg 轉(zhuǎn)換成 canvas ,html2canvas 轉(zhuǎn)換完成,再回復(fù)svg。這里我還需要這個插件canvg(svg轉(zhuǎn)canvas)
具體代碼如下
var nodesToRecover = []; var nodesToRemove = []; var $svgElem = $targetElem.find('svg'); $svgElem.each(function(index, node) { var parentNode = node.parentNode; var canvas = document.createElement('canvas'); canvg(canvas, parentNode, {ignoreMouse: true, ignoreAnimation: true}); //將svg轉(zhuǎn)換成canvas nodesToRecover.push({ parent: parentNode, child: node }); parentNode.removeChild(node); nodesToRemove.push({ parent: parentNode, child: canvas }); parentNode.appendChild(canvas); }); html2canvas($targetElem, { useCORS: true, onrendered: function(canvas) { var base64Image = canvas.toDataURL('image/png').substring(22); //回復(fù)svg nodesToRemove.forEach(function(pair) { pair.parent.removeChild(pair.child); }); nodesToRecover.forEach(function(pair) { pair.parent.appendChild(pair.child); }); })
這個方案,我已經(jīng)完全實現(xiàn)了,并在我們項目里使用了。歡迎大家使用,如果有什么問題,可以留言給我。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
通過設(shè)置CSS中的position屬性來固定層的位置
position 屬性規(guī)定元素的定位類型,這個屬性定義建立元素布局所用的定位機制,本文給大家介紹通過設(shè)置CSS中的position屬性來固定層的位置,感興趣的朋友一起學(xué)習(xí)吧2015-12-12微信小程序開發(fā)之從相冊獲取圖片 使用相機拍照 本地圖片上傳
本篇文章主要介紹了微信小程序開發(fā)之從相冊獲取圖片--使用相機拍照,本地圖片上傳的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04微信小程序?qū)崿F(xiàn)打開并下載服務(wù)器上面的pdf文件到手機
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)打開并下載服務(wù)器上面的pdf文件到手機,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09微信小程序中target和currentTarget的區(qū)別小結(jié)
這篇文章主要給大家介紹了關(guān)于微信小程序中target和currentTarget區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11JS實現(xiàn)獲取數(shù)組中最大值或最小值功能示例
這篇文章主要介紹了JS實現(xiàn)獲取數(shù)組中最大值或最小值功能,結(jié)合實例形式總結(jié)分析了javascript獲取數(shù)組最大值與最小值的三種常見操作技巧,需要的朋友可以參考下2019-03-03解析dom中的children對象數(shù)組元素firstChild,lastChild的使用
以下是對dom中的children對象數(shù)組元素firstChild,lastChild的使用進行了詳細的分析介紹,需要的朋友可以參考下2013-07-07