溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

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

CSS濾鏡和混合模式處理的圖片需要怎樣上傳下載

發(fā)布時間：2020-08-20 15:45:16 來源：億速云 閱讀：132 作者：小新 欄目：web開發(fā)

這篇文章主要介紹CSS濾鏡和混合模式處理的圖片需要怎樣上傳下載，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

一、使用CSS濾鏡和混合模式在線PS

使用CSS濾鏡和混合模式可以實現(xiàn)各種各樣的圖像處理效果，例如CSSgram項目，內(nèi)置眾多圖像處理效果，部分效果示意如下縮略圖：

CSS濾鏡和混合模式處理的圖片需要怎樣上傳下載

進入demo頁面你也可以點擊這里的按鈕，更換你本地的素材，查看對應(yīng)的圖像效果：

CSS濾鏡和混合模式處理的圖片需要怎樣上傳下載CSS濾鏡和混合模式處理的圖片需要怎樣上傳下載

呈現(xiàn)的效果雖好，但是也帶來另外一個問題，雖然視覺上是已經(jīng)處理后的圖片，但是如果我們右鍵-圖片另存為，會發(fā)現(xiàn)還是原圖。

如果用戶覺得某個圖片處理后的效果很棒，想要保存到自己的本機，就會受阻。

或者說，我們基于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ì)上是合成圖（試試右鍵-另存為），如下截圖示意：

CSS濾鏡和混合模式處理的圖片需要怎樣上傳下載

于是，接下來，無論是是要下載到本機還是上傳到服務(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瀏覽器下玩耍。

以上是CSS濾鏡和混合模式處理的圖片需要怎樣上傳下載的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手