[JS] 剪貼簿上傳圖片 pasteUpload - jQuery Plugin - KnucklesNote板

首頁(home) 上頁(↑) 下頁(↓) 末頁(end)

看板 Knuckles_note

作者 Knuckles (站長那克斯)
標題 [JS] 剪貼簿上傳圖片 pasteUpload - jQuery Plugin
時間 2015年02月20日 Fri. PM 01:26:36

複製圖片後在編輯器貼上，自動將剪貼簿裡的圖片上傳並產生網址

將之前寫的 [JS] 剪貼簿上傳圖片 paste upload - KnucklesNote板 - Disp BBS
改寫成 jQuery Plugin
並加上可設定圖片大小上限，超過會自動縮圖再上傳

瀏覽器只有 chrome 支援

GitHub: https://github.com/KnucklesHuang/imgUpload/

DEMO page: https://knuckles.disp.cc/github/imgUpload/pasteUpload.html

先建立一個 textarea

<textarea style="width: 500px; height: 200px;" id="pasteTarget">

複製一張圖片(例如按PrintScreen)後，在這邊貼上

</textarea>

載入 jQuery 與 plugin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="jquery.pasteUpload.js"></script>

將 textarea 加上 pasteUpload

<script type='text/javascript'>

$(function(){

    var pasteTarget = document.getElementById('pasteTarget');

    $('#pasteTarget').pasteUpload({

        action: 'imgur_upload_base64.php', //接收上傳圖片的網頁，要回傳JSON檔

        maxWidth: 1000, //寬度限制最大1000px

        maxHeight: 0,   //高度不限制

        //上傳圖片前在textarea插入字串，可用id來區別不同次貼上的圖

        onSubmit: function(id){ 

            var anchorStr = "[img "+id+" uploading...]\n";

            document.execCommand("insertText", false, anchorStr);

        },

        //圖片上傳成功後，利用回傳的JSON將插入的字串換成含有圖片網址的字串

        //要用 execCommand 插入字串，才能用ctrl+z回上一步

        onComplete: function(responseJSON,id){

            var data = responseJSON.data;

            var anchorStr = "[img "+id+" uploading...]\n";

            var replaceStr = "[img="+data.width+"x"+data.height+"]"+data.link+"[/img]\n";

            //將 pasteTarget 裡的 anchorStr 換為 replaceStr

            var selStart = pasteTarget.selectionStart;

            var selEnd = pasteTarget.selectionEnd;

            var textValue = pasteTarget.value;

            var strStart = textValue.indexOf(anchorStr);

            if(strStart!==-1){

                var strEnd = strStart+anchorStr.length;

                pasteTarget.selectionStart = strStart;

                pasteTarget.selectionEnd = strEnd;

                document.execCommand("insertText", false, replaceStr);

                if(selStart>=strEnd){

                    var offset = replaceStr.length - anchorStr.length;

                    selStart += offset;

                    selEnd += offset;

                }

                pasteTarget.selectionStart = selStart;

                pasteTarget.selectionEnd = selEnd;

            }

        }

    });

});

</script>

jquery.pasteUpload.js 的內容

/*

 * pasteUpload - jQuery Plugin

 * Copyright (c) 2015 Knuckles Huang

 */

(function($){

	$.fn.pasteUpload = function(options) {

		options = $.extend({ //options 預設值

			action: 'imgur_upload_base64.php',

			maxWidth: 1000, //寬度預設限制最大1000px

			maxHeight: 0,   //高度預設無限制

			onSubmit: function(){},

			onComplete: function(){}

		}, options);

		this.on('paste',function(e){

			e = e.originalEvent; //change jquery event to original event

			var file = null;

			for(var i=0; i<e.clipboardData.items.length; i++) {

				var item = e.clipboardData.items[i];

				if (item.type.indexOf("image") !== -1) {

					file = item.getAsFile();

					break;

				}

			}

			if(file===null){ return; }

			imgUpload(file,options);

		});

		return this;

	};

	function imgUpload(file,options){

		var e = window.event;

		var file = null;

		for(var i=0; i<e.clipboardData.items.length; i++) {

			var item = e.clipboardData.items[i];

			if (item.type.indexOf("image") !== -1) {

				file = item.getAsFile();

				break;

			}

		}

		if(file===null){ return; }

		var type = file.type;

		var src = window.URL.createObjectURL(file);

		//隨機產生一個id，用來辨別不同的上傳檔案

		var id = Math.random().toString(36).substring(3,7);

		options.onSubmit(id);

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

		img.src = src;

		img.onload = function(){

			var width = this.width,

				height = this.height,

				maxWidth = options.maxWidth,

				maxHeight = options.maxHeight;

			//寬或高大於設定的上限時，等比例縮小到符合上限

			if(width > height){

				if(maxWidth>0 && width>maxWidth){

					height *= maxWidth / width;

					width = maxWidth;

				}

			}else{

				if(maxHeight>0 && height>maxHeight){

					width *= maxHeight / height;

					height = maxHeight;

				}

			}

			//使用縮小後的寬高建立一個canvas

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

			canvas.width = width;

			canvas.height = height;

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

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

			//將canvas轉為圖片的base64編碼

			var dataurl = canvas.toDataURL(type); 

			//去掉 dataurl 開頭的 data:image/png;base64,

			var base64 = dataurl.replace(/^data:image\/\w{3,4};base64,/,'');

			//將圖片的base64編碼上傳至網站，將回傳的JSON傳至onComplete

			$.post(options.action, {base64:base64}, function(responseText){

				if(!responseText.match(/^[\{\[]/)){ alert(responseText); return; }

				var responseJSON = JSON.parse(responseText);

				options.onComplete(responseJSON,id);

			},'text');

		};		

	}

})(jQuery);

--
※ 作者: Knuckles 時間: 2015-02-20 13:26:36
※ 編輯: Knuckles 時間: 2023-12-12 02:54:22 (台灣)

※ 同主題文章:

　 01-22 23:04 Knuckles □ [JS] 剪貼簿上傳圖片 paste upload

● 02-20 13:26 Knuckles □ [JS] 剪貼簿上傳圖片 pasteUpload - jQuery Plugin

※ 看板: KnucklesNote　文章推薦值: 0 目前人氣: 0 累積人氣: 828　

分享網址: 複製

DispBBS

回到看板(←)《KnucklesNote》

r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄同主題: =)首篇 [)上篇 ])下篇

回列表(←) 分享