django获取文本编辑器中的第一张图片 裁切为指定大小并保存

今天主要讲一下怎么获取文本编辑器中的第一章图片作为标题图并保存，主要用到了pyquery和PIL两个模块，一个是获取页面内容，提取文章中的图片，一个是对图片进行处理，话不多说，让我们开始吧

因为添加到数据库的数据为html，所以我们可以用第三方模块PyQuery实现该功能

PyQuery使用方法：

from pyquery import PyQuery as pq
from PIL import Image

class Article(models.Model):
    ......
    content = RichTextField()
    ......
    def get_contentimg_url(self):
        temp=Article.objects.filter(pk=str(self.id)).values('content') #values获取Article数据表中的content字段内容
        html=pq(temp[0]['content']) #pq方法获取编辑器html内容
        img_path=pq(html)('img').attr('src') #截取html内容中的路径
        return img_path  #返回图片路径

就是这么简单，代码中返回的是图片地址，接下来就是保存还有裁切为指定大小。

img_path是文章的相对路径，但是要打开的话就需要绝对路径，我们使用PIL中的Image.open就可以打开，因为还有对图片进行裁切

具体代码如下：

from pyquery import PyQuery as pq
from PIL import Image

class Article(models.Model):
    ......
    content = RichTextField()
    ......
    def get_contentimg_url(self):
        temp=Article.objects.filter(pk=str(self.id)).values('content') #values获取Article数据表中的content字段内容
        html=pq(temp[0]['content']) #pq方法获取编辑器html内容
        img_path=pq(html)('img').attr('src') #截取html内容中的路径
        im_path='.%s'%img_path
        im = Image.open(im_path)
        ori_w, ori_h = im.size
        dst_scale = float(size) / size  # 目标高宽比
        ori_scale = float(ori_h) / ori_w  # 原高宽比
        if ori_scale >= dst_scale:
            # 过高
            width = int(ori_w)
            height = int(width * dst_scale)
            x = 0
            y = int((ori_h - height) / 2)
        else:
            # 过宽
            height = int(ori_h)
            width = int(height * dst_scale)
            x = int((ori_w - width) / 2)
            y = 0
        # 裁剪
        box = (x, y, width + x, height + y)
        # 这里的参数可以这么认为：从某图的(x,y)坐标开始截，截到(width+x,height+y)坐标
        # 所包围的图像，crop方法与php中的imagecopy方法大为不一样
        newIm = im.crop(box)
        width, height = newIm.size
        print(width,height)
        if height > size:  #如果高度大于150，则进行压缩
            delta = height / size
            width = int(width / delta)
            newIm.thumbnail((width, height), Image.ANTIALIAS)
        im_path='./media/art/%s'%file_path
        newIm.save(im_path)
        return im_path  #返回图片路径

这段代码整体比较多，但是可以总结为三个功能（我这里是直接借用网上的部分代码，然后修改了一些参数名称直接使用的），一个是获取文本编辑器中的图片地址，一个是读取图片并对图片进行裁切，最后一个功能就是对图片进行压缩和保存。备注上面写的比较清楚，看不太懂的小伙伴可以多理解下。

这一个整个流程走下来就可以保存裁切并压缩好的图片，返回的URL地址就是图片的存放地址，这个地址在模板中就可以直接使用

在模板中的代码实现如下：

<img src="{{ article.get_contentimg_url}}">

整体的操作流程就是这样。如果有其他django框架的问题，大家可以在django知识栏目中查看