js实现图片拷贝到剪贴板

来源：互联网发布：9.9元天天特价淘宝编辑：程序博客网时间：2024/05/01 21:43

最近项目中用到了往剪贴板塞数据的东东，百度了一天，经观察目前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);

阅读全文

0 0