整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

pywebview:python更好用的web框架学

pywebview:python更好用的web框架学习之图片显示

说明:

=====

1.1 进一步学习pywebview相关知识。

1.2 多种方法显示图片;html相关知识复习,通俗易懂,使用起来比Eel方便。

1.3 一秒入门,小白一看就会,少走弯路。


2 图片来源:

=========

正版图片免费使用。


取名:20.jpeg

3 图片显示:

=========

3.1 方法一,代码:

#方法一:默认图片大小显示法
import webview
if __name__=='__main__':
   #图片与py代码文件放在同一个文件夹即可
    webview.create_window('图片显示', '20.jpeg', text_select=True)
    webview.start()

3.2 方法二,代码:

#方法二:指定窗口大小,图片原图显示法
import webview
if __name__=='__main__':
    webview.create_window('图片显示', '20.jpeg', text_select=True,width=400, height=300)
    webview.start()

3.3 方法三,代码:

#方法三:理解url和html
import webview
#html='20.jpeg'
pic='20.jpeg'
if __name__=='__main__':
    #窗口默认大小,注意如果下面是html=pic或者html就报错
    webview.create_window('图片显示', url=pic, text_select=True)
    webview.start()

3.4 方法四,

3.4.1 py代码:文件名:main.py

#方法四:全屏打开html,显示原图大小
import webview
html='1.html'
if __name__=='__main__':
    #窗口默认大小,注意如果下面是html=pic或者html就报错
    webview.create_window('图片显示', url=html, text_select=True)
    webview.start()

4.4.2 注意:这里多一个:1.html文件,代码为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--原图大小显示-->
    <!--img src="20.jpeg"  alt="头条图片" /-->
    <!--指定图片大小显示,如果指定位置显示那就是html相关知识-->
    <img src="20.jpeg"  alt="头条图片" width="400" height="300"/>
</body>
</html>

4.4.3 效果图:


4.4.4 复习快速用微软vscode编辑器新建html的方法,gif示意图:

注意英文状态的输入法下的“!”,然后再回车即可。

自己整理,分享出来,喜欢就点赞、转发和收藏。

| 王成

本文转载自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防盗链等。最近上线的又拍直播云,除了直播加速、推拉流外,更具有丰富的美颜、滤镜、水印、防盗链、鉴黄、禁播等功能,帮助直播平台快速上线直播业务,快来试试吧~


WKWebView是iOS8 出来的浏览器控件,用来取代UIWebView.对于WKWebView与UIWebView的对比特点,这里就不过多的叙述,都算是老生常谈的问题了,网上的说明也很多.近来在做Web端,需要植入移动端,并且做JS交互工作.以前写过的JavaScript:浅谈iOS与H5的交互-JavaScriptCore框架是用于UIWebView.在WKWebView并不适用了,自己做的过程中遇到一些坑,在这里总结一下,做一下记录.

WKWebView加载本地 html文件


现在的项目要求就是使用存储在本地的html文件 js文件 css文件 img图片等文件.我使用HBuilder创建了一个Demo工程.里面包含了基本的文件以及图片资源.如下所示.然后拖到Xcode工程中.

然后我们把整个Html工程文件夹导入工程中.

WKWebView 在iOS 9 有新的加载本地方法- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));.但是我看了网上有一些博客说- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;并不能加载本地html文件.其实两者都能加载.只是需要把路径写对.第一个方法就不过多叙述了.网上有很多的博客.这里我就用第二个方法来看一下如何加载.

NSString *path=[[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"index.html"];

NSURLRequest *request=[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];

[_mainWebView loadRequest: request];

  • 1
  • 2
  • 3

运行效果图如下.

Xcode工程中 html文件 加载js文件 css文件 img文件


上面我们加载了html.可是css样式 .img文件和js文件都没有加载出来.那么我们该如何解决呢?(html原始加载图如下所示.)

对于css文件img文件 ,js文件我们只需要把html文件中的文件夹路径删除即可.如下所示.

???????? 注意:这里是使用的- (WKNavigation *)loadRequest:(NSURLRequest *)request;方式加载的网页.所有如上设置即可.如果使用的是loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL或者loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;都需要设置本地资源文件所对应的路径! 我们只需要把资源文件所对应的路径设置给readAccessURL 和 baseURL即可(). 例如下面所示.

//假定都在工程根目录之下.

NSURL *baseURL=[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];

[_mainWebView loadHTMLString:[self loadHtmlString] baseURL:baseURL];

  • 1
  • 2
  • 3

对于js文件,有时候我们发现我们就算如上删除了js文件夹的路径依然不能使用.这是为什么呢?.这里就要去检测查看工程的设置,是否把js文件当成一个可编译文件使用了.我们需要把它移动到资源文件中.这样就能正常加载了.如下图所示.

WKWebView中警告窗 确认面板 输入框的显示


相比于UIWebView,WKWebView对警告窗 确认面板 输入框并不能直接显示.是通过WKUIDelegate代理方法收到对应的回调方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;

//接收到确认面板

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;

//接收到输入框

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

我们只需要对上面的回调方法进行实现即可实现显示警告窗 确认面板 输入框等需求.

WKWebView中OC方法调用JS方法


在WKWebView OC方法调用JS方法方法比较简单.我们只需要使用如下方法即可.

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

  • 1

看一下我写的例子.在index.js中定义一个方法.方法内容为弹出一个警告框.代码如下所示.

function alertAction(message) {

alert(message);

}

  • 1
  • 2
  • 3

然后在ViewController控制器中定义一个Button.定义它的点击方法.代码如下所示.

- (UIButton *)alertButton{

if (_alertButton==nil) {

_alertButton=[[UIButton alloc] initWithFrame:CGRectMake(KMainWidth*0.2, KMainHeight - 60, KMainWidth * 0.6, 40)];

_alertButton.backgroundColor=[UIColor colorWithRed:250/255.0 green:204/255.0 blue:96/255.0 alpha:1.0];

_alertButton.layer.cornerRadius=6.0f;

_alertButton.layer.masksToBounds=YES;

_alertButton.titleLabel.font=[UIFont systemFontOfSize:16];

[_alertButton setTitle:@"弹出弹窗" forState:UIControlStateNormal];

[_alertButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

[_alertButton addTarget:self action:@selector(alertButtonAction) forControlEvents:UIControlEventTouchUpInside];

}

return _alertButton;

}

- (void)alertButtonAction{

[self.mainWebView evaluateJavaScript:@"alertAction('OC调用JS警告窗方法')" completionHandler:^(id _Nullable item, NSError * _Nullable error) {

NSLog(@"alert");

}];

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

因为弹窗不能直接显示.所以我们实现了对应的代理方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{

UIAlertController *alert=[UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action=[UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

completionHandler();//此处的completionHandler()就是调用JS方法时,`evaluateJavaScript`方法中的completionHandler

}];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这时候我们点击按钮就会调用对应的JS方法了.相比于JavaScriptCore框架还是非常简单的.效果图如下所示.

WKWebView中JS方法调用OC方法


上一个模块我们看到了OC方法调用JS方法.那么JS方法调用OC方法呢?我们也只需要几步就可以完成调用.

第一步.我们需要在WKWebView创建的过程中初始化添加ScriptMessageHandler.(命名自定例如:currentCookies.如下所示)

WKWebViewConfiguration *configuration=[[WKWebViewConfiguration alloc] init];

WKUserContentController *userController=[[WKUserContentController alloc] init];

configuration.userContentController=userController;

_mainWebView=[[WKWebView alloc] initWithFrame:CGRectMake(0, 0, KMainWidth, KMainHeight) configuration:configuration];

[userController addScriptMessageHandler:self name:@"currentCookies"];

  • 1
  • 2
  • 3
  • 4
  • 5

然后实现代理方法.监听JS的回调.为了查看效果,我们仍然使用弹窗的形式展示我们的回调信息.代码如下所示.

//JS调用的OC回调方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

if ([message.name isEqualToString:@"currentCookies"]) {

NSString *cookiesStr=message.body;

NSLog(@"当前的cookie为: %@", cookiesStr);

UIAlertController *alert=[UIAlertController alertControllerWithTitle:@"提示" message:@"JS调用的OC回调方法" preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action=[UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:nil];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

然后在Html文件中添加点击方法.

<div id="button_div" onclick="buttonDivAction()">

点击调用OC方法

</div>

  • 1
  • 2
  • 3

紧接着.在js文件中实现点击事件.这时候要注意的是ScriptMessageHandler的名称要与上面定义的一致.

function buttonDivAction() {

window.webkit.messageHandlers.currentCookies.postMessage({

"body": "buttonActionMessage"

});

}

  • 1
  • 2
  • 3
  • 4
  • 5

然后我们点击网页中对应的div就会出现对应的弹窗.效果图如下所示.

并且控制台打印信息如下所示.

总结


相比于UIWebView,WKWebView确实更加的方便快捷.本篇博客就到这里了.如果有任何问题,欢迎在评论区回复骚栋.感谢观看,最后还是附上本篇博客的Demo传送门.