zoukankan      html  css  js  c++  java
  • 使用腾讯云的图片缩略图服务

    在业务开发过程中,我们有时候会遇到这样的业务场景--展示一个图集/相册。当大量图片加载时,我们一方面希望图片懒加载;另一方面,希望在列表中展示的是缩略图,然后点开时再展示大图。感谢现在云服务的发展,这些烦人的需求都被大佬们做成了第三方的服务,我们只要付费就行了。本文介绍调用腾讯云的图片处理服务。在往下看之前,首先请看完官方文档。 https://cloud.tencent.com/document/product/460/6929

    开通图片处理服务

    首先你应该使用了腾讯的对象存储服务,否则是使用不了图片处理服务的。一下是开通图片处理服务的步骤:

    1. 进入数据万象控制台,如果没有开启,需先开启
    2. 从左侧菜单栏进入【Bucket管理】
    3. 如果你已经使用了对象存储图片,点击绑定bucket
      “未命名”的副本.png
    4. 绑定完成后,在bucket右侧点击管理
    5. 进入管理后的域名管理可以看到「图片处理域名」,当你希望生成缩略图,进行图片处理时,需要让图片走这个域名
    6. 通过请求这个域名+文档中的查询参数即可对图片进行压缩。

    下面举个例子:假设你在对象存储上有一张图片,地址为:

    https://xxxx.254101407.cos.ap-shanghai.myqcloud.com/banner/planet/box.png (2M)
    

    然后你希望得到这张图片的缩略图,那么你需要设置图片的src为:

    # 格式:图片处理域名 + 图片路径 < bucketname >-[APPID].picsh.myqcloud.com
    
    https://xxxx-254101407.picsh.myqcloud.com/banner/planet/box.png?imageView2/1/w/600/h/300
    

    总之,处理服务是通过查询字符串传递参数来实现图片处理的,更多查询参数的含义可以参考官方文档: https://cloud.tencent.com/document/product/460/6929

    管道操作符“|”

    其他图片处理服务如加图片水印,文字水印的文档可以参考官网,这里再提一下管道操作符。“|” 在shell中有大作用,图片处理服务的api也借鉴了这一点。这个符号可以让我们按顺序调用多个服务,比如你想先压缩再加水印,或者图片自动旋转正后再压缩,就可以使用这个符号,下面是官网的一个demo

    http://examples-1251000004.picsh.myqcloud.com/sample.jpeg
    
    ?imageMogr2/thumbnail/!50p
    
    <b>|<b>
    
    watermark/2/text/5pWw5o2u5LiH6LGh/fill/I0ZGRkZGRg==/fontsize/30/dx/20/dy/20
    
    
  • 相关阅读:
    小端字节序与大端字节序
    V8引擎的垃圾回收策略
    TTL 和 DNS TTL 的区别
    详解 undefined 与 null 的区别
    Node.js 事件循环机制
    requestAnimationFrame 知多少?
    Web前端知识体系精简
    Vue.js 和 MVVM 小细节
    使用 Node.js 搭建 Web 服务器
    H5单页面手势滑屏切换原理
  • 原文地址:https://www.cnblogs.com/imgss/p/11171743.html
Copyright © 2011-2022 走看看