您好,登錄后才能下訂單哦!
這篇文章主要介紹“CSS濾鏡和混合模式處理的圖片怎么上傳下載”,在日常操作中,相信很多人在CSS濾鏡和混合模式處理的圖片怎么上傳下載問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”CSS濾鏡和混合模式處理的圖片怎么上傳下載”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
一、使用CSS濾鏡和混合模式在線PS
使用CSS濾鏡和混合模式可以實現(xiàn)各種各樣的圖像處理效果,例如CSSgram項目,內(nèi)置眾多圖像處理效果,部分效果示意如下縮略圖:
進(jìn)入demo頁面你也可以點擊這里的按鈕,更換你本地的素材,查看對應(yīng)的圖像效果:
呈現(xiàn)的效果雖好,但是也帶來另外一個問題,雖然視覺上是已經(jīng)處理后的圖片,但是如果我們右鍵-圖片另存為,會發(fā)現(xiàn)還是原圖。
如果用戶覺得某個圖片處理后的效果很棒,想要保存到自己的本機(jī),就會受阻。
或者說,我們基于CSS濾鏡和混合模式制作了一款圖像處理的工具,最后需要把這些已經(jīng)處理好的圖片上傳到后臺,作為一個獨立的<img>元素使用,也會受阻。
怎么辦?難道我們要放棄這么好的特性,還使用canvas來處理圖像嗎?
不需要的,實際上是有方法可以得到CSS處理后的圖像的。
二、SVG foreignObject元素與視覺存儲
SVG中有個<foreignObject>元素,可以實現(xiàn)在SVG內(nèi)部嵌入XHTML元素,例如:
<svg xmlns="http://www.w3.org/2000/svg"> <foreignObject width="120" height="50"> <body xmlns="http://www.w3.org/1999/xhtml"> <p>文字。</p> </body> </foreignObject></svg>
而SVG本質(zhì)上就是個圖像,也就是說,我們只需要把圖像處理相關(guān)的HTML代碼和CSS代碼放在<foreignObject>元素中,然后作為<img>圖像呈現(xiàn),然后再繪制到canvas畫布上,這樣就可以得到純正的處理后的位圖圖像了。
demo頁面最后一張圖片和CSS處理后的圖片長相雖同,但是本質(zhì)卻不同,一個還是原始圖(試試右鍵-另存為),一個本質(zhì)上是合成圖(試試右鍵-另存為),如下截圖示意:
于是,接下來,無論是是要下載到本機(jī)還是上傳到服務(wù)器都不是問題。
關(guān)于純前端下載圖片,可以參考我之前這篇文章:“JS前端創(chuàng)建html或json文件并下載”的part3部分。
關(guān)于上傳,可以傳輸圖像canvas.toDataURL()的base64數(shù)據(jù),也可以傳輸canvas.toBlob()的Blob數(shù)據(jù):
// canvas轉(zhuǎn)為blob并上傳canvas.toBlob(function (blob) { // 圖片ajax上傳 var xhr = new XMLHttpRequest(); // 文件上傳成功 xhr.onload = function() { // xhr.responseText就是返回的數(shù)據(jù) }; // 開始上傳 xhr.open("POST", 'upload.php', true); xhr.send(blob); }, 'image/jpeg');
三、我該如何在項目中使用?
上面的demo頁面中,我寫了個名為cssRenderImage2PureImage()的方法,可以把類似下面代碼結(jié)構(gòu)的CSS圖像處理結(jié)果變成一張圖片:
<div id="input" class="clarendon-filter"> <img src="./example.jpg"></div>
.clarendon-filter { filter: contrast(1.2) saturate(1.35); display: inline-block; position: relative;}.clarendon-filter::before { content: ''; display: block; height: 100%; width: 100%; top: 0; left: 0; position: absolute; background: rgba(127,187,227,.2); mix-blend-mode: overlay; pointer-events: none;}
cssRenderImage2PureImage()方法語法:
cssRenderImage2PureImage(dom, callback);
其中:
dom必須參數(shù)。DOM對象。callback可選參數(shù)。Function?;卣{(diào)方法,支持一個參數(shù),為合成后的圖片的base64信息。
示例:
cssRenderImage2PureImage(input, function (url) { // url就是合成后的圖片base64地址 // 你可以對url做你任何你想做的事情……});
四、其它說明以及結(jié)束語
cssRenderImage2PureImage方法高度定制,如果你的CSS濾鏡處理的DOM結(jié)構(gòu)有所不同,你需要根據(jù)你的項目場景調(diào)整下cssRenderImage2PureImage方法里面的代碼;
<foreignObject>元素是著名的html2canvas工具的核心,通常一些小的局部的截圖功能,我們直接自己擼十幾行代碼處理下就好了,更高效更靈活。
此技術(shù)實現(xiàn)請在Chrome瀏覽器下玩耍。
到此,關(guān)于“CSS濾鏡和混合模式處理的圖片怎么上傳下載”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。