HTML5 利用Javascript 達成圖形 複製/貼上 (Copy/Paste) 功能

參考:

http://jsfiddle.net/KJW4E/2/

http://stackoverflow.com/questions/18377891/how-can-i-let-user-paste-image-data-from-the-clipboard-into-a-canvas-element-in

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8″>
<title> Copy / Paste Image demo</title>
<style type=’text/css’>
</style>
</head>
<body>

<script type=’text/javascript’>//<![CDATA[
window.onload=function(){
document.onkeydown = function(e) {return on_keyboard_action(e); }
document.onkeyup = function(e) {return on_keyboardup_action(e); }

var canvas = document.getElementById(“mycanvas");
canvas.onclick = function(e) {return on_mouse_click(e); }

var ctx = canvas.getContext(“2d");
var ctrl_pressed = false;
var posx = 0; var posy = 0;

function on_keyboard_action(event){
k = event.keyCode;
//ctrl
if(k==17){
if(ctrl_pressed == false)
ctrl_pressed = true;
if (!window.Clipboard)
pasteCatcher.focus();
}
}
function on_keyboardup_action(event){
//ctrl
if(k==17){
ctrl_pressed = false;
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight;
}
}
function on_mouse_click(evt) {
posx = evt.clientX;
posy = evt.clientY;
}

//=== Clipboard =================================================

//firefox
var pasteCatcher;
if (!window.Clipboard){
pasteCatcher = document.createElement(“div");
pasteCatcher.setAttribute(“id", “paste_ff");
pasteCatcher.setAttribute(“contenteditable", “");
pasteCatcher.style.cssText = ‘opacity:0;position:fixed;top:0px;left:0px;’;
pasteCatcher.style.marginLeft = “-20px";
document.body.appendChild(pasteCatcher);
pasteCatcher.focus();
document.addEventListener(“click", function(){
//pasteCatcher.focus();
});
document.getElementById(‘paste_ff’).addEventListener(‘DOMSubtreeModified’,function(){
if(pasteCatcher.children.length == 1){
img = pasteCatcher.firstElementChild.src;

var img2 = new Image();
img2.onload = function(){
if (img2.width > canvas.width ) canvas.width = img2.width; // window.innerWidth;
if (img2.height > canvas.height ) canvas.height = img2.height; // window.innerHeight;
ctx.drawImage(img2, posx, posy);
// // // ctx.drawImage(img2, 0, 0);
}
img2.src = img;
//ctx.drawImage(img, 0, 0);

//ctx.drawImage(img, 0, 0);
pasteCatcher.innerHTML = “;
}
},false);
}
//chrome
window.addEventListener(“paste", pasteHandler);
function pasteHandler(e){
if(e.clipboardData) {
var items = e.clipboardData.items;
if (items){
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf(“image") !== -1) {
var blob = items[i].getAsFile();
var URLObj = window.URL || window.webkitURL;
var source = URLObj.createObjectURL(blob);
paste_createImage(source);
}
}
}
// If we can’t handle clipboard data directly (Firefox),
// we need to read what was pasted from the contenteditable element
else{
}
}
else{
setTimeout(paste_check_Input, 1);
}
}
function paste_check_Input(){
var child = pasteCatcher.childNodes[0];
pasteCatcher.innerHTML = “";
if (child){
if (cild.tagName === “IMG"){
paste_createImage(child.src);
}
}
}
function paste_createImage(source){
var pastedImage = new Image();
pastedImage.onload = function() {
if (pastedImage.width > canvas.width ) canvas.width = pastedImage.width; // window.innerWidth;
if (pastedImage.height > canvas.height ) canvas.height = pastedImage.height; // window.innerHeight;
ctx.drawImage(pastedImage, posx, posy);
// // // ctx.drawImage(pastedImage, 0, 0);
}
pastedImage.src = source;
}

//=== /Clipboard ======================================
}//]]>

</script>

<canvas style="border:1px solid grey;" id="mycanvas" width="800″ height="600″ >
</body>

</html>

廣告

About fenjj

Perfect !!??...
本篇發表於 Uncategorized。將永久鏈結加入書籤。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s