背景:产品需求,input框输入图片链接,点击检测按钮的时候需要判断该图片不超过2M
<div className={less.detection}>
<input className={less.input} placeholder="请输入图片URL" onChange={(e) => this.inputOnChange(e)} />
<button type="button" className={less.button} onClick={(e) => this.identifyImage(e, inputUrl, 0)}>检测</button>
</div>
inputOnChange(e) {
this.setState({
inputUrl: e.target.value,
});
};
const urlRegexp = /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/;
identifyImage(e, image, index) {
if (e && e.preventDefault) {
e.preventDefault();
}
if (urlRegexp.test(image)) {
if (!((image.indexOf('.jpg') !== -1) || (image.indexOf('.jpeg') !== -1) || (image.indexOf('.png') !== -1))) {
Message.error('请输入正确的图片url');
return;
}
// 判断图片大小【Note:图片和项目必须是同源的,否则会报跨域错误】
this.judgeImageSizeByUrl('../../../static/1.png').then(result => {
// result.size是字节,2M=2097152字节
if (result.size > 2097152) {
this.handleImageErrorMsg('图片文件过大,请选择2MB以下的图');
} else {
// ......
}
});
}
};
先前我以为最简单的办法,直接将url转换成blob对象,获取blob.size来比较;
其实不然,这种是错误的
judgeImageSizeByUrl(url) {
let blob = new Blob([url]);
if (blob.size > 2048) {
this.setState({
imageErrorMsg: '图片文件过大,请选择2MB以下的图',
});
return false;
}
}
正确的方法如下 (Note: 图片必须是同源的(即项目和图片必须是同源的))
judgeImageSizeByUrl = (url) => {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.onerror = () => {
reject();
};
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject();
}
};
xhr.send();
});
}
链接可以使用任何css属性,包括字体、颜色、背景等等、链接有四个状态,可在四个状态时设置不同的属性,当为链接的不同状态设置样式时,需要遵循a:hover 必须位于a:link 和a:visited之后,a:active 必须位于 a:hover 之后
我们经常遇到,网页上点击一个链接或者qq图片,就开启了qq聊天窗口。那么如何通过a标签超链接打开qq对话框呢?下面介绍2种实现方式。
短链接我们或多或少都使用过,所谓短链接就是根据较长的原链接url生成一段较短的链接,访问短链接可以跳转到对应的原链接,这样做好处在于:1. url更加美观;2. 便于保存和传播;3. 某些网站内容发布有字数限制,短链接可以节约字数
在我完成 electrade 的工作之余,还帮助一个朋友的团队完成了他们的项目。最近,我们希望为这个项目构建一个 Craiglist 风格的匿名电子邮件中继,其中包含 “serverless” Google Firebase Function
需求:通常站点,都会想让自己网站的视频和图片,免被盗用,毕竟视频流量,花的都是白花花银子(土豪可以不用考虑)~~。vaild_referers 有效的引用连接,如下,否则就进入$invaild_refere,返回403 forbiden。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!