请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Richard.Ma 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-9-5 13:37  /   查看:191  /  回复:4
本帖最后由 Richard.Ma 于 2022-9-5 13:39 编辑

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

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

获取到base64数据
  1. var pngdata=sheet.cameraShapes[0].cameraShapeBuffer.toDataURL('image/png')
复制代码


通过下面的代码可以将上述的base64数据转换为图片
  1. function base64ToBlob(code) {
  2.             var parts = code.split(";base64,");
  3.             var contentType = parts[0].split(":")[1];
  4.             var raw = window.atob(parts[1]);
  5.             var rawLength = raw.length;
  6.             var uint8Array = new Uint8Array(rawLength);
  7.             for (var i = 0; i < rawLength; i++) {
  8.                 uint8Array[i] = raw.charCodeAt(i);
  9.             }
  10.             return new Blob([uint8Array], {type: contentType});
  11.         }
复制代码


下载图片,传入上面返回的imgUrl
  1. var aLink = document.createElement("a"); // 创建一个a标签
  2.                 var blob = base64ToBlob(imgUrl);
  3.                 var event = document.createEvent("HTMLEvents");
  4.                 event.initEvent("click", true, true);
  5.                 aLink.download = date.getTime() + "." + blob.type.split("/")[1]; // 使用时间戳给文件命名
  6.                 aLink.href = URL.createObjectURL(blob);
  7.                 aLink.click();
复制代码






4 个回复

倒序浏览
FzcSuiY
注册会员   /  发表于:2022-9-17 14:44:20
沙发
本帖最后由 FzcSuiY 于 2022-9-17 14:47 编辑

您好!V15版本  我试了一下 cameraShapeBuffer不知道为什么为undefined??麻烦解惑! 官网中文API里面也查不到cameraShapes和cameraShapeBuffer
回复 使用道具 举报
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-9-19 12:07:42
板凳
你先看一下sheet.cameraShapes[0]获取到的cameraShape对象是否存在,如果本身没有快照,自然无法获取cameraShapeBuffer

image.png937671813.png
回复 使用道具 举报
FzcSuiY
注册会员   /  发表于:2022-9-19 13:18:55
地板
image.png644400024.png 我添加了一个快照 , image.png697694701.png cameraShapeBuffer还是无法获取
回复 使用道具 举报
Richard.Ma讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-9-19 16:47:22
5#
建议您可以新发一个帖子,附上能重现问题的demo。我帮你看看原因
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册