html canvas 截图

最新推荐文章于 2025-05-20 15:09:59 发布

djskl

最新推荐文章于 2025-05-20 15:09:59 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 Python

本文链接：https://blog.youkuaiyun.com/djskl/article/details/45935819

Python 同时被 2 个专栏收录

63 篇文章

订阅专栏

前端

30 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas API从浏览器中的画布截取500x500像素的区域，并将其转换为Base64编码的PNG图像数据，最后存储到数据库中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假设上图是通过<canvas id="mycanvas">画在浏览器上的，然后我们要截取中间500x500的一个区域，并将其作为原图的缩略图存储到数据库中。

截取代码：

var canvas_src = document.getElementbyId("mycanvas");

var canvas_dst = document.createElement("canvas");
canvas_dst.width = "500";
canvas_dst.height = "500";
	
var context = canvas_dst.getContext('2d');
var sourceX = canvas_src.width / 2 - 250;
var sourceY = canvas_src.height / 2 - 250;
var sourceWidth = 500;
var sourceHeight = 500;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = 0;
var destY = 0;

context.drawImage(canvas_src, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

drawImage就是将源canvas按指定参数裁剪之后生成一个新的canvas，其中第一个参数可以Image对象，canvas画布或视频。

存储代码：

var img = canvas_dst.toDataURL("image/png");
var data = img.substring(img.indexOf(",")+1);
$.post("store_url", {
	data: data
});

canvas.toDataURL(img_type)可以将当前canvas生成Base64编码的图片数据。格式是:

data:image/png;base64,iVBORw0KGgoAAAANSUh...

这部分字符串可以放到img标签中，如<img src="data:image/png;base64,iVB....">。其中逗号前面是说明信息，我们要存储的是后面的图片数据。在python中可以这么做：

import base64
img_cnt = base64.b64decode(data)

这样img_cnt就转换成标准的二进制文件数据了

如果是字段是bytea类型，django中可以直接赋值：

ImageTable.img_field = img_cnt