html canvas 截图

来源：互联网发布：linux怎么选中命令复制编辑：程序博客网时间：2024/06/01 21:44

假设上图是通过<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 base64img_cnt = base64.b64decode(data)

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

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

ImageTable.img_field = img_cnt

0 0