私はこのチュートリアルを使用しています。これはクロムで動作し、divの背景画像として画像を表示します
サーバー側の特定のフォルダーにその画像を保存したい...サンプルコードをコピーして.htmlに保存し、chromeで開く...そしてキーボードのprintscreenボタンを押してこのページをクリックし、Ctrl +を押すV 画像が表示されます...その画像をサーバー側の特定のフォルダーに保存したい
私のコード
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>HTML5 JavaScript Pasting Image Data in Chrome </title>
<link rel="stylesheet" type="text/css" media="all" href="http://strd6.com/wp-content/themes/twentyeleven/style.css" />
<script type='text/javascript' src='http://strd6.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
</head>
<body >
<div id="page" style="height:1000px">
<script>
(function() {
(function($) {
var defaults;
$.event.fix = (function(originalFix) {
return function(event) {
event = originalFix.apply(this, arguments);
if (event.type.indexOf('copy') === 0 || event.type.indexOf('paste') === 0) {
event.clipboardData = event.originalEvent.clipboardData;
}
return event;
};
})($.event.fix);
defaults = {
callback: $.noop,
matchType: /image.*/
};
return $.fn.pasteImageReader = function(options) {
if (typeof options === "function") {
options = {
callback: options
};
}
options = $.extend({}, defaults, options);
return this.each(function() {
var $this, element;
element = this;
$this = $(this);
return $this.bind('paste', function(event) {
var clipboardData, found;
found = false;
clipboardData = event.clipboardData;
return Array.prototype.forEach.call(clipboardData.types, function(type, i) {
var file, reader;
if (found) {
return;
}
if (type.match(options.matchType) || clipboardData.items[i].type.match(options.matchType)) {
file = clipboardData.items[i].getAsFile();
reader = new FileReader();
reader.onload = function(evt) {
return options.callback.call(element, {
dataURL: evt.target.result,
event: evt,
file: file,
name: file.name
});
};
reader.readAsDataURL(file);
return found = true;
}
});
});
});
};
})(jQuery);
}).call(this);
jQuery("html").pasteImageReader(function(results) {
var dataURL, filename;
filename = results.filename, dataURL = results.dataURL;
return jQuery("#page").css({
backgroundImage: "url(" + dataURL + ")",
backgroundRepeat: "repeat"
});
});
</script>
</div>
</body>
</html>