Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
有時候我們經常會需要修改PDF的文件,那么市面上有很多相關PDF轉word的工具。
但是如果現在有一個網頁,你想修改上面的文字或者圖片,你想在沒有后臺權限的情況下想臨時修改一下網頁上顯示的文字或圖片 ?就幾乎沒有工具可以做了。
大多數人會告訴你按F12,但想必你看到以下東西的時候,代碼恐懼癥會讓你很痛苦。
今天抽空寫了這個網頁修改神器。安裝好之后可以很輕松,把網頁上的文字修改成你想要的效果,包括圖片。不用15秒就可以修改網頁文字圖片的網頁修改神器。
第一步,解壓到 E:\tools\修改網頁
第二步,打開chrome瀏覽器--更多工具--擴展程序--加載已解壓的擴展程序,選擇剛剛解壓出來的 E:\tools\修改網頁\webmaker
安裝好后會在擴展程序這里顯示出來。
第三步 修改文字或圖片
裝好了我們來看一下怎么操作吧。
打開要修改的網頁,找到你想要修改的文字用,SHIFT+ 鼠標右鍵 點擊,即可彈出修改框。
修改后的顯示效果。
但按以上的操作修改的是前臺顯示,頁面刷新之后網頁會恢復原樣。這個方法比較適合用在一些,做視頻或者做截圖的場景。
有需要定制瀏覽器插件,可以聯系我。
| 王成
本文轉載自SegmentFault
WebP格式介紹
WebP是Google開發的一種新的圖片格式,它支持有損壓縮、無損壓縮和透明度,壓縮后的文件大小比JPEG、PNG等都要小。所以可以節省帶寬,減少頁面載入時間,節省用戶的流量。
Android和iOS的App只要引入Google提供的解碼庫,都可以很輕松的支持WebP格式。不過在Web上,WebP的支持還不是很廣泛。根據Can I Use的數據,目前只有Chrome、Opera瀏覽器,以及Android的WebView是支持WebP的。但是WebP圖片有這么多優點,我們能不能在Web頁面中使用呢?可以。這篇文章就來討論一下這個問題。
把已有的圖片轉換為WebP格式
要使用WebP格式,需要將你網站用到的圖片都制作一份WebP格式的版本,如果你使用CDN服務商,它們一般都會提供轉碼到WebP格式的選項。如又拍云:
增加這樣的配置后,我們可以通過給圖片URL加上相應的后綴,來使用WebP格式的版本資源。
你也可以使用Webpack、Gulp的插件來批量轉換圖片格式。這里不贅述。
在瀏覽器中使用WebP格式
因為不是所有瀏覽器都支持WebP格式,我們就有兩種思路:一個是只在支持WebP格式的瀏覽器中使用WebP格式;一個是讓不支持WebP格式的瀏覽器可以支持WebP。
姿勢一: <Picture>標簽
<Picture>是HTML5中的一個新標簽,類似<Video>它也可以指定多個格式的資源,由瀏覽器選擇自己支持的格式進行加載。
<picture class="picture">
<source type="image/webp" srcset="image.webp">
<img class="image" src="image.jpg">
</picture>
如果瀏覽器支持WebP格式,就會加載Image.webp,否則會加載Image.jpg。
即使瀏覽器不支持<Picture>標簽,圖片仍然會正常顯示,只是CSS可能無法正確選取到Picture元素。比如在IE8中,下面的CSS就不會起作用:
.picture img { width: 100px; height: 100px;}
但是可以這樣來給圖片寫樣式:
.image { width: 100px; height: 100px;}
即使瀏覽器使用的是WebP格式的圖片,最終還是會應用img元素的樣式。
不過只要使用了HTML5Shiv,使舊的瀏覽器支持這個標簽,CSS選擇器就可以正常使用了。這種方法是最簡單的,但是不能作用于CSS中的圖片(如背景)。
姿勢二:使用JS替換圖片的URL。
我們有很多的頁面往往會用到圖片的“懶加載”——通常是把圖片的URL放在Img元素的一個自定義屬性中,然后用JS在適當的時機將URL賦值給SRC屬性。用類似的原理,我們可以根據瀏覽器是否支持WebP格式,給Img元素賦予不同的SRC值。
首先我們需要用JS來判斷瀏覽器是否支持WebP格式,方法是給瀏覽器一個WebP格式的圖片,看瀏覽器能否正確渲染。這種方法是異步的,所以需要把后續的操作寫在回調函數中。我們可以將結果存儲在LocalStorage中,這樣之后就不用再次檢查了。
function checkWebp(callback) { var img=new Image();
img.onload=function () { var result=(img.width > 0) && (img.height > 0);
callback(result);
};
img.onerror=function () {
callback(false);
};
img.src='data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}
然后用下面的代碼來根據是否支持WebP替換相應的SRC。
function showImage(useWebp){ var imgs=Array.from(document.querySelectorAll('img'));
imgs.forEach(function(i){ var src=i.attributes['data-src'].value; if (useWebp){
src=src.replace(/\.jpg$/, '.webp');
}
i.src=src;
});
}
checkWebp(showImage);
這種方式的優點是可以與已有的懶加載函數相結合。而且使用JS,我們還可以處理CSS中的圖片(如背景圖等)。
姿勢三:使用JS解碼WebP圖片
既然WebP的解碼器是開源的,那么能否用JS來實現呢?當然可以,有人就用JS寫出了WebP的解碼器。引入這個JS庫,就是將所有的WebP圖片用JS解碼后轉換為Base64,然后替換掉原來的URL,這樣就可以讓原本不支持WebP的瀏覽器正常顯示WebP了。這個庫的使用方法非常簡單,看網頁的說明即可。
這種方法的缺點是,因為JS要解碼WebP圖片,需要在此異步請求SRC中的URL(不過因為圖片本身之前被下載了一次,直接使用了緩存);而且JS解碼比較慢,對性能有影響,可能需要一段時間才能顯示出圖片來。
以上就是在瀏覽器中使用WebP圖片的幾種方法,可以根據自己的實際情況選用。在我們的實踐中,使用了WebP格式后,圖片的體積普遍縮小了1/3以上,既加快了加載的速度,還節省了用戶的流量,我們十分推薦從現在就開始使用這種格式。
又小拍也關注WebP一段時間呢,不但關注了WebP,還關注了動態WebP,不久之后會有驚喜帶給大家哦。
又拍云的處理功能實在太豐富,在圖片處理方面,略縮圖任意尺寸更改,全網一鍵更新所有圖片,打水印,URL防盜鏈等。最近上線的又拍直播云,除了直播加速、推拉流外,更具有豐富的美顏、濾鏡、水印、防盜鏈、鑒黃、禁播等功能,幫助直播平臺快速上線直播業務,快來試試吧~
好,我是老蓋,首先感謝你對本篇文章的觀看,另外本文有視頻哦,在文章最下方,視頻講述的比較詳細,看視頻的話可以到文章最下方直接觀看。
這里我說一下網頁是如何造假的,網頁數據造假基本就是要修改網頁的數據,我這里也修改一下,演示給大家看看,首先打開瀏覽器,為了演示我就進入了我的頭條后臺頁面,把上邊顯示的數據,粉絲量,累計閱讀量和累計收入都修改了一下,上邊圖片就是修改后的數據,看著數字很大。
瀏覽器大部分有開發人員工具功能一般是f12按鍵,我用的是360極速瀏覽器,直接按鍵盤的f12就會在下方彈出這個窗口,他這個界面有中文的和英文界面,我這個是英文的,在開發人員工具窗口左上角有一個鼠標的小按鈕我們點一下。
然后這個鼠標的放在要修改的位置上,比如我要修改粉絲數量這個值,鼠標放上去之后點它一下。
然后下方的代碼就跳到了粉絲數量這里,然后把這個值修改為自己想要的值,我這里修改了123456。這樣我的粉絲數量就變成了123456。
再看一下累計閱讀量,方法和粉絲數量是一樣的,也是點一下累計閱讀量。
然后在下方代碼中,數字修改為111222,這樣就修改成功了。
我們最后再看一下累計收入,也是把鼠標放在累計輸入點一下。
然后修改累計收入數字為888666,這樣就修改成功了。
總結一下這個是最簡單的一種方法,網頁一旦刷新就會還原,當然另外還有其他插件可以刷新后實時更新,這里我就不說方法了,以免有人利用。
關于這個修改網頁數據,可能有人會利用這個方法拍一些視頻或者圖片,來進行一些不好的操作,所以說大家有的時候看到了視頻內容,也不一定是真實的數據,就有可能是被修改的,大家要警惕一下,不要上當受騙。
本篇文章的視頻在這里,視頻講的比較詳細,有興趣的朋友可以看一下。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
感謝觀看本篇文章,希望對你有所幫助,我是老蓋,經常會分享IT互聯網與電腦知識,有興趣的可以關注一下。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。