作者:人帅刀快爱美女_915 | 来源:互联网 | 2023-09-02 19:53
clipboardData原由:應項目需求,須要用某個東西截圖然後粘貼上傳到背景的功用!因而動手搜尋材料,終究的效果就是找到了這個對象clipboardData,然後最先動手!一、
clipboardData
原由:應項目需求,須要用某個東西截圖然後粘貼上傳到背景的功用!因而動手搜尋材料,終究的效果就是找到了這個對象clipboardData
,然後最先動手!
一、谷歌chrome瀏覽器
置信這個也是許多開闢者都在用的瀏覽器,固然也是嘗試的最先。全部歷程是如許的
1)運用微信截圖
2)`'⌘+v, ctrl+v'`在這個頁面的隨便位置粘貼
3)實行上傳圖片到背景的流程(發生loading狀況)
document.body.addEventListener('paste', files, false)
//files是一個要領,內里的參數為event
function files(event) {
//谷歌瀏覽器的的粘貼文件在這個對象下面
if (event.clipboardData || event.originalEvent) {
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
//獵取文件的屬性就在這裏獵取,打印該對象能夠看到相干屬性,效果的操縱就在items內里,所以須要輪迴items
let fileObj = null
for (var i = 0; i // console.log(items[i]);
if (items[i].type.indexOf("image") !== -1) {
//getAsFile() 此要領只是該瀏覽器下才會有的要領
fileObj = items[i].getAsFile();
}
}
if(fileObj !== null) {
fileObj就是一個文件對象,如今就能夠舉行文件的處理了,例如用formdata的情勢傳遞給背景,這個自行百度,本片章不與報告。
} }}
假如須要在頁面中顯現能夠有兩種要領顯現圖片
第一種
在上面的代碼if處接着寫
if(fileObj !== null) {
var fileUrl=URL.createObjectURL(blob);
document.getElementById("imgNode").src=fileUrl;
}
URL是一個公用的對象
第二種要領是用base64的要領能夠完成, 須要藉助FileReader對象
var reader = new FileReader();
reader.Onload= function (event) {
//event.target.result 即為圖片的Base64編碼字符串
var base64_str = event.target.result;
document.getElementById("imgNode").src=base64_str;
}
reader.readAsDataURL(blob);
以上就是在谷歌瀏覽器中完成的要領了!然則僅限在谷歌瀏覽器
,由於此項目在mac上開闢,所以就嘗試了在safari中試着運轉,效果一點迴響反映都沒有,哎,接踵查了許多的材料才懂了一點點,這裏也就簡樸的分享下,願望對這一塊比較有深切相識的人來批評、指導下我。
題目1
document.body下的onpaste不起作用,如今也沒有查到,因而乎只能在div(contenteditable)
下嘗試了一下下。然則發明clipboardData下面並沒有items這個對象,所以上面的要領也就不成立了,詳細的哪些數據能夠參考這篇文章,上面引見了他屬性的一些請求,所以只能另謀要領了!查閱了很多材料邃曉了一些!
safari粘貼的數據根本就沒有存在clipboardData這個對象下,而是在這個div下增加了一個圖片,新建了一個img標籤,然後src指向當地的blob鏈接數據,不信的話你們能夠本身打印一下。
所以想要獵取對象只能如許了,詳細代碼以下,藉助jq
base64轉換為blob對象
function dataURLtoBlob(dataURL, sliceSize) {
var b64Data, byteArray, byteArrays, byteCharacters, byteNumbers, contentType, i, m, offset, ref, slice;
if (sliceSize == null) {
sliceSize = 512;
}
if (!(m = dataURL.match(/^data\:([^\;]+)\;base64\,(.+)$/))) {
return null;
}
ref = m, m = ref[0], cOntentType= ref[1], b64Data = ref[2];
byteCharacters = atob(b64Data);
byteArrays = [];
offset = 0;
while (offset slice = byteCharacters.slice(offset, offset + sliceSize);
byteNumbers = new Array(slice.length);
i = 0;
while (i byteNumbers[i] = slice.charCodeAt(i);
i++;
}
byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
offset += sliceSize;
}
return new Blob(byteArrays, {
type: contentType
});
};
base64 轉為 文件對象
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
查找瀏覽器增加的圖片標籤
var _checkImagesInCOntainer= function(that,cb) {
var img, j, len, ref, timespan;
timespan = Math.floor(1000 * Math.random());
ref = that.find('img');
for (j = 0, len = ref.length; j img = ref[j];
img["_paste_marked_" + timespan] = true;
}
return setTimeout((function(_this) {
return function() {
var k, len1, ref1;
ref1 = _this.find('img');
for (k = 0, len1 = ref1.length; k img = ref1[k];
if (!img["_paste_marked_" + timespan]) {
cb(img.src);
$(img).remove();
}
}
};
})(that), 1);
};
效果運轉
_handleImage = function(src, e, name) {
var loader;
loader = new Image();
loader.crossOrigin = "anonymous";
loader.Onload= (function(_this) {
return function() {
var blob, canvas, ctx, dataURL;
canvas = document.createElement('canvas');
canvas.width = loader.width;
canvas.height = loader.height;
ctx = canvas.getContext('2d');
ctx.drawImage(loader, 0, 0, canvas.width, canvas.height);
dataURL = null;
try {
dataURL = canvas.toDataURL('image/png'); //運用這個圖片的時刻須要到場這個屬性crossOrigin,由於須要開啟許可跨域
blob = dataURLtoBlob(dataURL);
console.log(dataURLtoFile(dataURL, 'test'))
} catch (error) {}
if (dataURL) {
// _this._target.trigger('pasteImage', {
// blob: blob,
// dataURL: dataURL,
// width: loader.width,
// height: loader.height,
// originalEvent: e,
// name: name
// });
}
};
})(this);
return loader.src = src;
};
$('.input').on('paste', function (event) {
_checkImagesInContainer($('.input'), function (src) {
_handleImage(src, $('.input'))
})
})