登录/注册

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容

211 主题	1万帖子	2万积分

Rank: 8 Rank: 8

积分: 21413

114672
金币
211
主题
13522
帖子

最新发帖

spreadjs区域快照转换为图片

讲师达人认证

悬赏达人认证

SpreadJS 开发认证

超级版主 / 发表于：2022-9-5 13:37 / 查看：1325 / 回复：4

本帖最后由 Richard.Ma 于 2022-9-5 13:39 编辑

spreadjs区域快照功能目前有很多客户在使用，有时候，我们想要把快照直接保存为图片导出，spreadjs目前也没有直接保存图片方法可以将区域快照转换为图片,但是通过获取到对应的canvas可以这样来转换并导出图片

区域快照对象通过cameraShapeBuffer获取到对应的canvas，再通过toDataURL即可转换为对应格式图片的base64数据，比如下面的代码，转换为了png，然后下载即可

获取到base64数据

var pngdata=sheet.cameraShapes[0].cameraShapeBuffer.toDataURL('image/png')

复制代码

通过下面的代码可以将上述的base64数据转换为图片

function base64ToBlob(code) {
var parts = code.split(";base64,");
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uint8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; i++) {
uint8Array[i] = raw.charCodeAt(i);
}
return new Blob([uint8Array], {type: contentType});
}

复制代码

下载图片，传入上面返回的imgUrl

var aLink = document.createElement("a"); // 创建一个a标签
var blob = base64ToBlob(imgUrl);
var event = document.createEvent("HTMLEvents");
event.initEvent("click", true, true);
aLink.download = date.getTime() + "." + blob.type.split("/")[1]; // 使用时间戳给文件命名
aLink.href = URL.createObjectURL(blob);
aLink.click();

复制代码

收藏

回复

SpreadJS v16.0 正式版发布

4 个回复

倒序浏览

FzcSuiY
注册会员 / 发表于：2022-9-17 14:44:20 沙发

本帖最后由 FzcSuiY 于 2022-9-17 14:47 编辑

您好！V15版本我试了一下 cameraShapeBuffer不知道为什么为undefined？？麻烦解惑！官网中文API里面也查不到cameraShapes和cameraShapeBuffer

回复 使用道具举报

Richard.Ma
超级版主 / 发表于：2022-9-19 12:07:42 板凳

你先看一下sheet.cameraShapes[0]获取到的cameraShape对象是否存在，如果本身没有快照，自然无法获取cameraShapeBuffer

image.png937671813.png

image.png937671813.png

SpreadJS v16.0 正式版发布

回复 使用道具举报

FzcSuiY
注册会员 / 发表于：2022-9-19 13:18:55 地板

image.png644400024.png

我添加了一个快照， image.png697694701.png

image.png697694701.png

cameraShapeBuffer还是无法获取

回复 使用道具举报

Richard.Ma
超级版主 / 发表于：2022-9-19 16:47:22 5^#

建议您可以新发一个帖子，附上能重现问题的demo。我帮你看看原因

SpreadJS v16.0 正式版发布

回复 使用道具举报