图片

郑重正告：本文止于技术钻研，请勿在本人的生产环境应用别人图片资源。 通常在开发测试环节，一些资源图片会呈现防盗链的谬误提醒，本文就通过前端根底技术，实现根本的图片跨站显示成果。防盗链的原理：服务端通过申请头的request.headers.referer来判断是否是本人资源白名单的申请起源。如果referer=null,则无奈判断起源，会失常显示图片。所以基于以上实践，能够给图片发明一个没有referer的申请环境就能够实现了。 解决思路：通过iframe来实现无referer的申请环境。 实现过程：创立一个base64长期资源，供iframe调用在长期资源中，申请图片图片加载实现后，批改iframe.height=img.height源码base64长期资源： const src = 'http://test.com/test.png';const html = `data:text/html;base64,${btoa(`<img src="${src}"/>`)}`<iframe src="html"></iframe>应用ResizeObserver监听图片高度因为以后iframe里只有一个图片，所以监听body高度即可（body有默认margin，前面须要革除款式）。(ResizeObserver API) var ro = new ResizeObserver(entries => { for (let entry of entries) { const data = {height: entry.contentRect.height}; window.parent?.postMessage({...data, window: 'parent'}, '*') window.top?.postMessage({...data, window: 'top'}, '*') }})ro.observe(document.body)window.addEventListener("message", e => { if (e.data.window === 'parent') { iframe.style.height = e.data.height + 'px' }}, false)残缺代码 (vue3 setup ts)<script setup lang="ts">import { onMounted, ref, withDefaults } from 'vue'interface IProps { src: string; id?: string}const props = withDefaults(defineProps<IProps>(), {});const iframe = ref(null)onMounted(() => { if (iframe.value) { const html = `<style>body{margin:0;}</style> <img src="${props.src}" style="display:block"/> <script> var ro = new ResizeObserver(entries => { for (let entry of entries) { const data = {height: entry.contentRect.height, id: "${props.id || props.src}"}; window.parent?.postMessage({...data, window: 'parent'}, '*') window.top?.postMessage({...data, window: 'top'}, '*') } }) ro.observe(document.body) <\/script>` iframe.value.src = `data:text/html;base64,${btoa(html)}` } window.addEventListener("message", e => { if (e.data.window === 'parent' && e.data.id === props.src && iframe.value) { iframe.value.style.height = e.data.height + 'px' } }, false)})</script><template> <iframe ref="iframe" style="display: block; border: 0;"></iframe></template>此文为自己原创翻新文章，转发请注明起源。 ...

jpeg 渐进模式是什么？图片加载，从高低加载，变为从含糊到清晰，提前让用户有告知，详情参考png 怡也有相似的技术，称为png 的交织模式 疾速实现在「OSS」和「又拍云」上的门路上增加几个参数即可低成本，疾速应用上渐进式图片「OSS」中应用渐进式 jpeg 官网文档测试图片 https://oss.luckly-mjw.cn/jpeg-pregressive/009.jpg?x-oss-process=image/interlace,1实现形式，在图片链接中增加?x-oss-process=image/interlace,1字符串（interlace：交织的）很遗憾，oss 并不反对 png 交织模式，但能够转 jpeg 的形式实现该性能 先将图片转为 jpeg 格局（/format,jpg），在借用 jpeg 的交织模式(/interlace,1)测试图片 https://oss.luckly-mjw.cn/jpeg-pregressive/010.png?x-oss-process=image/format,jpg/interlace,1「又拍云」中应用渐进式 jpeg 官网文档测试图片 http:/upyun.luckly-mjw.cn/Assets/jpeg-pregressive/009.jpg!/progressive/true实现形式，在图片链接中增加!/progressive/true字符串（progressive：优化的）很遗憾，「又拍云」同样不反对 png 交织模式，同样能够转 jpeg 的形式实现该性能 先将图片转为 jpeg 格局（/format/jpg），在借用 jpeg 的交织模式(/progressive/true)测试图片 http://upyun.luckly-mjw.cn/Assets/jpeg-pregressive/010.png!/format/jpg/progressive/truetinypng 默认自带渐进式转化 测试图片http:/upyun.luckly-mjw.cn/Assets/jpeg-pregressive/008.jpg留神，这张图没有携带解决参数，间接返回图，但也会有渐进成果举荐一个效率工具：tinypng 原地压缩脚本

懒加载问题形容网站上有大量图片，若一次性间接申请所有的图片资源，很显然工夫期待过长，浪费资源。所以咱们就须要须要给图片做一个懒加载，即：等看到图片，或者快看到图片时，才去加载就像挪动端下拉加载一样也有种数据分页的感觉懒加载问题解决思路第一步，初始时，先给图片一个loading.gif作为img的src的值，使其显示加载中，如：img.src = loading.gif第二步，判断元素是否进入视口，是否（行将）能看到，再将img的src的值，替换为真正的需要申请地址的值第三步，当img有src的值的时候，就会立即发申请，申请服务器的资源，申请胜利了，就胜利了，就达到咱们想要的成果第四步，兜错，若图片加载申请失败的话，再将img的src替换成一张加载失败谬误的图片src即可这里有两个重点，大家须要留神： 问题一：如何判断元素是否进入可视区域？ 问题二：如何判断图片加载胜利或失败了？ 这两个问题的答案后文会提到，大家持续往下浏览图片懒加载成果最终实现的就是这样的成果 也能够去笔者的集体网站上，看效果图：http://ashuai.work:8888/#/img... 解决方案或者应用现有的插件或者本人写一个计划一 插件就是好！vue-lazyload举荐应用vue-lazyload插件各方面都很优化，官网地址：https://www.npmjs.com/package... 应用步骤，这里笔者就不赘述了，上述的效果图，也是通过这个vue-lazyload插件实现的，对应代码，在笔者的GitHub仓库中：https://github.com/shuirongsh... 计划二 本人手写一个自定义指令v-lazyload写一个自定义指令，便于逻辑复用 如何判断元素是否进入视口了？麻烦一些的计划：监听领有滚动条的scroll事件，去计算元素间隔领有滚动条的地位，这里笔者总结了一个公式： 滚动间隔呈现 = .target距顶部高度 - .scrollBox距顶部高度 - .scrollBox本身高度或边界值 = 指标元素距顶部高度 - 滚动盒子容器距顶部高度 - 滚动盒子容器本身高度相干代码案例，请看笔者的这篇文章：https://segmentfault.com/a/11... 应用IntersectionObserver类构造函数，去判断元素是否进入视口IntersectionObserver是一个十分弱小的api，能够观测很多货色的变动，very good，在浏览器版本不断更新迭代的当初，其兼容性曾经十分不错了，大家能够放心使用。 对于IntersectionObserver的语法，笔者不赘述了，咱们间接上自定义指令代码 自定义指令代码 // let loadimage = "http://ashuai.work:10000/imgGifSrc/loading.gif" // 服务器加载中图片// let errorimage = "http://ashuai.work:10000/imgGifSrc/error.gif" // 服务器加载中图片let loadimage = require('../../assets/imgLazyload/loading.gif') // 本地加载中图片let errorimage = require('../../assets/imgLazyload/error.gif') // 本地加载失败图片export default { inserted(el, binding, vnode) { // 1. 先让图片显示加载中... el.src = loadimage.default // 2. 实例化一个：察看检测者 const observer = new IntersectionObserver((entries) => { // 4. 在察看监测者的对应执行函数中获取到isIntersecting属性（是否穿插） let isIntersecting = entries[0].isIntersecting // 5. 如果穿插了，就让其去加载对应src的真正的地址 if (isIntersecting) { el.src = binding.value // 6. 加载胜利就不必管它 el.onload = (res) => console.log('加载胜利', res); // 7. 加载失败了就去做一个谬误图片的占位 el.onerror = (err) => { console.log('加载失败', err); el.src = errorimage.default } // 8. 无论加载胜利或失败，都进行察看工作了 observer.unobserve(el) } }) // 3. 让这个察看检测者去察看对应img标签图片 observer.observe(el) },}应用代码 ...

在线图片水印平铺工具在线图片水印平铺工具 本工具能够为图片增加自定义的平铺文本水印，能够用于给证件增加水印，隐衷图片增加水印等，方便快捷，工具仅反对较新的浏览器版本。 工具为纯客户端解决，数据将不会上传到网络服务器中，请放心使用。 https://tooltt.com/img-watermark/

一起网易云 网易云音乐想必是大家很相熟的一款 app 了，毕竟大家在深夜都会网抑云开玩笑了，最近在网易云听歌时，发现了一个很有意思的特效： 就是切换歌曲时，会依据以后封面替换背景色。作为资深切图仔，我那该死的好奇心兜不住了，不行，我要去一探到底。首先我构思了很多它可能的实现形式： 机器学习对图片进行色调剖析前端提取图片主色调，做突变解决封面背景图做高斯含糊对于第一种，他不在我的常识范畴内，这里就不开展阐明了 。 第二种的话，个别都是利用canvas来实现。 第三种相对来说，从技术层面来看，实现上是最为简略的。 做了猜想剖析后，我默默关上了相熟的 Chrome 控制台，关上了网易云音乐的源代码： 好家伙，果然是第三种实现形式。 原本到这里，本文就该完结了。但之前也有敌人问过我如何对前端图片主题色进行提取的问题，正好之前也做过相似的需要，这里就开展做个阐明吧。 咱们这里以一个图片网站为例，来展现理论业务中利用较广的场景：在弱网下，图片加载速度较慢，此时在图片齐全加载之前，提取图片的主色调，而后填充为背景色。这样用户体验能有较大的晋升。 那具体是怎么实现的呢？ 咱们这里采纳canvas来实现，具体分为三步： 获取图片数据对图片数据进行解决对色彩列表排序这里咱们应用的测试图片为： 相对来说，主色调较为显著，也便于测试～ 获取图片数据 咱们晓得图片是由一个个像素点组成的。通过 canvas 的getImageData()办法恰好能够获取图片的像素数据： let imgObj = document.getElementById('yourId');// 创立画布let canvas = document.createElement('canvas');canvas.setAttribute('width', imgObj.width);canvas.setAttribute('height', imgObj.height);let context = canvas.getContext('2d');// 将图片画在画布上context.drawImage(imgObj, 0, 0);// 获取像素数据let imgData = context.getImageData(0, 0, imgObj.width, imgObj.height);let pixelData = imgData.data;但这时你去打印pixelData，你会发现后果为：好家伙，全是 0，，， 我一时想不到是什么起因：难道是 canvas 的 api 应用不纯熟？ 在stackoverflow上找到了下面的答复：然而我批改后还是不行。 这时，我想到图片加载是异步的。可能图片还没加载结束就开始从画布读取图片数据了，显然这是不对的。于是我对原有代码做了一番调整： getMainColor("./test.jpeg");function getMainColor(image) { return new Promise((resolve, reject) => { try { const canvas = document.createElement("canvas"); const img = new Image(); // 创立img元素 img.src = image; // 设置图片源地址 img.onload = () => { let color = getImageColor(canvas, img); resolve(color); }; } catch (e) { reject(e); } });}function getImageColor(canvas, img) { const context = canvas.getContext("2d"); context.drawImage(img, 0, 0); // 获取像素数据 let pixelData = context.getImageData( 0, 0, canvas.width, canvas.height ).data; console.log("pixelData", pixelData); return pixelData;}事实证明：it's true ...

react图片缩放、平移（position、transform实现）上篇讲到了应用position、transform来实现图片的平移缩放。本篇将采纳canvas来实现看看。 canvasHTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过，<canvas> 元素自身并没有绘制能力（它仅仅是图形的容器） - 您必须应用脚本来实现理论的绘图工作。 getContext()：返回一个对象，该对象提供了用于在画布上绘图的办法和属性 getContext(contextId: "2d", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D | null;getContext(contextId: "bitmaprenderer", options?: ImageBitmapRenderingContextSettings): ImageBitmapRenderingContext | null;getContext(contextId: "webgl", options?: WebGLContextAttributes): WebGLRenderingContext | null;getContext(contextId: "webgl2", options?: WebGLContextAttributes): WebGL2RenderingContext | null;getContext(contextId: string, options?: any): RenderingContext | null;clearRect()：在给定的矩形内革除指定的像素 clearRect(x: number, y: number, w: number, h: number): void;

很多网页都会给文案附上一些图片补充形容，例如在说到地址时，会在旁边附上一张地图，并且在地图上标注该地址。如果附上的图片很小，很难看分明地址的具体信息，有些产品经理会给图片设计一个能够平移、放大放大的性能。本文将一一实现上述性能。 废话不多说，先给上效果图： 次要三个性能点： 图片平移图片缩放车站标注图片平移图片平移能够监听这三个事件实现：onMouseDown、onMouseMove、onMouseUp。onMouseDown事件记录每次鼠标按下的坐标地位；onMouseMove事件计算出每次平移的间隔，该间隔加上拖动前图片间隔父元素的间隔就等于拖动后图片绝对于父元素的间隔；onMouseUp事件触发时，登记或者不让执行onMouseDown、onMouseMove事件，避免只有鼠标移入图片就会平移。 这三个事件须要阻止浏览器的默认行为，不然在挪动时会主动关上图片。 const WIDTH = 1200;const HEIGHT = 900;const DynamicStyle= () => { const imgRef = React.createRef<HTMLImageElement>(); /** 图片款式 */ const [imgStyle, setImgStyle] = useState<React.CSSProperties>({}); /** 记录鼠标是否按下 */ const [mouseDowmFlag, setMouseDowmFlag] = useState(false); /** 记录鼠标按下的坐标 */ const [mouseDowmPos, setMouseDowmPos] = useState<{x: number, y: number}>({x: 0, y: 0}) /** 鼠标可视区域时，重置鼠标按下的布尔值为false */ useEffect(() => { document.onmouseover = () => { if (mouseDowmFlag) { setMouseDowmFlag(false); } }; return () => { document.onmouseover = null; }; }, [mouseDowmFlag]) /** 平移 */ const handleMouseDown = (event: React.MouseEvent<HTMLImageElement>) => { const { clientX, clientY } = event; event.stopPropagation(); event.preventDefault(); // 阻止浏览器默认行为，拖动会关上图片 setMouseDowmFlag(true); // 管制只有在鼠标按下后才会执行mousemove setMouseDowmPos({ x: clientX, y: clientY, }); }; const handleMouseMove = (event: React.MouseEvent<HTMLImageElement>) => { event.stopPropagation(); event.preventDefault(); const { clientX, clientY } = event; const diffX = clientX - mouseDowmPos.x; const diffY = clientY - mouseDowmPos.y; if (!mouseDowmFlag || (diffX === 0 && diffY === 0)) return; const { offsetLeft, offsetTop } = imgRef.current as HTMLImageElement; const offsetX = parseInt(`${diffX + offsetLeft}`, 10); const offsetY = parseInt(`${diffY + offsetTop}`, 10); setMouseDowmPos({ x: clientX, y: clientY, }); setImgStyle({ ...imgStyle, left: offsetX, top: offsetY, }); }; const handleMouseUp = (event: React.MouseEvent<HTMLImageElement>) => { event.stopPropagation(); event.preventDefault(); setMouseDowmFlag(false); }; return ( <div className={styles.imgArea}> <img src={mapImg} alt='part' ref={imgRef} height={HEIGHT} style={imgStyle} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} > </img> </div> )}图片缩放图片缩放能够监听onWheel事件，事件对象event有一个记录滚轮滚动的属性deltaY，当向上滚动时deltaY<0，向下滚动时deltaY>0。每次滚动批改其缩放的比例，同时更改transform款式按比例进行缩放。 ...

在做计算机视觉的我的项目过程中，图像的读写是最根底的工作。上面的内容就是对罕用的几个图像处理库的总结： 1、imageioimageio 是python的一个库，提供了简洁的图像读写接口，可能读写大部分格局的图像数据。 import imageioim = imageio.imread('imageio:chelsea.png') # read a standard imageimageio.imwrite('~/chelsea-gray.jpg', im[:, :, 0])还能够读写视频 import imageioreader = imageio.get_reader('imageio:cockatoo.mp4')for i, im in enumerate(reader): print('Mean of frame %i is %1.1f' % (i, im.mean()))2、OpenCV opencv-基础知识--参考链接图像读取和显示 import cv2 #导入opencv库#读取一张图片，地址不能带中文#第二个参数，取值可为：#cv2.IMREAD_COLOR：默认参数，读入一副彩色图片，疏忽alpha通道#cv2.IMREAD_GRAYSCALE：读入灰度图片#cv2.IMREAD_UNCHANGED：读入残缺图片，包含alpha通道(png有，jpg无）img=cv2.imread("test.jpg",cv2.IMREAD_COLOR)#img=cv2.imread("test.jpg")img_gray = cv2.imread("test.jpg", 0)#显示图片，参数：（窗口标识字符串，imread读入的图像）cv2.imshow("题目",img)#窗口期待任意键盘按键输出,0为始终期待,其余数字为毫秒数cv2.waitKey(0)#销毁窗口，退出程序cv2.destroyAllWindows()#一个像素有三个通道，BGRprint(img.shape)#输入：(1080, 1920, 3) 高像素，宽像素，通道数print(img.size)# 120000 总通道数=高* 宽* 通道数print(img.dtype)# uint8 3个通道每个通道占的位数（8位，一个字节）色调转换 #将图片由BGR转换为灰度areax=cv2.cvtColor(areax,cv2.COLOR_BGR2GRAY)图像保留 #将图片保留，写入到文件cv2.imwrite("2.jpg",imgviewx)扭转图像尺寸 cv2.resize() #放大和放大图像 #参数： # src: 输出图像对象 # dsize：输入矩阵/图像的大小，为0时计算形式如下：dsize = Size(round(fx*src.cols),round(fy*src.rows)) # fx: 程度轴的缩放因子，为0时计算形式： (double)dsize.width/src.cols # fy: 垂直轴的缩放因子，为0时计算形式： (double)dsize.heigh/src.rows # interpolation：插值算法 # cv2.INTER_NEAREST : 最近邻插值法 # cv2.INTER_LINEAR 默认值，双线性插值法 # cv2.INTER_AREA 基于部分像素的重采样（resampling using pixel area relation）。 # cv2.INTER_CUBIC 基于4x4像素邻域的3次插值法 # cv2.INTER_LANCZOS4 基于8x8像素邻域的Lanczos插值 import cv2import numpy as npimg = cv2.imread('messi5.jpg')res = cv2.resize(img,None,fx=2, fy=2, interpolation = cv2.INTER_CUBIC)#ORheight, width = img.shape[:2]res = cv2.resize(img,(2*width, 2*height), interpolation = cv2.INTER_CUBIC)#图像放大两倍图像处理 ...

作者：心叶 工夫：2020-09-01 00:03 ???? 对于我的项目应用ECMAScript绘制二维图片,开发这个库的初衷是心愿越来越多的人能够更自在的施展本人的创意，感触绘图的乐趣，并把积攒的教训分享进去，推动库自身的倒退，从而一直优化！因而，这个库永远都是自在、开源、探讨和提高的。 <script src="https://cdn.jsdelivr.net/npm/image2d@1.8.9/build/image2D.min.js"></script>你能够通过CDN的形式引入（版本历史），在代码中通过image2D或$$调用，当然，你也能够通过npm的形式引入。 npm install --save image2d装置好了当前，在须要的中央引入即可： import $$ from 'image2d';具体的接口或相干阐明请查阅接口文档或者在遇到困难的时候通过issue和咱们取得联系！ ???? 图表用例 如果想退出其中能够通过issue分割咱们,这是在线地址 ???? 疾速应用上面咱们来演示如何绘制一个圆弧（更简单的图形，比方树图、地图等请通过教程进行学习）！获取画笔绘图的第一步当然是获取画笔了，画笔分为两种：Canvas2D 和 SVG，咱们来看看具体的代码： // 咱们假设咱们当初在页面有一个canvas标签：<canvas id='painter'></canvas>var painter=$$('#painter').attr({ "width":300, "height":300}).painter();下面的$$('#painter')返回一个 image2D 对象，通过 ID 选择器查找结点，咱们设置了画布的大小，而后调用对象上的 painter 办法就能够获取画笔了。 如何判断画笔的类型？如果结点是 canvas 获取的就是 Canvas2D 画笔，如果结点是 SVG 获取的就是 SVG 画笔，因而这里是Canvas2D画笔。 配置画笔不论是什么画笔，都一样能够进行配置（当然有缺省值），比方画笔的粗细，色彩等，上面来配置圆弧的色彩和线条粗细和类型： painter.config({ 'strokeStyle':'red', 'lineWidth':3, 'lineDash':[5]});绘制画笔获取并配置好了当前，间接调用画笔上的办法即可绘图： painter.strokeArc(150, 150, 100, 130, Math.PI/2, Math.PI/2*3);这样，一个圆弧就绘制好了，能够点击此次查看运行成果。 怎么样？是不是很简略，尽管间接应用 Canvas2D 或 SVG 也能够实现，不过借助这个库绘图会更简略（咱们次要解决了浏览器兼容和简单计算上的问题，并使得SVG和Canvas2D绘图习惯保持一致，同时形象了局部有用的概念）。 你能够把更多的精力放在绘制出更乏味的作品上（如果借助本库开发了乏味的作品，能够去这里增加，如果应用过程中有好的意见，能够来issue中提出）。 开源协定MIT Copyright (c) 2018-2020 走一步 再走一步 ...

牛X壁纸系统-是一款专注针对于壁纸类网站开发的一套CMS管理程序.采用最高效PHP+MYSQL架构,可在不同的平台上运行（Windows、Linux、Unix）.系统专注于访问速度,优化收录等主要因素,来赢取客户的信任,牛X壁纸系统会一直不断完善.欢迎关注牛X壁纸系统的成长.我们会一步一步一点一滴的做出最好的产品. 牛X壁纸系统特点：1.图片上传自动解析图片背景元素占比，通过搜索获得相同颜色的壁纸 2.图片截取位置设置，自动裁剪成设定尺寸的壁纸 3.壁纸尺寸设置，电脑,平板，手机等，最大可以设置8k壁纸，图片根据用户访问壁纸尺寸规格自动生成壁纸 4.用户通过设备访问，自动识别屏幕尺寸，推荐响应尺寸壁纸给用户 5.自适应模版，支持电脑,平板，手机等各种设备 更多功能，请自行安装体验. 安装步骤：www服务器 Apache、Nginx、IIS、Kangle 等请先安装php5.4版本及PHP的函数库Mcrypt，没有安装Mcrypt会报错MySQL 5.5 及以上不要用phpStudy测试，phpStudy没有自带Mcrypt函数，建议用UPUPW Kangle版安装流程操作：上传 程序文件 目录中的所有文件到服务器设置目录属性（windows 服务器可忽略这一步）以下这些目录需要可读写权限(0777) ./uploads及子目录 ./application/cache及子目录 ./application/config及子目录 ./application/logs 执行安装脚本 （域名）/install----无需设置直接访问网址即可请在浏览器中访问 http://您的域名/install 安装完成后,请删除 install和 dist文件夹默认后台地址http://您的域名/administrator 默认帐号：admin@100g.vip 密码：123456 设置完毕，清空下缓存牛X壁纸系统页面展示 源码地址https://gitee.com/megadata/Sw...

文/方子龙 平常在写作和写博客时，需要找配图的时候，没找到免费无版权的图片，而且又不高清。我自己花时间收集整理一些免费无版权的图片网站，分享。1. pixabay惊人的免费图片---发现我们慷慨的社区分享的 0.1 百万张图片和视频。 英文版地址：https://pixabay.com/中文版地址：https://pixabay.com/zh/2. Fotor图片主要按照商业类，动物类，大自然类，还有其他类。针对性的找的时候，可以选择这个网站 网址：https://foter.com/3.pexels 网址：https://www.pexels.com/4.designerspics.com 网址：https://www.designerspics.com5.stockvault 网址：https://www.stockvault.net6.unsplash 网址：https://www.unsplash.com7.barnimages 网址：https://barnimages.com/持续更新.....

formData可以实现图片上传，但是如果在上传图片的同时也要上传其他数据呢？ 且其他数据不通过对象方式传给后台，而是依然通过json数据格式传递 代码如下： submitBtn () { let formData = new FormData() formData.append("file",this.file)//图片 let params = { contentId: this.pictureId, description: this.detailForm.desc, }//其他数据 formData.append('contentId',params.contentId)//json格式上传 formData.append('description',params.description) maintain.addFasMaintainInfoRecord(formData)//上传接口 .then((res) => { this.$Message.success('添加成功') }) .catch((err) => { this.$Message.error('添加失败') }) },

前言首先承认一下，我自己就是其中一个壁纸站站长。自建站至今，阅览壁纸网站无数，收藏列表满满一堆优质的壁纸站。今天就来一波商业互吹，看看在9102年哪些壁纸站可以清新脱俗。正文PS：排名不分先后一、极简壁纸官网：https://bz.zzzmh.cn分类：精选、小姐姐、二次元、4K超清、更多分类说明：图片种类丰富，分辨率1~8K，图片来源wallhaven推荐：★ ★ ★ ★ ★二、必应壁纸官网：https://bing.ioliu.cn分类：首页、下载榜说明：出自前端大神之手，以假乱真的设计。界面干净漂亮，图片来源必应每日图片。推荐：★ ★ ★ ★ ★三、千叶网官网：http://qianye88.com分类：4k动漫、4k美女、4k风景、4k游戏 等太多不一一举例说明：设计好看、功能全面，分辨率高。小吐槽：下载要先登录。推荐：★ ★ ★ ★ ☆四、pexels官网：https://www.pexels.com分类：摄影为主说明：据说是全球顶尖高清摄影图片分享网站，免费授权商用推荐：★ ★ ★ ★ ★五、unsplash官网：https://unsplash.com分类：各种都有说明：纯粹、简单、优雅，高质量无版权图片分享圣地推荐：★ ★ ★ ★ ★六、pixabay官网：https://pixabay.com分类：摄影为主说明：提供海量免费高清图片、插画、矢量素材，图片超美，支持中文好评！推荐：★ ★ ★ ★ ★

有时候我们可能需要在其他的网页上展示我们自己的小程序中某些页面的小程序码，这种时候，我们需要用到小程序的生成小程序码的相关接口。工具选型我们仍然选用简单方便的weixin-java-miniapp来完成此功能。项目配置详见我们的另一篇文章点此进入生成小程序码的相关类型小程序码的其他生成方式以及相关类型在这篇文章点此进入中介绍的较为详细，此处不再赘述，以下仅以生成不限制张数的这种类型来做一个示例。生成小程序码图片先获取小程序的service实例wxMaService。再获取二维码相关操作的service实例// 获取小程序服务实例WxMaService wxMaService = WxMaConfiguration.getWxMaService();// 获取小程序二维码生成实例WxMaQrcodeService wxMaQrcodeService = wxMaService.getQrcodeService();// 设置小程序二维码线条颜色为黑色WxMaCodeLineColor lineColor = new WxMaCodeLineColor(“0”, “0”, “0”);// 生成二维码图片字节流（此处也可以生成File类型，如果想将图片文件保存到服务器就生成File类型，此处生成byte[]类型，方便直接返回文件流到前端）byte[] qrCodeBytes = null;qrCodeBytes = wxMaQrcodeService.createWxaCodeUnlimitBytes(String.valueOf(id), null, 430, false, lineColor, false);返回文件流将文件流写到response中，相关示例代码如下：@RestController@RequestMapping("/qrCode")public class QrCodeController { private static final Logger logger = LoggerFactory.getLogger(QrCodeController.class); @GetMapping("/getMiniappQrCode/{id}") public void getMiniappQrCode(@PathVariable(“id”) Long id, HttpServletRequest request, HttpServletResponse response) throws Exception{ // 获取小程序服务实例 WxMaService wxMaService = WxMaConfiguration.getWxMaService(); // 获取小程序二维码生成实例 WxMaQrcodeService wxMaQrcodeService = wxMaService.getQrcodeService(); // 设置小程序二维码线条颜色为黑色 WxMaCodeLineColor lineColor = new WxMaCodeLineColor(“0”, “0”, “0”); // 生成二维码图片字节流 byte[] qrCodeBytes = null; try{ qrCodeBytes = wxMaQrcodeService.createWxaCodeUnlimitBytes(String.valueOf(id), null, 430, false, lineColor, false); } catch(Exception e){ logger.error(“生成小程序码出错”, e); } // 设置contentType response.setContentType(“image/png”); // 写入response的输出流中 OutputStream stream = response.getOutputStream(); stream.write(qrCodeBytes); stream.flush(); stream.close(); }} ...

前言作为一个客户端开发，对于图片格式一直没有一个清晰的了解，这里简单的罗列出各种图片格式的区别，文章中有部分是他人的引用，会在底部放上链接，望轻喷。概念了解有损压缩 & 无损压缩有损压缩（lossy compression）：有损压缩算法是一种数据压缩方法，经过此方法压缩、解压的数据会与原始数据不同但是非常接近。它是与无损数据压缩相对的压缩方法。有损数据压缩又称破坏性资料压缩、有损压缩、有损压缩、不可逆压缩。其原理是借由将次要的信息数据舍弃，牺牲一些质量来减少数据量、提高压缩比。这种方法经常用于压缩多媒体数据（音频、视频、图片）。根据各种格式设计的不同，有损数据压缩都会有代间损失——每次压缩与解压文件都会带来渐进的质量下降。无损压缩（Lossless Compression）：指数据经过压缩后，信息不受损失，还能完全恢复到压缩前的原样。无损压缩通常用于严格要求“经过压缩、解压缩的数据必须与原始数据一致”的场合。典型的例子包括文字文件、程序可执行文件、程序源代码。有些图片文件格式，例如PNG和GIF，使用的是无损压缩。索引色 & 直接色索引色：索引颜色是一种以有限的方式管理数字图像颜色的技术，以节省计算机内存和文件存储，同时加速显示刷新和文件传输。即用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，通常是256种颜色，对应到计算机系统中，使用一个字节的数字来索引一种颜色。索引色常见有1位（即黑白），8位（即灰阶/256色），16位（即高彩），24位（即真彩），30/36/48位（即全彩），更多详细参考该百科。 直接色：使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度（即rgba）。现在流行的显示设备可以在这四个维度分别支持256种变化，所以直接色可以表示2的32次方种颜色。当然并非所有的直接色都支持这么多种，为压缩空间使用，有可能只有表达红、绿、蓝的三个数字，每个数字也可能不支持256种变化之多。位图 & 矢量图：位图：位图[bitmap]，也叫做点阵图，栅格图像，像素图，简单的说，就是最小单位由像素构成的图，缩放会失真。构成位图的最小单位是像素，位图就是由像素阵列的排列来实现其显示效果的，每个像素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个像素，我们可以改变图像的色相、饱和度、明度，从而改变图像的显示效果。举个例子来说，位图图像就好比在巨大的沙盘上画好的画，当你从远处看的时候，画面细腻多彩，但是当你靠的非常近的时候，你就能看到组成画面的每粒沙子以及每个沙粒单纯的不可变化颜色。矢量图：矢量图[vector]，也叫做向量图，简单的说，就是缩放不失真的图像格式。矢量图是通过多个对象的组合生成的，对其中的每一个对象的纪录方式，都是以数学函数来实现的，也就是说，矢量图实际上并不是象位图那样记录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一幅矢量图的时候，软件对图形相对应的函数进行运算，将运算结果[图形的形状和颜色]显示给你看。无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示效果仍然相同[不失真]。举例来说，矢量图就好比画在质量非常好的橡胶膜上的图，不管对橡胶膜怎样的常宽等比成倍拉伸，画面依然清晰，不管你离得多么近去看，也不会看到图形的最小单位。图片类型BMPBMP取自位图BitMaP的缩写，也称为DIB（与设备无关的位图），是一种与显示器无关的位图数字图像文件格式。BMP同时支持索引色和直接色，但是其几乎没有压缩，所以通常图片非常的大，也导致了其几乎没有用武之地，现在除了在Windows操作系统中还比较常见之外，我们几乎看不到它。再加上浏览器的不支持，所以作为web开发，更加少于看到BMP。这里简单描述一下BMP解析成二进制时的结构：位置含义bmp文件头(bmp file header)提供文件的格式、大小等信息位图信息头(bitmap information)提供图像数据的尺寸、位平面数、压缩方式、颜色索引等信息调色板(color palette)（如果有的话）如使用索引来表示图像，调色板就是索引与其对应的颜色的映射表位图数据(bitmap data)则图片数据GIF全称Graphics Interchange Format，采用LZW压缩算法进行编码。是无损的、采用索引色的、点阵图。GIF是无损的，采用GIF格式保存图片不会降低图片质量。但得益于数据的压缩，GIF格式的图片，其文件大小要远小于BMP格式的图片。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但，GIF格式仅支持8bit的索引色，即在整个图片中，只能存在256种不同的颜色。简单介绍下GIF使用的LZW压缩算法，详细可参考该文章：LZW编码 (Encoding) 的核心思想其实比较简单，就是把出现过的字符串映射到记号上，这样就可能用较短的编码来表示长的字符串，实现压缩。 比如： 我们可以将ABCDEFG 转成 1 来代表， 这样数据就会减少很多。再加上，LZW编码是自解释 (self-explaining) 的，即映射字典不会写到压缩数据里，他是在解码的过程中还原出编码时用的字典。JPEGJPEG是有损的、采用直接色的、点阵图。JPEG也是一种针对照片影像而广泛使用的有损压缩标准方法。JPEG图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息，也即是进行了有损压缩。JPEG的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。JPEG的算法比较复杂， 如果有兴趣可以参考该文章 其大概分为三步：把数据分为“重要部分”和“不重要部分”滤掉不重要的部分保存PNG便携式网络图形（英语：Portable Network Graphics，缩写：PNG）是一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。PNG的开发目标是改善并取代GIF作为适合网络传输的格式而不需专利许可，所以被广泛应用于互联网及其他方面上。PNG-8PNG-8是无损的、使用索引色的、点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。 现在，除非需要动画的支持，否则我们没有理由使用GIF而不是PNG-8。当然了，PNG-8本身也是支持动画的，只是浏览器支持得不好，不像GIF那样受到广泛的支持。PNG-24PNG-24是PNG的直接色版本。PNG-24是无损的、使用直接色的、点阵图。无损的、使用直接色的点阵图，听起来非常像BMP，是的，从显示效果上来看，PNG-24跟BMP没有不同。PNG-24的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。虽然PNG-24的一个很大的目标，是替换JPEG的使用。但一般而言，PNG-24的文件大小是JPEG的五倍之多，而显示效果则通常只能获得一点点提升。所以，只有在你不在乎图片的文件体积，而想要最好的显示效果时，才应该使用PNG-24格式。另外，PNG-24跟PNG-8一样，是支持图片透明度的。PNG-32PNG32也是PNG的直接色版本。其表现与PNG-24差不多。三者的区别在于：PNG-32每个像素的深度为32bits，其中RGBA四个通道各占8bits。所谓的RGBA四个通道，就是红，绿，蓝，透明 这四种色值各自的大小，都用8bits来表示（0～255）。PNG-24的像素深度为24bits，其中RGB三个通道各占8bits。PNG-8则是使用8位的索引色。SVGSVG是很多种矢量图中的一种，它的特点是使用XML来描述图片。借助于前几年XML技术的流行，SVG也流行了很多。使用XML的优点是，任何时候你都可以把它当做一个文本文件来对待，也就是说，你可以非常方便的修改SVG图片，你所需要的只需要一个文本编辑器。如果你是一个前端开发，那你应该对其了解比较多。图片比较与场景应用类型优点缺点应用场景BMP无损压缩，图质最好，支持索引色和直接色文件过大目前仅存于WINDOWS系统GIF无损压缩，支持动画及透明仅支持256种颜色，画质差需要动画的需求JPEG文件小有损压缩，画质损失不考虑过好画质且需响应速度较快， 如大背景图PNG-8无损压缩， 支持透明画质中等应用于大多数中小图且要求画质比较好的需求SVG支持放大缩小而不影响画质编写麻烦，性能差多应用于ICON之类一图胜前言待补充总结了解各种图片的格式，有助于我们与设计同事的沟通，与大家共勉。引用 & 参考图片格式那么多，哪种更适合你？

jpgjpg是有损压缩，压缩率高，不支持透明，适用于对图片质量要求不是很高的场景，可以减低图片的大小PngPng有三种Png8：256色+支持透明Png24：2^24色+不支持透明Png32：2^24色+支持透明兼容性好，图片质量高、色彩表现好、支持透明效果、提供锋利的线条和边缘，所以做出的logo等小图标效果会更好、更好地展示文字、颜色相近的图片。webpwebp压缩程度更好，但在ios webview有兼容性问题，在安卓下使用webp，因为具有更优的图像数据压缩算法，能带来更小的图片体积，并且同时拥有肉眼无法识别差异的图像质量，同时具有无损和有损的压缩模式，Alpha透明以及动画的特性，在JPGE和PNG上的转化效果非常优秀稳定和统一svg矢量图代码内嵌，相对较小，适用于图片样式相对简单的场景，如用iconfont解决icon的问题CSS雪碧图CSS雪碧图是吧一些图片整合到一张图片中，优点是减少网络的HTTP请求数量，缺点是整合后图片大，加载比较慢（制作CSS雪碧图网址：wwww.spritecow.com）Image inlineImage inline是将图片的内容内嵌到html当中，如base64，可以减少网站的HTTP请求数量，一般图片小于8kB可以做Image inline处理，因为此时内嵌的代价小于请求资源的代价

极简壁纸是一个期望呈现出简单高效美观的壁纸网站。网站链接：https://bz.zzzmh.cn推荐几张最新更新的壁纸(图片发到这里会被压缩质量，建议访问网站下载原图)网站链接：https://bz.zzzmh.cn

极简壁纸是一个期望呈现出简单高效美观的壁纸网站。推荐一批新更的壁纸网站链接：https://bz.zzzmh.cn网站链接：https://bz.zzzmh.cn(图片发到这里会被压缩质量，建议访问网站下载原图)

极简壁纸是一个期望呈现出简单高效美观的壁纸网站。推荐一批近期的壁纸(图片发到这里会被压缩质量，建议访问网站下载原图)网站链接：https://bz.zzzmh.cn(图片发到这里会被压缩质量，建议访问网站下载原图)网站链接：https://bz.zzzmh.cn

极简壁纸是一个期望呈现出简单高效美观的壁纸网站。推荐一批近期的壁纸(图片发到这里会被压缩质量，建议访问网站下载原图)网站链接：https://bz.zzzmh.cn(图片发到这里会被压缩质量，建议访问网站下载原图)网站链接：https://bz.zzzmh.cnEND

极简壁纸是一个期望呈现出简单高效美观的壁纸网站。灵感来源是爱壁纸APP，图片来源是wallhaven.cc极简壁纸网站建立于2018年5月1日。起初是只是由于站长个人兴趣爱好，酷爱找各种壁纸。网站链接：https://bz.zzzmh.cn界面展示首页精选：近期最火的图片精选 (与wallhaven的toplist同步)入口：极简壁纸 > 精选小姐姐：小姐姐、妹纸等相关的图片入口：极简壁纸 > 小姐姐二次元：二次元、动画、漫画、游戏CG等相关的图片入口：极简壁纸 > 二次元自然：自然、风景、摄影作品等相关的图片入口：极简壁纸 > 自然标签：按照标签分类，可以分别查看单独标签下的图片入口：极简壁纸 > 标签喜欢：每张图片右下角都有一个红心，点击红心"喜欢"该图片，所有喜欢的图片默认保存在浏览器本地，登录后可与云端同步。入口：极简壁纸 > 喜欢关于我们入口：极简壁纸 > 关于我们END如果喜欢的话可以来看看，地址 bz.zzzmh.cn ，对于网站有什么意见建议也欢迎回复留言。谢谢！

由于这里发图片会被压缩质量，建议访问极简壁纸官网下载高清大图极简壁纸官网 : https://bz.zzzmh.cn (9102年最潮壁纸网站)由于这里发图片会被压缩质量，建议访问极简壁纸官网下载高清大图极简壁纸官网 : https://bz.zzzmh.cn (9102年最潮壁纸网站)

由于这里发图片会被压缩质量，建议访问极简壁纸官网下载高清大图极简壁纸官网 : https://bz.zzzmh.cn (9102年最潮壁纸网站)今日最热壁纸由于这里发图片会被压缩质量，建议访问极简壁纸官网下载高清大图极简壁纸官网 : https://bz.zzzmh.cn (9102年最潮壁纸网站)。

这几个图片网站都是高质量的图片网站,建议收藏!找个高逼格的图片发票圈,不再难了。Unsplash网址:https://unsplash.comUnsplash是一个免费高质量照片的网站，照片都是真实的摄影，照片分辨率也很大，全是生活中的景象作品，清新的生活气息图片可以作为桌面壁纸，也可以应用于文章配图或设计项目。Unsplash的一些摄影作品：Pexels网址:https://unsplash.comPexels是一个提供免费图片的好地方，网站整体看上去很舒服。有摄影和剪贴画，也是一个较大的照片网站，所以里面的内容相对来说就比较丰富。Pexels支持英文搜索，而且图片分类清晰，方便查找。Pexels的一些图片：picjumbo网址:https://picjumbo.comPicJumbo提供免费个人和商业使用的图像，照片质量很不错，非常适合用在文章配图和其他项目上。网站搜索不支持中文，只支持英文。PicJumbo的一些图片：Life Of Pix网址:https://www.lifeofpix.comLife Of Pix提供免费高清图像素材，质量很高，并且无版权限制，可以直接下载。Life Of Pix的一些图片：以上网站均只支持英文搜索。地址给你了，赶紧找图装X去 THANDKSEnd -一个立志成大腿而每天努力奋斗的年轻人伴学习伴成长，成长之路你并不孤单!

前言临下班前，看到群里有人在讨论用王者农药的一些皮肤作为电脑的壁纸，什么高清的，什么像素稍低的，网上查了一手，也有，但像素都不一样，所以，我就想着，自己去官网直接爬他的高清皮肤就好了，然后就有了这边文章说的主题了。爬图思路找到英雄列表进入官网，然后进入英雄介绍，查看更多英雄，就能看到全部的英雄了，也就是下面的这个链接英雄列表：https://pvp.qq.com/web201605/herolist.shtml英雄详情点击每个英雄进来，就可以看到每个英雄的详细信息，基本介绍以及皮肤展示，而我们需要爬取的皮肤，就在右下角那里，鼠标放上去，就可以逐个展示该皮肤了小鲁班的详细信息：https://pvp.qq.com/web201605/herodetail/112.shtml分析皮肤图片URL从上面的这张鲁班的图片中我们可以看到，通过F12定位到皮肤的小图片位置，li元素里有一个img的元素，其中img的src和data-imgname这两个属性，查看一下，就不难知道，src的属性值是小图，而data-imgname则是我们需要的大图URL，但是查看源码，就会发现，在html中，并没有这个属性，所以，需要我们分析这个URL的规律来得到其他英雄的皮肤图片，分析也不难发现，112就是英雄的id，而bigskin-2里面的2即表示这个英雄的第几张皮肤图片开始编写爬虫脚本第一步：定义一些常用变量第二步：抓取所有英雄列表第三步：循环遍历，分析每个英雄皮肤节点第四步：下载图片第五步：爬虫结束完整源码感觉上面七七八八的，说了些啥呀，真是墨迹，还不如直接上代码实在，好吧，我错了，马上交出源码，请各位看官饶恕，同时，代码我也上传了交友网站GitHub。#!/usr/bin/env python# -- coding: utf-8 --“““抓取王者荣耀皮肤author: gxcuizydate: 2018-11-06"““import requestsfrom bs4 import BeautifulSoupfrom urllib import parseimport osclass Skin(object): def init(self): # 英雄的json数据 self.hero_url = ‘https://pvp.qq.com/web201605/js/herolist.json' # 英雄详细页的通用url前缀信息 self.base_url = ‘https://pvp.qq.com/web201605/herodetail/' # 英雄详细页url后缀信息 self.detail_url = ’’ # 图片存储文件夹 self.img_folder = ‘skin’ # 图片url的通用前缀 self.skin_url = ‘https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/' # 图片url的后缀信息 self.skin_detail_url = ’’ def get_hero(self): “““获取英雄的json数据””” request = requests.get(self.hero_url) hero_list = request.json() return hero_list def get_hero_skin(self, hero_name, hero_no): “““获取详细页英雄皮肤展示的信息，并爬图””” url = parse.urljoin(self.base_url, self.detail_url) request = requests.get(url) request.encoding = ‘gbk’ html = request.text # 获取皮肤信息的节点 soup = BeautifulSoup(html, ’lxml’) skip_list = soup.select(’.pic-pf-list3’) for skin_info in skip_list: # 获取皮肤名称 img_names = skin_info.attrs[‘data-imgname’] name_list = img_names.split(’|’) skin_no = 1 # 循环下载皮肤图片 for skin_name in name_list: self.skin_detail_url = ‘%s/%s-bigskin-%s.jpg’ % (hero_no, hero_no, skin_no) skin_no += 1 img_name = hero_name + ‘-’ + skin_name + ‘.jpg’ self.download_skin(img_name) def download_skin(self, img_name): “““下载皮肤图片””” img_url = parse.urljoin(self.skin_url, self.skin_detail_url) request = requests.get(img_url) if request.status_code == 200: print(‘download-%s’ % img_name) img_path = os.path.join(self.img_folder, img_name) with open(img_path, ‘wb’) as img: img.write(request.content) else: print(‘img error!’) def make_folder(self): “““创建图片存储文件夹””” if not os.path.exists(self.img_folder): os.mkdir(self.img_folder) def run(self): “““脚本执行入口””” self.make_folder() hero_list = self.get_hero() for hero in hero_list: hero_no = str(hero[’ename’]) self.detail_url = hero_no + ‘.shtml’ hero_name = hero[‘cname’] self.get_hero_skin(hero_name, hero_no)# 程序执行入口if name == ‘main’: skin = Skin() skin.run()最后其实思路就是这么简单，当然了，如果有其他思路以及想法的，欢迎留言交流。额，差点忘了，大家有兴趣的，可以尝试一下爬取英雄联盟的所有英雄皮肤高清图片，有其他任何问题，也欢迎留言和交流。 ...