js实现图片拷贝到剪贴板

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014748807/article/details/78545830

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


阅读更多
换一批

没有更多推荐了,返回首页