最近项目中用到了往剪贴板塞数据的东东，百度了一天，经观察目前js都是往剪贴板中塞入文本数据，针对图片类的数据目前没有办法，所以走条捷径，使用canvas和fsapi进行结合成功往剪贴板中塞入图片数据思路如下：
1：获取原图的base64编码文件
2：创建画布（可以对原图像裁剪，在这我是对原图像进行裁剪）
3：获取裁剪后的base64
4：利用window.open开启新窗口
5：父节点控制子节点页面，并调用fsapi
具体实现如下：
var targetImg = new Image();
var canvas = document.createElement('canvas'); //创建画图
canvas.width = swidth; //swidth为裁剪后的图像高度
canvas.height= sheight;var cxt = canvas.getContext('2d');
cxt.drawImage(targetImg, sx, sy, swidth, sheight, 0, 0, swidth, sheight);//进行裁剪
targetImg.onload = function(){
var clipImage = canvas.toDataURL("image/png",1); //获取裁剪后base64
}
targetImg.src = bolbImage;//原图像的base64
将裁剪后的图像的宽度和高度传递
var htm="<img src='"+PageImage+"' alt='img' />";
var popu = window.open(openurl,"","width="+iwidth+",height="+iheight+"");
popu.onload = function() {
popu.document.getElementById("img").innerHTML=htm;
if(popu && popu.open && !popu.closed){
popu.captionImage();
}
//进行文件存储
//saveImage(PageImage);
}
这里使用onload，确保子页面能够加载完整，captionImage 方法为子页面进行抓取图片塞入剪贴板的函数
子页面：
创建一个img的div，同时引入fsapi
function captionImage(){
FireShotAPI.copyPage(true);
setTimeout(function(){
window.close();
},1000);
<body>
<div id="img"></div>
</body>
扫一扫
1497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
