开篇先附上实验成果。下图点击后会显示另一张图片，若不能正常显示，请另存到本地后，用QQ发送消息后打开，手机QQ效果最佳（具体原因后面会解释）。
 
        下面我们先从原理说起，在PS中有三种算法如下：
 ① 线性减淡（添加）：
 Img输出 = Img上+ Img下；
 ② 划分：
 Img输出 = Img下/ Img上；
 ③ 反相：
 Img输出 = 1 – Img ；
 
       上面这些公式是什么意思呢？首先，既然两种背景（黑色与白色）下有两种显示效果，那么必须准备两张图片，这两张图片在一个PSD里面有图层顺序上下之分，我们用Img上和 Img下区分。这里有个问题，我们现在讨论的是图像的色彩值，所谓色彩值，就是某像素的像素值除以255得到的一个大于0小于1的值。所以，我们这里就用Img代表这个色彩值，比如Img上，就代表“上层图像的色彩值”，Img输出——代表最终输出的图像的色彩值。那么毋庸置疑，黑色图像的色彩值为0，白色为1.
         完了再看一个问题：两张图层，调整上层图像的不透明度opacity，从100%直到0%，画布上输出的图像肯定也经历了“Img上——混合——Img下”这样的变换。用不透明度混合公式来表达，设Img上的不透明度为O，那么：
                                    Img输出 = Img上 * O + Img下 * （1 - O）
 O为0%时，Img输出 = Img下，这时候完全显示下层图像；O为100%时，Img输出 = Img上，这时候完全显示上层图像；而O介于0~100%之间，将显示上下层的混合图像。而在QQ聊天或者贴吧这样的环境下，没有像PS里面那种混合模式的处理，我们之所以能看到不同的图像，也无非就是在黑色白色两种背景下，图像的透明度起到的作用而已，明白了这一点，那么OK——
 现在，我们假设最终制作出的图像为ImgR，这ImgR在白色背景下显示图像ImgA，点击放大进入黑色背景，马上变成图像ImgB~ 再假设ImgR的不透明度为O，加上前面交代的那些基础知识，我们是不是就可以列方程了呢？来——
 ① 白色背景下
                                                   ImgA = ImgR * O + 1*（1 - O）
 ② 点击放大（黑色背景）
                                                  ImgB= ImgR * O + 0*（1 - O）
        不知道这两个公式大家是不是看懂了。简单解释下：对于①，白色背景下，由前面不透明度混合公式可得：ImgR乘以其不透明度O，与白色背景混合~~ 白色的透明度显然就是1-O，白色色彩值为1，那么我们会看到A图像，即：Img输出 = ImgA.同理可得公式②.
 解这两个方程式，由①-②，最终得到下面两个公式：
 ③
                                                               ImgR = imgB / O
 ④
                                                             O = 1 – ImgA + ImgB
        现在，我们可以确定两个目标，一是计算图A的反向并将其与图B进行线性减淡，然后将得到的图O再与图B进行划分得到图R，然后给图R进行通道蒙版，最终结果就是我们想要的那张图片。
        还有个小细节要交代，因为在白色背景下显示ImgA，黑色背景下显示ImgB~这就意味着：构成A图像的所有像素点的明度值，必将大于构成B图像的所有像素点的明度值。只有这样，在黑白背景下，不透明度才能发挥作用。现在说一下刚刚的问题，由于电脑QQ查看图片时背景有一定透明度，所以显示效果不太好，而手机QQ最为合适。
 


 
实现步骤与具体函数
        下面我们来分别介绍一下上述算法的python实现： 
Function0（增加对比度）：
        1.选取两张目标图片img1 和img2，分别变至灰度模式，并调高两者的明暗对比度。
        这个步骤需要用到函数如下
 
convert()
实现不同图片格式的转换。我们只需用到RGBA(RGB加一个透明通道Alpha)和L(灰度)模式，
point()
逐像素点处理。我们使用它来增加或减少图片的明暗度
def main(img1,img2):
    img1_g = img1.convert("L")
    img2_g = img2.convert("L")
    img1=light_degree(img1_g,0)
    img2=light_degree(img2_r,1)
    line=opposed_line(img2,img1)
    ......
    ......
def light_degree(img,i):
    if i>0:
        img = img.point(lambda i: i * 1.1)         #提高图A的亮度 
    else:
        img = img.point(lambda i: i * 0.3)         #降低图B的亮度
    return img
 
Function1（反相与线性减淡）：
        2.出于减少时间复杂度的考虑，我们同时进行反相与线性减淡的运算。由于灰度模式下图片仅有一个通道，灰度值即该点的色彩值，因此计算255-a即能完成反相操作，而计算a+b即能完成线性减淡（即色差值相加）操作。该步得到的最终图片我们命名为“line”。
        用到的函数为
 
load()
图片加载。后续将使用img[x,y]来逐像素点处理。需说明的是，前期我使用了getpixel和putpixel，运算速度非常慢，故换用load，极大地减少了处理时间。
def opposed_line(img2, img1):    
    imgb=img2.load()
    imga=img1.load()
    for x in range(0, img2.width, 1):
        for y in range(0, img2.height, 1):
            b=imgb[x,y]           #逐点读取像素值
            a=imga[x,y]
            color=(255-b+a,)    #(255-)b表示该像素点反相,(255-b)+a即为线性减淡运算
            if color>(220,):          #此步是为了避免线性减淡过程中有灰度值超过255的情况
                imgb[x, y] = (160 - b + a,)
            else:
                imgb[x, y] = color
    return img2
 
Function2（划分）：
        3.划分操作即计算a/b，当然可能出现a/b等于0，或者结果为正整数但非常小的情况，这时我们考虑到是否可以对商的结果进行放大，增加差异的显著性。该步得到的最终图片我们命名为“divided”。
 
def divide(img1, imgO):   #传入img1=图A，img0=Function1处理结果图片
    imga=img1.load()
    imgo=imgO.load()
    for x in range(0, img1.width, 1):
        for y in range(0, img1.height, 1):
            A=imga[x,y]  #逐点读取像素值
            O=imgo[x,y]
            if O==0:    #A/O结果分布在0,1上的像素点非常多，需要通过放大差异将它们分开
                color=(int(A*0.3),)
            elif A/O>=1:
                color = (int(A*6.2),)
            else:
                color=(int(255*A/O),)
            imga[x,y] = color
    return img1
 
Function3（透明蒙版）：
        4.前面处理的图片都是处在L模式下，为了实现透明通道蒙版，我们需要将图片转为RGBA模式。
 
L模式
RGBA模式
divided
DIV_RGBA
并令divided_RGBA的透明通道等于line的灰度值。至此，最终得到的图片就实现了“幻影坦克”效果。
 
def final(divided,line):
    LINE = line.load()
    divided_RGBA = divided.convert("RGBA")
    DIV_RGBA = divided_RGBA.load()
    for x in range(0,line.width,1):
        for y in range(0, line.height, 1):
            DIV_RGBA[x,y] = (DIV_RGBA[x,y][0],DIV_RGBA[x,y][1],DIV_RGBA[x,y][2],LINE[x,y])
 
主要函数都已经介绍完毕。下面贴出我做的一个完整程序源码，然后本文就此结束。
 
 
main.py
 
import functions as fun
from PIL import Image

class UI(object):
    def __init__(self):
        self.img1 = Image.open('C:\\Users\\10698\\Desktop\\project\\11.jpg')   # 上层
        self.img2 = Image.open('C:\\Users\\10698\\Desktop\\project\\22.jpg')   # 下层
    def to_fun(self):
        fun.timecost(self.img1, self.img2)

if __name__ =='__main__':
    ui=UI()
    ui.to_fun()
 
functions.py
 
import time
def timecost(img1,img2):
    start = time.time()
    main(img1,img2)
    end = time.time()
    print("time cost:"+str(end-start))

def main(img1,img2):
    img1_g = img1.convert("L")
    img2_g = img2.convert("L")
    img2_r = img2_g.resize((int(img1_g.width), int(img1_g.height)))  #可调大小
    img1_g = img1_g.resize((int(img1_g.width), int(img1_g.height)))
    img1=light_degree(img1_g,0)
    img2=light_degree(img2_r,1)
    line=opposed_line(img2,img1)
    divided=divide(img1,line)
    final(divided,line)

def save(img1_g,filename):
    img1_g.save("C:\\Users\\10698\\Desktop\\project\\"+filename+".png")

def light_degree(img,i):
    if i>0:
        img = img.point(lambda i: i * 1.1)
    else:
        img = img.point(lambda i: i * 0.3)
    return img

def opposed_line(img2, img1):
    imgb=img2.load()
    imga=img1.load()
    for x in range(0, img2.width, 1):
        for y in range(0, img2.height, 1):
            b=imgb[x,y]
            a=imga[x,y]
            color=(255-b+a,)
            if color>(220,):
                imgb[x, y] = (160 - b + a,)
            else:
                imgb[x, y] = color
    return img2

def divide(img1, imgO):
    imga=img1.load()
    imgo=imgO.load()
    for x in range(0, img1.width, 1):
        for y in range(0, img1.height, 1):
            A=imga[x,y]
            O=imgo[x,y]
            if O==0:
                color=(int(A*0.3),)
            elif A/O>=1:
                color = (int(A*6.2),)
            else:
                color=(int(255*A/O),)
            imga[x,y] = color
    return img1

def final(divided,line):
    LINE = line.load()
    divided_RGBA = divided.convert("RGBA")
    DIV_RGBA = divided_RGBA.load()
    line = line.convert("RGBA")
    for x in range(0,line.width,1):
        for y in range(0, line.height, 1):
            DIV_RGBA[x,y] = (DIV_RGBA[x,y][0],DIV_RGBA[x,y][1],DIV_RGBA[x,y][2],LINE[x,y])
    divided_RGBA.show()
    save(divided_RGBA,"final")

 
 
 
  

  

  

  
嗨，大家好，我是骆晴。很高兴我们又见面了，感谢大家的关注与支持！
  
今天的文章转自一个励志又有趣的公众号「小贱时光」请大家关注哦。
  

  
有朋友之前问我，为什么很清晰的图片上传到公众号，推动到手机端看的时候就变模糊了。三张不同格式的图片大家可以比较一下：
  

  
jpg格式
  

  
png格式
  

  
gif格式
  
png格式和gif格式的图片都是由第一张jpg格式转换而成，也没有改变质量，但是gif格式的图片最清晰，jpg格式图片最模糊。gif不止是动态图片，也可以是静态图片。这也就是为什么小贱时光推送的图文中图片比较清晰的原因了。因此只需要用PS改变一下图片的格式就行。公众号图片清晰度：gif＞png＞jpg。
  为什么有的动图需要点击才能播放？
  

  

  

  

  
最后一张动图需要点击才能播放了，没错！一篇图文中加入了太多动态图片，从第六张开始需要点击才可播放，你数数。
  
为什么这是第五张动图就需要点击才能播放？
  
因为最上面那个“简单而努力，平凡且温暖”也是一张动态图片呢。
  
微信为什么要这样做？
  
为了节省用户的流量，如果没有第6张后点击才能播放，我把一篇图文中全加入动态图片那么你打开图文流量估计就噌~没了。
  
gif格式图片算是动态图片吗？
  
静态的不算，动态的算。
  
怎样把图文中的图片变成圆角的？
  
还是壹伴插件，可以在自带编辑器中点击图片直接修改图片尺寸并给图片加圆角。
  
                     
  
      转载声明：本文转载自「小贱时光」  n」即可关注。注。
 
 
 

 

 

  
 
 
Hello大家好，这里是工具狂人。
 
今天给大家推荐一个朋友圈晒（nue）照（gou）的APP——CUTTT，它可以将一张图片切成9小张，让你在发票圈时不犯选择困难症，又显得独树一帜，赶紧来看一下怎么操作吧。
 

 

  
 
 
 

 

  
 
 
 
01.选择切图数量
 
除了常见的九宫格，CUTTT还提供了另外两种选择——四宫格和六宫格。
 

 

  
 
 
四宫格和九宫格比较适合方形的图片，而六宫格则与横版图片更搭。
 
02.选择切分的照片
 
确定切图数量之后，选择自己喜欢的图片进行切分。
 

 

  
 
 
 
图片完成切分后，可以发现，9张小图上面分别多了一个加号的按钮。
 
这些按钮，其实是CUTTT最为吸引人的地方，你可以在每张小图的上方和下方添加图片，让每张小图都变成一张长图，达到传达更多信息的作用，也让点开的人感到惊喜。
 
03.为小图添加图片
 
点击任意一张切割好的小图，可以进入编辑界面，默认情况下，可以为每张小图添加额外两张图片，若你想添加更多数量的图片，可以点击右上角的添加张数。
 

 

  
 
 
除了增加图片的张数，滑动APP下方的按钮，可以调节图片之间的间距。
 

 

  
 
 
编辑完一张小图后，点击左右两侧的滑动按钮，就可以同样对其他小图进行编辑了。
 
完成所有小图的编辑后，点击APP下方的一键保存，每张编辑好的小图，都会以单独的照片保存到相册中，而且它还会额外生成两张图片，提示你九张图中的第一张和最后一张，是不是很贴心呢？
 

 

  
 
 
APP下载地址：
 
Android端 https://sj.qq.com/myapp/detail.htm?apkName=geziip.com.cuttt
 
iOS端 https://itunes.apple.com/cn/app/id1418359098 
 

  更多阅读可以移步微信公众号：工具狂人（TOOLS-MAN）
 
 

 

  
 
 

 

  
 
 

 

  
 

点击照片实现切换；
 点击前：
 点击后：
 两种方法：
 一.在利用if else 直接切换
 利用微信小程序的wx.if ,wx.else ，在.wxml上定义两张要切换的image照片。
 <image wx:if="{{collected}}" src="/images/icon/collection.png"></image> <image wx:else src="/images/icon/collection-anti.png" ></image>
 collected为一个状态标记量，当点击会进行切换。
 
二.照片路径那里利用三元表达式进行切换
 <image src="{{isPlayingMusic?'/images/music/music-stop.png':'/images/music/music-start.png'}}"></image>
 isPlayingMusic为一个状态标记量，当点击会进行切换。
 .