webkit內核的瀏覽器,如何複製當前網頁中的圖像?

一般地,如果是普通的圖像的話,我們可以獲取到元素的地址,然後再去下載,但對於驗證碼來說,就行不通了,因為你一請求,又會得到一個新的,和當前網頁中顯示的不同的驗證碼了!所以我們需要直接在網頁中複製當前顯示的圖像.如果使用的是IE組件的話,可以直接對元素使用copy命令即可,但webkit內核的沒有這個命令.於是需要我們轉換思維,幸好webkit內核瀏覽器都支持canvas,所以我們可以先將圖像畫到canvas畫布上,然後再通過toDataURL()來將圖像數據轉成base64再還原就可以了!

工具/原料

windows作業系統 XP以上版本
aardio程式語言最新版

方法/步驟

創建基礎代碼:

import win.ui;

/*DSG{{*/

var winform = win.form(text="aardio form";right=765;bottom=629)

winform.add(

plus={cls="plus";left=37;top=17;right=349;bottom=143;z=2};

static={cls="static";text="static";left=29;top=185;right=754;bottom=584;transparent=1;z=1}

)

/*}}*/

//導入支持庫

import web.blink.form

//創建對象

var mb = web.blink.form(winform.static);

winform.show()

win.loopMessage();

mb添加基礎html代碼,這裡利用的是html5的新元素canvas,可以將圖像畫到上面,然後再通過toDataURL取出base64編碼的數據

var canvas = document.createElement("canvas");

var getBase64Image = function(img) {

canvas.width = img.width;

canvas.height = img.height;

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, img.width, img.height);

var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();

return canvas.toDataURL("image/"+ext);

}

然後,我們同時測試多個常用的功能,比如將它直接賦值到圖像控制項(這裡以plus高級控制項為例),導出到文件,以前複製到系統的剪貼板,以方便直接CTRL+V粘貼到QQ聊天對話框,或者word等

<button onclick="external.copy('clip')">複製到剪貼板</button>

<button onclick="external.copy('file')">複製到文件</button>

<button onclick="external.copy('image')">複製到圖片控制項</button>

其中的,copy函數是我們通過external接口綁定的aardio方法,通過參數來區別要進行的操作(當然也可以直接使用web.blink.jsBindFunction()綁定copy,類似的):

mb.external = {

copy = function(to){

var canvas = mb.window.canvas;

var data = mb.eval('getBase64Image(img)');

data = string.replace(data,"^data.+?base64,","",1)

data = crypt.bin.decodeBase64(data);

var bmp = gdip.bitmap(data);

select(to) {

case "file" {

string.save("/.png", data);

process.execute("/.png")

}

case "clip" {

win.clip.writeBitmap(bmp.copyHandle())

}

case "plus" {

winform.plus.setBackground(data);

}

}

}

};

由於需要解碼base64和複製到系統的剪貼板,所以還需要導入幾個支持庫:

import crypt.bin;//解碼數據

import process;//打開文件

import win.clip;//複製到剪貼板

測試的圖像,我們這裡選擇的logo,html代碼為:

<img id="img" src="https://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png"/>

完整的代碼為:

import win.ui;

/*DSG{{*/

var winform = win.form(text="aardio form";right=765;bottom=629)

winform.add(

plus={cls="plus";left=37;top=17;right=349;bottom=143;z=2};

static={cls="static";text="static";left=29;top=185;right=754;bottom=584;transparent=1;z=1}

)

/*}}*/

//導入支持庫

import web.blink.form

import crypt.bin;//解碼數據

import process;//打開文件

import win.clip;//複製到剪貼板

//創建對象

var mb = web.blink.form(winform.static);

mb.external = {

copy = function(to){

var canvas = mb.window.canvas;

var data = mb.eval('getBase64Image(img)');

data = string.replace(data,"^data.+?base64,","",1)

data = crypt.bin.decodeBase64(data);

var bmp = gdip.bitmap(data);

select(to) {

case "file" {

string.save("/.png", data);

process.execute("/.png")

}

case "clip" {

win.clip.writeBitmap(bmp.copyHandle())

}

case "plus" {

winform.plus.setBackground(data);

}

}

}

};

//編寫簡單的html代碼

mb.html = /**

<!doctype html>

<html>

<head>

<style type="text/css">

body{ height:100%; margin:0; }

</style>

</head>

<body>

<h2 style="text-align: center;">webkit內核瀏覽器複製圖像 - bigbensoft @ </h2>

<img id="img" src="https://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png"/><br/>

<button onclick="external.copy('clip')">複製到剪貼板</button>

<button onclick="external.copy('file')">複製到文件</button>

<button onclick="external.copy('plus')">複製到圖片控制項</button>

<script type="text/javascript">

var canvas = document.createElement("canvas");

var getBase64Image = function(img) {

canvas.width = img.width;

canvas.height = img.height;

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, img.width, img.height);

var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();

return canvas.toDataURL("image/"+ext);

}

var img = document.getElementById("img");

</script>

</body>

</html>

**/

winform.show()

win.loopMessage();

測試運行一下看看:

點擊第一個按鈕,然後,打開一個QQ聊天窗口,按下ctrl+v,可以直接粘貼了:

點擊第二個按鈕:會自動保存到文件並且會自動調用系統已經關聯的程序打開

點擊第三個按鈕,界面上的plus控制項就已經看到圖片已經複製上去了

這三種是編程開發中最常的用法,得到二進位數據後,怎麼處理都可以了,本篇教程到此結束!

您學會了嗎?

注意事項

本文由 bigbensoft 於""平台首發,轉載請註明出處,且必須帶原始連結;商業應用需要本人的書面授權,否則追究法律責任!
本人 bigbensoft 在""平台所寫的所有原創經驗都是經過親身實踐的,如果它對您有所幫助,請您給我投上一票或分享給有需要的朋友.
如果您根據本經驗進行操作,但過程或者結果不一致,請注意其中的細節是否一致,特別是作業系統平台和軟體版本
如果您對本經驗持有不同看法/意見,或者有更好的建議,歡迎您與我聯繫交流心得,也可以在本經驗中寫"有得"
本人長期於平台分享各種經驗,閱讀完經驗請給我投票,您的舉手之勞是我分享更多/更好經驗的源動力!

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場