如何使用纯Javascript让用户将剪贴板中的图像数据粘贴到Firefox中的画布元素中
How can I let user paste image data from the clipboard into a canvas element in Firefox in pure Javascript?
我已经尽了最大努力找到了一个适用于最新版本Firefox的简单、相关和最新的示例,我真的很挣扎。
标题确实说明了一切。我希望用户能够从编辑器(如Windows Paint)复制图像的一部分,或者使用"打印屏幕"按钮,然后将其粘贴到画布元素中。如果画布调整大小以完全适合粘贴的图像(字面上),则可获得额外点数。
如果合理的话,希望避免使用基于Flash或Java的解决方案。
我在Javascript方面有点不错,但在最新的HTML5功能方面相对缺乏经验,对Canvas元素完全陌生。请帮忙!
2.0版:更小、更干净的代码适用于Chrome、Firefox、Edge和Opera。没有更多的黑客。但如果您需要支持IE和Safari,请查看v1版本。
http://jsfiddle.net/viliusl/xq2aLj4b/5/
版本1.0Chrome的实现很简单。Firefox(和IE)有一些限制,即用户必须发出命令才能进行类似粘贴的键盘事件,并且可编辑的输入必须集中,所以我们在这里做了一些技巧——在ctrl向下时,我们聚焦输入字段,在释放时取消聚焦。
浏览器支持(图像数据):
- Firefox
- 铬
- Edge
- IE-11
- Opera
var CLIPBOARD = new CLIPBOARD_CLASS("my_canvas", true);
/**
* image pasting into canvas
*
* @param {string} canvas_id - canvas id
* @param {boolean} autoresize - if canvas will be resized
*/
function CLIPBOARD_CLASS(canvas_id, autoresize) {
var _self = this;
var canvas = document.getElementById(canvas_id);
var ctx = document.getElementById(canvas_id).getContext("2d");
var ctrl_pressed = false;
var command_pressed = false;
var paste_event_support;
var pasteCatcher;
//handlers
document.addEventListener('keydown', function (e) {
_self.on_keyboard_action(e);
}, false); //firefox fix
document.addEventListener('keyup', function (e) {
_self.on_keyboardup_action(e);
}, false); //firefox fix
document.addEventListener('paste', function (e) {
_self.paste_auto(e);
}, false); //official paste handler
//constructor - we ignore security checks here
this.init = function () {
pasteCatcher = document.createElement("div");
pasteCatcher.setAttribute("id", "paste_ff");
pasteCatcher.setAttribute("contenteditable", "");
pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;width:10px;margin-left:-20px;';
document.body.appendChild(pasteCatcher);
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (paste_event_support === true || ctrl_pressed == false || mutation.type != 'childList'){
//we already got data in paste_auto()
return true;
}
//if paste handle failed - capture pasted object manually
if(mutation.addedNodes.length == 1) {
if (mutation.addedNodes[0].src != undefined) {
//image
_self.paste_createImage(mutation.addedNodes[0].src);
}
//register cleanup after some time.
setTimeout(function () {
pasteCatcher.innerHTML = '';
}, 20);
}
});
});
var target = document.getElementById('paste_ff');
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);
}();
//default paste action
this.paste_auto = function (e) {
paste_event_support = false;
if(pasteCatcher != undefined){
pasteCatcher.innerHTML = '';
}
if (e.clipboardData) {
var items = e.clipboardData.items;
if (items) {
paste_event_support = true;
//access data directly
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") !== -1) {
//image
var blob = items[i].getAsFile();
var URLObj = window.URL || window.webkitURL;
var source = URLObj.createObjectURL(blob);
this.paste_createImage(source);
}
}
e.preventDefault();
}
else {
//wait for DOMSubtreeModified event
//https://bugzilla.mozilla.org/show_bug.cgi?id=891247
}
}
};
//on keyboard press
this.on_keyboard_action = function (event) {
k = event.keyCode;
//ctrl
if (k == 17 || event.metaKey || event.ctrlKey) {
if (ctrl_pressed == false)
ctrl_pressed = true;
}
//v
if (k == 86) {
if (document.activeElement != undefined && document.activeElement.type == 'text') {
//let user paste into some input
return false;
}
if (ctrl_pressed == true && pasteCatcher != undefined){
pasteCatcher.focus();
}
}
};
//on kaybord release
this.on_keyboardup_action = function (event) {
//ctrl
if (event.ctrlKey == false && ctrl_pressed == true) {
ctrl_pressed = false;
}
//command
else if(event.metaKey == false && command_pressed == true){
command_pressed = false;
ctrl_pressed = false;
}
};
//draw pasted image to canvas
this.paste_createImage = function (source) {
var pastedImage = new Image();
pastedImage.onload = function () {
if(autoresize == true){
//resize
canvas.width = pastedImage.width;
canvas.height = pastedImage.height;
}
else{
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
ctx.drawImage(pastedImage, 0, 0);
};
pastedImage.src = source;
};
}
1. Copy image data into clipboard or press Print Screen <br>
2. Press Ctrl+V (page/iframe must be focused):
<br /><br />
<canvas style="border:1px solid grey;" id="my_canvas" width="300" height="300"></canvas>
ViliusL的答案很好,但对于那些寻找简单的跨浏览器方式来捕捉粘贴图像的人来说:
window.addEventListener("paste", async function(e) {
e.preventDefault();
e.stopPropagation();
let file = e.clipboardData.items[0].getAsFile();
let objectUrl = URL.createObjectURL(file);
// do something with url here
});
你可能想做一些错误检查(比如ViliusL的回答),以防他们粘贴的东西不是图像。根据MDN的说法,clipboardData适用于所有现代浏览器。我在Chrome和Firefox上测试过,它们运行良好。
这里有一个适用于现代浏览器的解决方案:
document.addEventListener('paste', async (ev: ClipboardEvent) => {
if(!ev.clipboardData?.items?.length) return
const {items} = ev.clipboardData
for(const item of items) {
if(!item.type.startsWith('image/')) continue
const file = item.getAsFile()!
const bitmap = await createImageBitmap(file)
// ...
context2d.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height)
}
})
不需要对象URL。您可以将剪贴板图像直接转换为ImageBitmap
,然后用drawImage
绘制。
- Firefox:点击并更改未附加到文档树中的复选框元素上的事件
- 将数组元素附加到FormData dos'不适用于Firefox 15
- Firefox赢得了'不会显示我添加的jquery元素,但Chrome会显示
- 元素意外地隐藏在Safari的某些实例中,总是出现在Firefox、Chrome中
- javascript()onclick隐藏元素-dos'我不在firefox工作
- Javascript'元素'在ie中未定义,但在chrome和firefox中运行良好
- firefox扩展/如何访问动态创建的元素
- 重定向Firefox'的web控制台输出到页面元素
- 使用Firefox bookmarklet在元素上触发鼠标单击
- HTML5<视频>元素在Firefox、Opera和Safari中不起作用
- FireFox-在全局作用域中由id名称引用的元素.使用w3c标准
- 在firefox上的滚动事件中移动元素
- jQuery show/fadeIn不将display:block应用于隐藏的父元素内的子元素-仅限FireFox
- firefox中的浮动元素问题
- 在Firefox中的keydown事件中隐藏元素时焦点顺序错误
- 在 Firefox 中单击鼠标时无法选择所有输入元素文本
- 仅限 Firefox/IE - 元素 show() jquery 后冻结的 gif 动画
- 使用Stellar.js时,绝对定位的元素在FireFox中未正确定位
- Firefox在元素已加载后执行onload
- 查找Firefox书签元素是文件夹还是链接