[javascript] コピペで張り付けられた画像ファイルをアップロード前にリサイズする
javascriptでコピペで張り付けられた画像ファイルをアップロード前にリサイズするコードは以下の通り
$("textarea[name='msg']").on('paste', function(event){ // event からクリップボードのアイテムを取り出す var items = (event.clipboardData || event.originalEvent.clipboardData).items; // ここがミソ for (var i = 0 ; i < items.length ; i++) { var item = items[i]; if (item.type.indexOf("image") != -1) { // 画像データがあればページに添付する var image = item.getAsFile(); makeSmall(image); } } }); function getCurrentTime() { var now = new Date(); var res = "" + now.getFullYear() + padZero(now.getMonth() + 1) + padZero(now.getDate()) + "-" + padZero(now.getHours()) + padZero(now.getMinutes()) + padZero(now.getSeconds()); return res; } //先頭ゼロ付加 function padZero(num) { var result; if (num < 10) { result = "0" + num; } else { result = "" + num; } return result; } function makeSmall(file){ const THUMBNAIL_WIDTH = 900; // 画像リサイズ後の横の長さの最大値 const THUMBNAIL_HEIGHT = 900; // 画像リサイズ後の縦の長さの最大値 let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (e) => { let img = new Image(); img.onload = () => { var width, height; if(img.width > img.height){ // 横長の画像は横のサイズを指定値にあわせる var ratio = img.height/img.width; width = THUMBNAIL_WIDTH; height = THUMBNAIL_WIDTH * ratio; } else { // 縦長の画像は縦のサイズを指定値にあわせる var ratio = img.width/img.height; width = THUMBNAIL_HEIGHT * ratio; height = THUMBNAIL_HEIGHT; } if(width > this.maxWidth) { height = Math.round(height * this.maxWidth / width); width = this.maxWidth; } let canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; let ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); ctx.canvas.toBlob((blob) => { const imageFile = new File([blob], file.name, { type: file.type, lastModified: Date.now() }); //この後imageFileをアップロードすればよい; }, file.type, 1); }; img.src = e.target.result; }; }
上記のコードでは、Nameがmsgになっているテキストエリア上で画像をペーストすると、自動的に横幅もしくは縦幅900pxに修正してからアップロードするようになっている。