js實現圖片拷貝到剪貼簿
思路如下:
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>