实现选择图片插入功能

收藏

相信用过我们在线表格编辑器的伙伴都知道，可以通过按钮来实现选择图片并插入的功能。那么这次的分享将会和大家一起实现在SpreadJS下选择图片并插入的功能。
image.png435330199.png

整体实现效果也如下图
image.png978186645.png

代码方面也较为简单，核心代码如下。我们想要根据我们选择的单元格位置插入图片，需要获取当前活跃单元格的横纵坐标与行高列宽。读取文件后将其转为base64的形式。最后通过add方法将图片插入到指定的单元格。

startRow = sheet.getActiveRowIndex();
startCol = sheet.getActiveColumnIndex();
rowHeight = sheet.getRowHeight();
colWidth = sheet.getColumnWidth();
file = document.getElementById("fileDemo").files[0];
reader = new FileReader();
reader.readAsDataURL(file);//异步读取文件内容，结果用data:url的字符串形式表示
/*当读取操作成功完成时调用*/
reader.onload = function (e) {
timestamp = Date.parse(new Date());
picture = sheet.pictures.add(timestamp.toString(), this.result, startCol * colWidth, startRow * rowHeight);
}

复制代码

下载附件即可查看完整demo。

		自动登录	找回密码
密码			立即注册

0 个回复